Images That Change On Mouse Over

Sometimes a good way of grabbing people attention on a page is to have something happen that the dont expect such as a image changing when the users mouse is passed over an image.

Pass your mouse over the image below

Copy the HTML code below into your blog or web page in the body


<a href="#any_URL"onMouseOver="handleOver();return true;" onMouseOut="handleOut();return true;" ><img name=imgName width=17 height=15 border=0 alt="This image changes when you point at it!"src="/hi-icons/2.gif"></a>

To create this image roll over effect two images are pre loaded using javascript in the head. The tag is embedded in a hyperlink that has JavaScript onMouseOver and onMouseOut event handlers in it. The HTML that is used on the page in the body is the box below:-

<script language="JavaScript"><br /> <!--<br /> // PRELOADING IMAGES<br /> if (document.images) {<br /> img_on =new Image(); img_on.src ="../hi-icons/1.gif";<br /> img_off=new Image(); img_off.src="../hi-icons/2.gif";<br /> }</p><br /> <p>function handleOver() {<br /> if (document.images) document.imgName.src=img_on.src;<br /> }</p><br /> <p>function handleOut() {<br /> if (document.images) document.imgName.src=img_off.src;<br /> }</p><br /> <p>//--><br /> </script>

Adding this effect to more than one image on a page is more complicated and requires different code to what is used here