FAQ FAQ | Forum Rules and Policies Forum Policies
 
Memberlist Member List | Community Community

Navigation

Home
Tutorials


References
Web design tips
Dating
Graphic Design tips
Search Engine Promotion
User-Agent database
About the Internet
Web Technology
Web Screenshot Archive
Our Newsletter
Search

Free Stuff
Free graphics
Free desktop wallpaper
Free HTML templates
Free scripts

Free web-based tools
Graphic Design Contest
Affordable Web Hosting
Educational Toys
Diaper Cake

Services
Learning Toys
Services summary
Dog Supplies
Dog Collars
Dog Beds
Dog Clothes
Dog Toys
Cake Decorating
Web design services
Web design packages
Logo design services
Lake Norman Coupons
Graphic design services
Pricing
Portfolio
Custom Website Design
Unique Baby Gifts

Inside i.D.
Our partners
Advertise
Site Map
FAQ
Contact
About

Mouseover tutorials

Most of you have probably seen a mouseover at one time or another. This is a neat little javascript that calls one image, and when you move your mouse over it, calls another image. Some of you may have noticed this one I've had on the front page at one time or another...

Click here!

If you use Macromedia's Dreamweaver to create your pages, you can insert rollover images simply with a few clicks of the mouse. If you prefer to edit your code by hand, you can do it this way:

The mouseover script consists of two parts. The first part of code is placed inside your <HEAD></HEAD> tags, and preloads the images for the rollover effect:

<head>
<SCRIPT language=JavaScript>
<!--
overimage=new Image(50, 20); outimage=new Image(50, 20);
overimage.src="youroverimage.jpg"; outimage.src="youroutimage.jpg"
//-->
</SCRIPT>
</head>

You will need to replace 'youroverimage' and 'youroutimage' with the actual images you wish to have mouseover, and the '50,20' with the sizes in pixels of the images. Next we have the actual code that calls the images inside the <BODY></BODY> tags.

<body>
<a href="yourlinkhere " onmouseover="image.src=overimage.src" onmouseout="image.src=outimage.src">
<img name="image" src="youroutimage.jpg" width=50 height=10 border=0></a>
</body>

On this part above you need to replace 'yourlinkhere' with the url when someone clicks on the image. You can just put a # if you don't wish it to go anywhere. You also need to replace the 'youroutimage.jpg' with the outimage of your rollover.

Hope this helps.

 

 


Cool Sites

Website Templates
Free Hit Counter
$2.95/month Web Hosting
Reseller Hosting

 



Logo Design | Photoshop Tutorials | Dreamweaver Tutorials | Non GMO Canola
© 2000-2004 IceHouse Designs, Inc. View Privacy Statement.

Valid HTML 4.01!

Valid CSS!