CodeAve.com/JavaScript - JavaScript Two Image Change

CodeAve.com - JavaScript - Images

ASP
JavaScript
·Document Info
·Forms
·Images
·Miscellaneous
·Navigation
·Script Writers
·Contents
·What's New?
CSS
HTML
Maps
Links
Mail List
Search
Sitemap

JavaScript Two Image Change

In previous articles we’ve demonstrated image mouseover and rollover effects, this is a combination of the two. When the mouse pointer is placed over an image that image will change. In addition a second "main" image will also change when the mouse pointer is over an image.

•View the Output

•Text View

•Print View

•Mail this Link

<html>
<title>CodeAve.com(Two Image RollOver)</title>
<body bgcolor="#FFFFFF">
<center>

<img name="main_image" src="images/pink.jpg"
border=0 alt="Rollover Image" width="100" height="100" >

<p>

<a href="#"
onmouseover='main_image.src = "images/red.jpg";rollover1.src="images/ltred.jpg"'
onmouseout='main_image.src="images/pink.jpg";rollover1.src="images/red.jpg"'>
<img name ="rollover1" src="images/red.jpg" border=0 width=25 height=25 alt="Red"></a>
 

<a href="#"
onmouseover='main_image.src = "images/green.jpg";rollover2.src="images/ltgreen.jpg"'
onmouseout='main_image.src="images/pink.jpg";rollover2.src="images/green.jpg"'>
<img name ="rollover2" src="images/green.jpg" border=0 width=25 height=25 alt="Green"></a>
 

<a href="#"
onmouseover='main_image.src = "images/blue.jpg";rollover3.src="images/ltblue.jpg"'
onmouseout='main_image.src="images/pink.jpg";rollover3.src="images/blue.jpg"'>
<img name ="rollover3" src="images/blue.jpg" border=0 width=25 height=25 alt="Blue"></a>
 

</center>

</body>
</html>