I have placed 6 images on a page, each within a div class displayed inline. I have also given each of images an ID. I want to know the best way to have each image change to a different image on hover. I'm thinking I may be violating some rule of hover or something or just be using the wrong syntax. All ideas are welcome.
+1
A:
actually the easiest way is to forget the images all together. Set your div to be a block and have each div with an id:
<style>
div {display: block; height: 100px; width: 100px; float: left;}
#id {background: url("first_image_url.jpg");}
#id:hover {background: url("second_image_url.jpg");}
</style>
this should be enough to get you moving in one direction with it. You may also wish to consider the use of JavaScript to perform roll overs but generally this is considered overkill given the simple background switch implementation.
Gabriel
2010-09-27 01:11:16
Would it be better just to use onmouseover and onmouseout?
Dan
2010-09-27 01:18:27
@Dan How? You prefer a bunch of javascript code instead of few simple styles? :) Gabriel's suggestion is probably as clear as it can get. (although it has some drawbacks, like fixed image size).
Nikita Rybak
2010-09-27 01:25:59
@Dan your original post indicated an interest in css, hover and img as the tag parameters. If you wish to modify the tags to include javascript or jquery I would be happy to include the description of those processes.
Gabriel
2010-09-27 03:29:20