[sho88]

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!
Sho

This post has been edited by sho88: 05 January 2007 - 05:33 AM

[James Mitchell]

Not specifically through xHTML, but through CSS it is extremely easy (after you learn the technique).

You simply create either one image or multiple (depending on the technique you choose to use) and "slide" it in and out of place.

Here are a few places you can use to learn the techniques (or at least the two popular ones):

• A List Apart: Sliding Doors
  
• Navigation Matrix

Now have fun !

This post has been edited by JPMitchell: 05 January 2007 - 08:30 AM

[marcamos]

The sliding doors technique that James mentioned is absolutely the most seamless and smooth, and many top notch developers use it.

It isn't alone though, there are other techniques for swapping an image on hover, and here is another one:

I'll assume that you'll know how to change the below CSS to match your needs, class/ID names, etc.

a.navLink { /* the background image below will appear when no hover action is made */
background: url(path/to/regular-image.gif) no-repeat left top;
}

a.navLink:hover { /* the background image below will appear when a hover action is made */
background: url(path/to/hover-image.gif) no-repeat left top;
}

There are other style rules you'll have to create most likely, such as padding for those anchors, and potentially making them "display: block", but aside from the above code, it's all experimentation based on your design.

Regardless of which method you utilize, keep us in tune to how it is going and we'll all be glad to help with any more questions!

[James Mitchell]

Correct me if I am wrong Marc, but with that method or just a straight up a:hover don't you get the flicker (in IE6)?

[TJSingleton]

Just to stir things up. Should javascript or css be used for rollovers?

[marcamos]

JPMitchell, on Jan 5 2007, 08:55 AM, said:

Correct me if I am wrong Marc, but with that method or just a straight up a:hover don't you get the flicker (in IE6)?

Oh I'm sure it does, and I might even bet in IE7 too.

IE =

[James Mitchell]

TJSingleton, on Jan 5 2007, 12:23 PM, said:

Just to stir things up. Should javascript or css be used for rollovers?

Personally, I don't think there is a "should be" answer. More a preference, maybe?

[Catalyst]

I think it's preference. I use javascript for my rollsovers due to the IE flicker. Some people don't find that a big issue and use CSS.

[TJSingleton]

Is rollover presentation or behavior?

[sho88]

herkalees, on Jan 5 2007, 05:53 PM, said:

Oh I'm sure it does, and I might even bet in IE7 too.

IE =

HAHA!

Opera and Mozilla Firefox Rocks!

[marcamos]

TJSingleton, on Jan 5 2007, 02:58 PM, said:

Is rollover presentation or behavior?

I'm sure this is quite debatable, so here I go:

I believe it is presentation, just as the text-underline is when hovering over a text link. But, I'm very open to be convinced otherwise!

[Ben Abrams]

herkalees, on Jan 5 2007, 09:04 PM, said:

I'm sure this is quite debatable, so here I go:

I believe it is presentation, just as the text-underline is when hovering over a text link. But, I'm very open to be convinced otherwise!

i agree. The rollover is not essential, it wont matter if it didnt work at all. now, if on rolling over a menu popped out, then, thats behavior, its required by the navigation to browse the site.


balance between aesthetics and requirements

[moojoo]

To eliminate the flicker in IE you use a single image with the two or 3 states you need and CSS to control them.

I.e

Normal 0px 0px
Hover 0px -100px

whatever...

[James Mitchell]

moojoo, on Jan 11 2007, 11:45 AM, said:

Normal 0px 0px
Hover 0px -100px

Ah yes the simple "sliding technique" - for a full tutorial on that check out here.

[BigMike Sidelka]

Also you can do

<a href="" onMouseOver="hover" onMouseOut="normal"></a>

[James Mitchell]

NewAge.Mike, on Jan 11 2007, 09:19 PM, said:

Also you can do

<a href="" onMouseOver="hover" onMouseOut="normal"></a>

Correct me but isn't that inline javascript?

[Ryan Fait]

Yes, that's JavaScript. While it works, it's not the best method. If someone has JavaScript disabled, it won't work. I'm also a fan of the separation of Content (XHTML), Presentation (CSS) and Behaviors (JavaScript). If you really need to use JavaScript for something, reference the link by an id and then handle the function in an external script.

[moojoo]

I like the CSS way, I have done 4 state buttons with it and its a rocking.

[marcamos]

moojoo, on Jan 12 2007, 09:26 AM, said:

...its a rocking.

I won't come a-knocking.

[moojoo]

http://www.newguyine...ples/css_hover/