what's best for hover effect?

hello i'm wondering what do you experienced members think what is the best for creating hover effect, mainly to change a picture on mouse hover but to have a link on the image. can it be done with CSS or Javascript or something else?

 

All depends, how do you want to "change" the picture? Do you want to manipulate the picture directly? E.g move it, fade it, etc. If this is the case, JavaScript is your man.

 

You can do it with either CSS or JS, but CSS would be better.

Here are two examples in CSS:

<style type="text/css">
/* Method #1 */
.imageBox {
 width: Xpx;
 height: Ypx
}
a .imageBox {
 background-image: url(/images/image01.jpg)
}
a:hover .imageBox {
 background-image: url(/images/image02.jpg)
}
/* Method #2 */
.imageBox img {
 border: 0
}
.imageBox {
 background-image: url(/images/image02.jpg)
}
.imageBox a {
 display: block;
 width: Xpx;
 height: Ypx
}
.imageBox a:hover img {
 display: none
}
</style>

Code (markup):

<!-- Method #1 -->
<a href="#"><div class="imageBox"></div></a>
<!-- Method #2 -->
<div class="imageBox">
 <a href="#"><img alt="alt text" src="/images/image01.jpg" width="X" height="Y" /></a>
</div>

Code (markup):

 

CSS all day everyday unless you want some fancy transitions

 

I like menu images when you hover over it, there's a new color or underlined button

 

thanks for this, i was doing something similar but i gave up on that when i found out that IE 6 and earlier doesn't support these CSS effects, and a lot of people still uses IE 6.

 

check out the JS effect on my personal site and tell me if it's not ultra-cool
http://wysinnwyg.altervista.org

 

I opened a thread on this a few days ago and it seems that css wins every time. less code + works every time.

 

or just

<img src="image.gif" onmouseover="this.src='image_hover.gif'" onmouseout="this.src='image.gif'" />

HTML:

 

yes i've been using that, and @ Sean@WMS i tried your suggestions but the first in IE 6 changes the image and it stays like that, you have to refresh the page to see it properly again second didn't work that well at all, and yes i see that javascript is the safest bet for doing this, that IE should be banned or something.

 

If you want to use css menus in IE then you have to use these methods for it to work:

http://www.vision.to/single-image-sliding-doors-and-rollover.php

http://www.vision.to/single-image-three-state-rollover-buttons-matrix.php

 

Confounded IE 6, LOL!

Here's another:

<style type="text/css">
.imageBox {
 width: Xpx;
 height: Ypx;
 display: block;
 background-image: url(/images/image01.jpg)
}
.imageBox:hover {
 background-image: url(/images/image02.jpg)
}
</style>

Code (markup):

<a href="#" class="imageBox"></a>

Code (markup):

This works in IE 6 & 7, FF 2 & 3, Google Chrome, and Safari 3

 

This method above is foolproof and will work in any browser. Use it ^_^

 

.bidimage
{
  background-image:url(images/bid.gif);
  background-repeat:no-repeat;
  height:28px;
  width:62px;
  cursor:pointer;
}       

.loginimage
{
  background-image:url(images/login.gif);
  background-repeat:no-repeat;
  height:28px;
  width:62px;
  cursor:pointer;
}

Code (markup):

Since image is used as the background in div, the height and width should be defined and declared one pixel more than the background image.

Now, keep in the following division in the “index.html” inside the body tag.

<div class="bidimage"> </div>

Code (markup):

Now, define the script for the hover effect using jQuery inside the the “index.html” file.

<script>
$(document).ready(function()
{
  $("div.bidimage").mouseover(function ()
  {
    $(this).addClass("loginimage");
  });

  $("div.bidimage").mouseout(function ()
  {
    $(this).removeClass("loginimage");
  });
});
</script>

Code (markup):

 

^ why on earth would you use javascript for a task that CSS is more than capable of with :hover...

 

Because you have to set the image as a background on an empty div, and therefore you have to manually set the width and height of that div.

1. Some browsers may not be parsing that width/height parametre.
2. What if the image should be clickable?
3. It's strange to show an image "without showing it"

 

The image can still be clickable without javascript.. and the rest of that doesn't make a whole lot of sense.

Also, what about the people who have javascript turned off? I always try to use javascript where it will enhance things for those who have it on but make no difference to the site for those who have it off. Setting background images with javascript is a bad idea.

 

Serously . . . but if you're going to go JS, why so complicated about it? See:

Much more elegant JS solution.

 

How would you make it clickable without javascript using a W3 strict solution? Load a blank gif as 100%x100% inside the div?

And some browsers don't parse the width and height attribute, and scales the div by the content.

However, I don't see why you wouldn't use the javascript solution. It's more elegant and works better.
IF someone has disabled javascript in their browser, they shouldn't visit websites from the 21st century.
Come on.. I think that about 99% of ALL websites has some JS code.
Google apps, Facebook, Microsoft's website, Apple's website. EVERYONE.
If you haven't enabled it, you should understand that you don't get that much out of your browser.

Oh... And in my image code, I forgot to add an alt attribute

<img src="image.gif" onmouseover="this.src='image_hover.gif'" onmouseout="this.src='image.gif'" alt="" />

HTML:

 

Correction - they have non-destructive javascript on their sites. This is so that all their site functions can still be used without Javascript, they just look nicer with it. As was mentioned previously, a lot of schools and workplaces all have Javascript turned off and a lot of people turn it off for security reasons. Making a site inaccessible to people without Javascript turned on is pure ignorance and extremely bad practice in the web development world.