mouse-over maken

Status
Niet open voor verdere reacties.
N

namsob

Gebruiker
Lid geworden
26 jul 2009
Berichten
66
hallo,

op een andere site zag ik een code staan voor een mouse-over, namelijk:
<html>
<head>
<script language="Javascript">
<!--
if (document.images)
{
image1 = new Image
image2 = new Image
image1.src = 'mouseover1.jpg'
image2.src = 'mouseover2.jpg'
}
-->

</script>
</head>
<body>

<a href="http://www.joriso.nl" onMouseOver="document.mouseover.src=image2.src" onMouseOut="document.mouseover.src=image1.src">
<img src="mouseover1.jpg" border=0 name="mouseover"></a>
</body>
</html>



het was een voorbeeld hoe het moet maar ik snap er eerlijk gezegd niks van. Is er misschien iemand die het mij uit kan leggen? ik heb twee foto's:
Foto's-0013.jpg
Foto's-0015.jpg

kan nu iemand een code voor mij maken of heb je daar meer informatie voor nodig???


mvg,
namsob
 
dit is een simpel script dat twee afbeeldingen wisselt als er met de muis overheen wordt gegaan:
HTML: 
<html>
<head>
<script type="text/javascript"> 
function muisOp() {document.images["plaatje"].src="jouwplaatje1.jpg"} //plaatje voor als je met de muis erover gaat
function muisAf(){document.images["plaatje"].src="jouwplaatje2.jpg"} //voor als de muis eraf is
</script>
</head>
<body> 
<a href="http://www.helpmij.nl/" onMouseOver="muisOp()" onMouseOut="muisAf()"> 
<img name="plaatje" src="jouwplaatje1.jpg"></a>//link 
</body>
</html>

Door de attributen onMouseOver en onMouseOut toe te voegen vertel je aan het element wat het moet doen als de muis er overheen gaat. Tussen de quotes staan de functies uit het script die het aanroept. Dus bij onMouseOver staat er dat hij de functie muisOp uit het script moet uitvoeren, die vervolgens een afbeelding laat zien.

ik hoop dat het zo duidelijk is!:thumb:
 
bmtvrr zei:
dit is een simpel script dat twee afbeeldingen wisselt als er met de muis overheen wordt gegaan:
HTML: 
<html>
<head>
<script type="text/javascript"> 
function muisOp() {document.images["plaatje"].src="jouwplaatje1.jpg"} //plaatje voor als je met de muis erover gaat
function muisAf(){document.images["plaatje"].src="jouwplaatje2.jpg"} //voor als de muis eraf is
</script>
</head>
<body> 
<a href="http://www.helpmij.nl/" onMouseOver="muisOp()" onMouseOut="muisAf()"> 
<img name="plaatje" src="jouwplaatje1.jpg"></a>//link 
</body>
</html>

Door de attributen onMouseOver en onMouseOut toe te voegen vertel je aan het element wat het moet doen als de muis er overheen gaat. Tussen de quotes staan de functies uit het script die het aanroept. Dus bij onMouseOver staat er dat hij de functie muisOp uit het script moet uitvoeren, die vervolgens een afbeelding laat zien.

ik hoop dat het zo duidelijk is!:thumb:
Klik om te vergroten...



okey, bedankt!!


gr.
 
Om het allemaal wat meer portable te maken, kan je in dit geval, vergeef me, beter inline JS gebruiken. Zoiets:
HTML: 
<img src='standaard.jpg'
     onmouseover='this.src="anderplaatje.jpg";'
     onmouseout='this.src="standaard.jpg";' />
voor een mouse-over plaatje, en
HTML: 
<a href='#'
   onmouseover='document.getElementById("img").src="anderplaatje.jpg";'
   onmouseout='document.getElementById("img").src="origineel.jpg";'>muis me!</a>

<img id='img'
     src='origineel.jpg'
     alt='een plaatje van ....' />
voor een mouse-over link+plaatje


:thumb:
 
Laatst bewerkt:
in dit geval is dat inderdaad misschien wat overzichtelijker. Maar over het algemeen is het toch beter je HTML, CSS en JavaScript strict gescheiden te houden:p, dan is je code minder rommelig
EDIT: bovendien kun je dan je javascript en je css vaak hergebruiken
 
Laatst bewerkt:
Yup, je hebt helemaal gelijk, vandaar het [...], vergeef me, [...].
Maar over het algemeen
Klik om te vergroten...
Gewoon altijd :) javascript in je .js file, en css in je .css file. :thumb:
 
ik ben met kompozer een site aan het maken en wil onder een mouse-over plaatje een link plaatsen. gaat dat met die eerste code dan niet lukken? en wat voor code heb je dan nodig?


mvg.
 
Laatst bewerkt:
de eerste of de tweede code maakt helemaal niks uit, ze hebben hetzelfde effect. In dit geval zou ik kiezen voor de tweede omdat je waarschijnlijk dit stukje code echt maar 1 keer nodig hebt:). Maar wat ik wou zeggen is dat je daar geen gewoonte van moet maken. Als je namelijk alle titels op je pagina op dezelfde manier wilt opmaken is het heel onhandig om steeds weer de zelfde code te schrijven. En bovendien is een code waarbij je de css, html en javascript gescheiden houdt veel beter leesbaar voor mensen:thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan