• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Mouse Rollovers

One of the main reasons JavaScript became popular was its capability to swap images in the browser in real time when the mouse moved over an image. Here’s an example that shows how that works, using the mouse-over and mouse events. You can handle these events in the <IMG> element itself, or in an element that encloses the <IMG> element. For example, here I’m enclosing an image in a hyperlink <A> element. Note that I’ve set the BORDER property of the <IMG> element to "0" so that no hyperlink border appears. When the page loads, the image displayed shows the text Image 1, but when the mouse moves over the image, it’s swapped for an image that displays the text Image 2:

(Listing 15-07.html on the web site)

<HTML> 
    <HEAD> 
        <TITLE>Mouse Rollovers</TITLE> 
        <SCRIPT LANGUAGE= JavaScript> 
            <!--
            function ImgOver()
					{
					document.form1.img1.src="image2.jpg"
					}
					function ImgOut()
					{
					document.form1.img1.src="image1.jpg"
					} 
            //--> 
        </SCRIPT> 
    </HEAD> 

    <BODY> 
        <H1>Mouse Rollovers</H1> 
        <FORM NAME="form1"> 
            <A HREF="http://www.w3.org" NAME="link1"
					ONMOUSEOVER="ImgOver()" ONMOUSEOUT="ImgOut()">
					<IMG BORDER="0" NAME="img1" SRC="image1.jpg" WIDTH="216" HEIGHT="72">
					</A> 
        </FORM> 
    </BODY> 
</HTML> 

					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint