There are literally thousand ways to do image rollovers with CSS and javascript for your web page. Personally I do not like image roll overs for links and navigations. They offer little to the functionality or look of the page. Instead use CSS to get a hover effect. But anyway, let me show you a very easy way to do image rollovers with javascript first.
The HTML for any image on your web page is like below as we all know:
<img src="image.jpg" name="idname" border=0>
In the above the tag is little different from usual though. Here we have a name associated with the image that is really usefull for our purpose, with the name we are declaring the IMG tag as an object and any browser can find it easy.
Then you have to change that image in a link with a OnMouseOver and OnMouseOut.
Normally links are declared like this:
<a href="#"> anchor text<a/>
Let us make it roll now. Make an image as a link, and in the link put this code.
<a haref="# OnMouseOver="idname.src='image1.jpg'" OnMouseOut="idname.src='image2.jpg'"><img src="image.jpg" name="thumb" border=0></a>
And you are done.
This is the explanation of this little code.
href="#" means that your link is a blank link but you can write any link you need.
OnMouseOver this is a behavior of your link, when you pass your mouse over the link it's going to change the scr of mytext object image with thumbnail_text_over.jpg.
OnMouseOut this restore your image before you roll over your mouse.
With CSS you can achieve the same image rollover effect like this:
| Code: |
#menu a {
...
background: url("button.gif") top left no-repeat;
}
#menu a:hover {
...
background-image: url("button-over.gif");
}
#menu a:active {
...
background-image: url("button-active.gif");
} |
But as I said, I do not like image roll over effects for web site. Instead look at how we used a roll over hover effect on quantumcloud site. The CSS code for achieving such effects are posted below. This does not increase the page size and goes smoothly.
| Code: |
a:link{ color: #cc6600;
border-width: 1px;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-bottom: 1px;
border-color: #cccccc;
border-style: solid;
margin-left: 5px;
margin-right: 5px;
margin-top: 1px;
margin-bottom: 1px;
FONT-SIZE: 10pt;
FONT-FAMILY: times new roman;
letter-spacing: 0.00em;
font-weight: normal;
font-style: normal;
text-decoration: none}
a:visited{color: #cc6600;
FONT-SIZE: 10pt;
FONT-FAMILY: times new roman;
letter-spacing: 0.00em;
margin-left: 5px;
margin-right: 5px;
margin-top: 1px;
margin-bottom: 1px;
border-width: 1px;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-bottom: 1px;
border-color: #cccccc;
border-style: solid;
font-weight: normal;
font-style: normal;
text-decoration: none}
a:hover{color: #000000;
border-width: 1px;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-bottom: 1px;
border-color: #cc6600;
border-style: solid;
margin-left: 5px;
margin-right: 5px;
margin-top: 1px;
margin-bottom: 1px;
FONT-SIZE: 10pt;
FONT-FAMILY: times new roman;
letter-spacing: 0.00em;
font-weight: normal;
font-style: normal;
text-decoration: none} |
The above looks very much like an image rollover, yet it's only text, and thus, loads very quickly!
_________________
Dust fills my eyes / Clouds roll by / and I roll with them / Centuries cry / Orders fly / and I fall again
Afford best design, implement best solution. Outsource your web design.
Last edited by quantum on Mon Oct 18, 04 9:24 pm; edited 2 times in total
I think, I will take the CSS image rollover technique. It will work from the style sheet right? Nevermind, I shall be able to figure that part out myself. Thank you.