|
|
|
|
| ||
      |
| ||||
|
|
|
|
|
|
|
CATEGORIES Home Getting Started HTML Cheat Sheet Webmaster Tools HTML Help Forum Color Codes Link to us |
|
|
 | ||||
|
|
|
|
|
This is a popular one. If you don't already know, this allows you to have an image on a web page, and when you place your mouse over that image, it changes to another one. This is a great way to make your site interactive. How to do itTo add this to your web page, you first have to add the following code right after your <HEAD> tag, before your <title> tag. This code is for 4 mouseovers img0, img1, img2, and img3. If you need more, or less than 4, Click Here. Understanding the code:On img0, image1.gif is the image that is shown all the time. (When the mouse is not on the image) image2.gif is the image that appears when you place your mouse over the image. This goes for the rest of the mouseovers, for img1, image3.gif is the image that is always showing, and image4.gif is the image that appears on mouse over. and so on with the rest of the mouseovers. Next, after you filled in all of your own images, replace width,height with the actual width and height of your images. Finally, place the following code where you would like the mouse over image to appear. (Somewhere in the body section of your page) <a href="yoururl.html" onmouseover="over_image('img0');" onmouseout="off_image('img0')"> <img src="image1.gif" border="0" name="img0"> </a> Replace image1.gif with the same image you put as image1.gif in img0. Next replace yoururl.html with the address you want to go to when you click on the image.. This is for your first mouse over, img0, for the rest, just replace img0, with img1, img2, and so on... Example <HTML> <HEAD> <script language="JavaScript"> <!-- Hide the script from old browsers -- img0_on = new Image(186,25); img0_on.src="example2.gif"; img0_off = new Image(186,25); img0_off.src="example1.gif"; img1_on = new Image(103,33); img1_on.src="email2.gif"; img1_off = new Image(103,33); img1_off.src="email1.gif"; function over_image(parm_name) { document[parm_name].src = eval(parm_name + "_on.src"); } function off_image(parm_name) { document[parm_name].src = eval(parm_name + "_off.src"); } // --End Hiding Here --> </script> <TITLE>blah blah blah</TITLE> </HEAD> <BODY> <a href="http://www.thehtmlsource.com" onmouseover="over_image('img0');" onmouseout="off_image('img0')"> <img src="example1.gif" border="0" name="img0"> </a> <a href="http://www.thehtmlsource.com" onmouseover="over_image('img1');" onmouseout="off_image('img1')"> <img src="email1.gif" border="0" name="img1"> </a> </BODY> </HTML> In the browser, this would look like this:  
Adding more or less mouseovers If you don't need 4, or need more than 4 mouseovers, you can add or delete as needed. If you don't need 4, you only need 3, delete the img3 code, meaning delete this whole part: img3_on = new Image(width,height);If you only need 2, delete img2, and so on... If you need more than 4, just add a img4, and img5, and so on as needed, like this: img4_on = new Image(width,height); Privacy Policy | Trademark Notices | User Agreement © 2001 TheHTMlSource.com, INC. All Rights Reserved. |
