Can someone teach me how to do rollovers? Options

[Nikki09815]

I've looked for some tutorials on them, but I can't seem to find any that I can actually follow.
Can someone, by chance, teach me how?

[GunsNRachel]

yes! I'll give you the code I use:

CODE

a.nav{
display:block;
width:165px;
margin:1px;
background-color:white;
font-family:arial!important;
font-size:14px!important;  
font-weight:normal!important;
color:555555!important;
text-decoration:none!important;}

a.nav:hover{
width:165px;
background-color:COLORHERE;
background-image:url(URLHERE);
display:block;
margin:1px;
font-family:arial!important;
font-size:14px!important;  
font-weight:normal!important;
color:9d1829!important;
text-decoration:none!important;
}

This code should go between <style type="text/css"> and </style>. The top code is for the navigation, the bottom is for the rollovers. Where it says "background-color: ;" is where the rollover color goes. If you want it to be an image rollover, you create the image, upload it and put the link where it says "background-image:url(URLHERE);" and that's about it. If you have any questions feel free to ask me and I'll try to help =)

Oh sorry, I forgot something:
When making a link that you want to use the rollover you need to make the link look like this,

CODE

<a class="nav" href="http://home.myspace.com/index.cfm?fuseaction=user">Home</a>

[Melissa]

There's also this script if you want an image swap rollover:

CODE

<script language="javascript">
<!-- hide script from old browsers

//detect browser:
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) browserVer = "1";
else if (browserName == "Microsoft Internet Explorer" && browserVer == 4) browserVer = "1";
else browserVer = "2";

//preload images:
if (browserVer == 1) {
a1 = new Image(WIDTH,HEIGHT);
a1.src = "FIRST IMAGE URL";
a2 = new Image(WIDTH,HEIGHT);
a2.src = "ROLLOVER IMAGE URL";

//you can add more as b,c,d,etc.}

//image swapping function:
function hiLite(imgDocID, imgObjName, comment) {
if (browserVer == 1) {
document.images[imgDocID].src = eval(imgObjName + ".src");
window.status = comment; return true;
}}
//end hiding -->
</script>

and then the code:

CODE

<img src="FIRST IMAGE URL" name="a" onMouseOver="hiLite('a','a2','opt title')" onMouseOut="hiLite('a','a1','opt title')">

Try looking on Dynamic Drive: http://www.dynamicdrive.com/dynamicindex15/domroll.htm

[Nikki09815]

Thanks so much.

That works even if I use imagemapping right?

[Melissa]

idk which one you're talking about, but if you're talking about the script I gave you, then yes, it does. You can tweak it a lot to fit your specifications.

[Insurmountable]

moved to webmasters corner.

[emmijane]

LOOKIE PEOPLE!!!

http://www.poqbum.com/roller/index.php