css aan javascript koppelen?

Status
Niet open voor verdere reacties.

jeel2008

Gebruiker
Lid geworden
30 okt 2008
Berichten
839
hallo, ik heb een vraag.
ik heb een javascript: als je over een thumbnail gaat met je cursor komt er elders een grotere foto in beeld, dmv javascript. nu wil ik die grotere foto een witte rand geven, via css.
maar dat lukt niet.

een deel van de code van javascript ziet er zo uit;
[JS]<script language="JavaScript" type="text/javascript">
var afbeeldingen=new Array()
afbeeldingen[0]=["vlinderpost/foto1.jpg"]
afbeeldingen[1]=["onderwijs_vlinderpost_2.jpg"][/JS]

etc etc
hier wordt dus de grote foto aangeroepen
maar je kunt nergens een css toepassen.
ik heb bijvoorbeeld 'vlinderpost/foto1.jpg' geselecteerd en proberen een class mee te geven , maar dat gaat niet.

hoe zou ik dit wel werkend kunnen krijgen met css?

groeten jeel2008
 
Hoi Jeel,

Ik neem aan dat je voor het vergrotende effect onMouseOver gebruikt? In dat geval moet je bij onMouseOver een functie aanroepen die de css style verandert van het vergrote plaatje. Een functie achter onMouseOut moet de style dan weer terugzetten. Dat kan op meerdere manieren, hieronder een voorbeeld:

Code:
<img src="img/plaatjeklein.png" id="plaatje_klein" onmouseover="groterPlaatje();" onmouseout="kleinerPlaatje();">
<img src="img/plaatjegroot.png" id="plaatje_groot" style="border: 0px; width: 10px; height: 10px">

<script type="text/javascript">
function groterPlaatje()
{
 plaatjegroot=document.getElementById('plaatje_groot');
 plaatjegroot.style.border='10px solid white';
 plaatjegroot.style.width='100px';
 plaatjegroot.style.height='100px';
}
function kleinerPlaatje()
{
 plaatjegroot=document.getElementById('plaatje_groot');
 plaatjegroot.style.border='0px';
 plaatjegroot.style.width='10px';
 plaatjegroot.style.height='10px';
}
</script>
 
hallo piet20
en bedankt voor je reactie.
ja, ik werk met mouseover, maar het is toch iets anders dan je hier stelt.
als je de bijlagen opent zie je de gehele code.
bovenaan voor de grote plaatjes, dit staat in de header.
onderaan voor de kleine, dit staat in de body.
kan ik nu toch jouw 'techniek' toepassen met die IDs?
 

Bijlagen

Laatst bewerkt:
Hi Jeel,

Voor het gemak zou ik het eigenlijk even in werking moeten zien, maar ik denk dat het een kwestie is van:

Code:
function beeldcode(dezeafbeelding){
var beeldhtml=""
if (dezeafbeelding[1]!="")
beeldhtml='<a hef="'+dezeafbeelding[1]+'" target="'+optlinktarget+'">'
beeldhtml+='<img src="'+dezeafbeelding[0]+'" border="'+beeldrandbreedte+'" [B]style="border: 1px solid white;"[/B]>'
if (dezeafbeelding[1]!="")
beeldhtml+='</a>'
return beeldhtml}

Zou het overigens niet makkelijker zijn om in plaats van innerHTML, het grote plaatje aan de rechterkant gewoon te wijzigen door middel van:

Code:
document.getElementById('uitvergroteplaatje').src=nieuwelinknaarhetplaatje; // nieuwelinknaarhetplaatje is variabel
?
 
css

hallo piet20,
ik ga er morgen even naar kijken.
maar je kunt het zien op bijvoorbeeld:
www.basteravest.nl
alleen dan zonder witte randen
en bijvoorbeeld hier
http://www.naturama.nl/fotos_bruidsbedvaneenvlinder.php (met witte randen, in photoshop gemaakt)

in ieder geval bedankt voor je antwoord , ik kom er nog op terug.
tussen twee haakjes: ik had achteraf gezien misschien net zo goed met de behaviours in dreamweaver kunnen werken. wat denk je, was dat makkelijker geweest?
 
test

hallo piet20,
je hebt helemaal gelijk gehad (zie bijlage, het resultaat van style="border: 15px solid white;")
heel erg bedankt voor je deze tip.
wel jammer dat ik net 200 fotos handmatig van een rand heb voorzien,maar dan weet ik dit in ieder geval voor de volgende keer. :)
groeten jeel2008
 

Bijlagen

  • voorbeeld.jpg
    voorbeeld.jpg
    21,4 KB · Weergaven: 53
Hi Jeel,

Weet niet hoe het zit met de behaviours van Dreamweaver omdat ik dat programma eigenlijk zelden heb gebruikt ;)

Mooi om te horen dat ik heb kunnen helpen. =)
 
javascript

hallo piet, ik wilde nog heel even terugkomen op de witte rand en javascript.
als je kijkt op
http://www.naturama.nl/fotos_vlinderpost.php
en je gaat over de tweede thumbnail op de tweede rij dan zie je een grote image met vlinders.

daar heb ik 2 vragen over:
1. hier zou ik geen witte rand willen, maar hoe maak ik een uitzondering?
2. ik zou eigenlijk de tekst onder de foto willen laten verschijnen per vlinder in een alt-tag.
maar dat kan zeker niet als het plaatje wordt opgeroepen dmv javascript?
ik bedoel, je kunt zeker niet met een hotspot werken omdat het plaatje pas verschijnt tijdens de rollover?

groeten jeel2008
 
Mischien kan je hier wat mee. Speciaal voor jou, een custom demo. Zie bijlage. Code moet duidelijk zijn denk ik. Bij grote foto's kan je dus de stijl van de kleine plaatjes een vaste width/height geven.
 

Bijlagen

vlinders

hallo vegras,
ok, bedankt. heb het geprobeerd en het werkt goed.
volgens mij is dit inderdaad wel zo'n beetje wat ik zoek.
kun je dan ook aangeven WAAR het grote plaatje verschijnt in de ID?
 
hoe bedoel je, 'waar'? Qua locatie op je scherm? Dat kan je aanpassen in de css.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan