How do I change images on mouseover?

[nchipping]

I have been working on the website: http://www.knowonder.com/index.php and I need to figure something out that should be fairly simple, but I think I’m just overcomplicating it in my mind…

Anyway, when someone mouses over the buttons on the right side of the page:

[img]http://www.knowonder.com/images/help/Picture%201.png[/img]

They are supposed to first be about 1/2 slices of the current images, and then when someone mouses over on one of them, I want that one to slide out with the full image.

Just for reference and example, this is what the green one would look like before being moused over:

[img]http://www.knowonder.com/images/green_slice.png[/img]

Anyway, please give me any suggestions you can – I really need to figure this out. Thanks!

[Rob MacKay]

Code:

yup – you are making it too complicated :D

basically what you should do is assign the image in CSS to the background of a HTML element. For example:

Click me

Then style it like this…

Code:

#myhover {
width: 20px; /*width of the image */
height: 20px; /* height of the image */
background:url(background/image/url.jpg) no-repeat;
}

THEN you use the hover pseudo

Code:

#myhover:hover {
background:url(background/image/url2.jpg) no-repeat;
}

Now when you hover over the div with id of #myhover its background will change…

You should really use sprites if you are going to do something like this to make sure the image loads cleanly and fast. But thats another topic…

On another note you positioning on your site is not good dude, you are using margin to position elements…. have a look here for a tut I wrote on the subject.

http://alteredaspect.info/the-art-of-css-positioning/

Hope that helps – ask away with the questions :D

[nchipping]

That was ALMOST an amazingly simple and effective answer :) I did what you said, except I don’t know how to put the <div> around basically nothing. In other words, I don’t want the div around a word or something – I just want a regular image there and then for the <div> to make the other image pop out – make sense?

Otherwise, I am in the middle of reading your article – I obviously have a ton to learn so any mistakes you ever see in my code, let me know where I can learn better if you have resources – thanks!

[nchipping]

I still need to finish reading the article, but I"m posting again just to check back on something – the first images are showing up now, but the alignment is very off (the pink is on the bottom of the page area now), but when I mouse over them, nothing happens, even if I put writing within them. Any help please?

[Rob MacKay]

lookin great there as far as I can see! Much better.

Few things :D

The menu at the right – instead of putting the divs inside the a tag, put the a tags inside the divs :) Then if you style the a links like this…

#art-dizzle-page-pink a {
display:block;
width:100%
}

it should make the whole area inside the div "clickable".

Its basically to stick to web standards which say you can’t put a block element (<div>) inside an inline element (<a>) :D

[Author]

Posts