Roll Over in x/HTML - Webmaster Forums - Webmaster forum for HTML, PHP, ASP, CSS and more

Talks_44 · 09-21-2007, 02:55 PM

Hey guys, I'm creating a website for my uncle for his car business.
I'm proud to say that I've managed to create the website using notePad ONLY (and a bit of Adobe Phtoshop for graphics obviously).
I've chosen to learn x/HTML and CSS instead of relying on Dreamweaver etc.

Anyways, my main question is: how do you give an image a roll-over effect without the use of javascript? Isn't there any x/HTML code that you type in, instead of rollOut and all that stuff?

Isn't there a code like: "

<a href="index.html" hover="rover_icon1.png"> </a>" or something similiar....

Thanks a lot!

blechler · 09-25-2007, 04:42 PM

Nope, if you want a roll-over effect, you are going to have to use JavaScript.

Talks_44 · 09-26-2007, 02:28 PM

Quote:

Originally Posted by blechler

Nope, if you want a roll-over effect, you are going to have to use JavaScript.

Thx budy fore sharing the opinion !!

dbc · 09-28-2007, 10:08 AM

Rollover effects are easily achieved using HTML and CSS. I do them all the time. They're lighter-weight, search engine friendly and a snap to do.

You can define background behaviours for the 4 pseudo classes using CSS.
They are:
:link
:visited
:hover
:active

Each can have a separate background defined. Presto up to a 4 state roll over effect if you want. Here's some code grabbed from my own business site.

Code:

#mainMenu div{
	float:right;
}
#mainMenu ul{
	float:right;
	margin:0 4em;
}
#mainMenu li{
	float: left;
	list-style:none;
	width:6em;
}
#mainMenu a{
	display: block;
	height: 40px;
	border-right: 1px solid #D1BF6A;
	padding: 5px 0;
	text-align:center;
}
#mainMenu a:hover{
	background: url(images/mainMenuHover.png) repeat-x;
	color: #7A525E;
}

There is some trickiness. MSIE 5 & 6, of course, only support pseudo classes on the A tag (e.g., a:hover). This means you'll need to assign them to your link tags. You'll also need to define the A tag's display property as block so that it will take on some dimension (height & width) in order to make your "button." Anchor tags, by definition, are in-line tags and have no height or width, so you need to change that with the display attribute in order to customize the dimensions of the link tag.

You can see an example of a 3-state version in action at this site.