17-07-2008

Javascript Javascript mouseover image swap

Code
Javascript
Javascript mouseover image swap

This little mouseover javascript preloads images in the head section of the page and then displays these based on onMouseOver and onMouseOut events on the image. So classic it works in any javascript supporting browser.

<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>

Comments:

3 comments.
Your comment:

»
Tim 21/07/2011, 7:18 pm
1 probleempje.. Als ik meerdere wil doen onder elkaar. Dus meerdere plaatjes met een hover dan doet hij het niet meer. Ik nummer ze gewoon netjes maar het probleem zit hem in de body.. Zodra ik een nieuwe toe wil voegen doet ook de eerste hover het niet meer. Zou je een goede code kunnen plaatsen voor meerdere hovers op 1 pagina? Want ik krijg het maar niet voor elkaar.

Gr Tim
Pascal 08/11/2011, 9:22 pm
Ik heb hetzelfde probleem als Tim. Is de juiste code al gevonden?


gr,

Pascal
Mystefyer 10/12/2011, 9:33 pm
Voor degene die het nog interreseert ; de oplossing voor meerdere mouseovers :-)

<a title="Home" href="index.php?page=main" onMouseOver="document.mouseover1.src=image2.src"
onMouseOut="document.mouseover1.src=image1.src"><img src="images/home_button.png" border="0" name="mouseover1" /></a>
<a title="Reiki" href="index.php?page=reiki" onMouseOver="document.mouseover2.src=image4.src"
onMouseOut="document.mouseover2.src=image3.src"><img src="images/reiki_button.png" border="0" name="mouseover2"/></a>

De clou zit hem in het mouseover gedeelte, de name moet uniek zijn.

script :

<script language="Javascript">

if (document.images){
image1 = new Image
image2 = new Image
image1.src = 'images/home_button.png'
image2.src = 'images/home_button_over.png'
image3 = new Image
image4 = new Image
image3.src = 'images/reiki_button.png'
image4.src = 'images/reiki_button_over.png'
}
</script>

Veel plezier ermee !

 

[x]
Go