Image rollover effect for your links - JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

TrafficChecker.net

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


Image rollover effect for your links

The beauty of this dynamic image rollover effect for your textlinks is that you need no JavaScript and DHTML at all. Easy to configure. Now it is time to test this link-maker-script to download Read the instructions on the upper part of this script.


Insert into <HEAD>
<style> A,A:Visited,A:Active{ color: FF0000; } A:Hover { background-image: url(bg2212.jpg); } .baselinestyle { width:640px; font-size : 26pt; font-family : Arial; font-weight : bold; color: AA0000; text-align:center } </style> <!-- CREDITS: Image-Rollover effect for your links without JavaScript by Peter Gehrig Additional scripts can be found at http://www.24fun.ch. info@24fun.ch 12/22/1999 IMPORTANT: If you add this script to a script-library or script-archive you have to add a link to http://www.24fun.ch on the webpage where this script is running. INSTRUCTIONS: 1. Create a backgroundimage (jpg or gif) for your links. 2. Configure the "A:Hover" part of the style steet as seen above and enter the file-name of your background-image inside the url-brackets. 3. Wrap a <span>-tag around all your links. 4. That's it. Have fun. -->

Insert into <BODY>
<div id="baseline" class="baselinestyle">Now it is time to test this link-maker-script and to <span><a href="http://www.24fun.ch" target="_blank">download</a></span> over 150 free DHTML- and CSS-scripts and web special effects.<br><br>Read the instructions on the upper part of this script.</div>

Other Options