Help - Search - Members - Calendar
Full Version: Can someone teach me how to do rollovers?
Forums > Resource Center > Webmasters' Corner > Resolved Topics
Nikki09815
May 11 2008, 09:37 AM
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
May 11 2008, 11:30 AM
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
May 11 2008, 11:59 AM
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
May 12 2008, 08:05 PM
Thanks so much.

That works even if I use imagemapping right?
Melissa
May 12 2008, 08:08 PM
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
May 12 2008, 08:50 PM
moved to webmasters corner.
emmijane
Jun 5 2008, 12:11 PM
LOOKIE PEOPLE!!!

http://www.poqbum.com/roller/index.php
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.