How do I make images highlight on mouseover like text links?

Hiya! At my blog ( http://torley.com ) I did quite a bit of tweaking and am pretty happy. I got the textual hyperlinks to change color when I mouseover them, but when I hover the cursor over images, nothing happens. I’d like their borders to glow, at the very least — how’s this done? I’m sure I must be missing something very obvious but I can’t seem to find it offhand.

Hmmm — I just did things the normal way with CSS, no Javascript, but now I notice it makes *every* image of mine highlight when I hover the cursor over. Is there a way to make only actual linked images do this?

But the simplest method? Wrap an achor tag around the image with a hashmark (or blank space) for the href. Then apply the border to the image with CSS and have it change on hover. No scripts needed and it works in older IE versions.

Thank you also, doodlebee! Problem with having a specific class is the majority of my images are linked, and a minority aren’t.

It looks like :hover does work in IE 7.

Re:

“Wrap an achor tag around the image with a hashmark (or blank space) for the href. Then apply the border to the image with CSS and have it change on hover. No scripts needed and it works in older IE versions.”

I’m not exactly clear on how to do that, can you please give me an example?

I’m not exactly clear on how to do that, can you please give me an example?

<a href="#" class="different"><img src="image.gif" alt="image" /></a>

Pretty simple – just the same way you’d put an anchor link around anything. The hashmark mkes it so if anyone clicks on the image, they staty in the same spot – it doesn’t take them anywhere.

Problem with having a specific class is the majority of my images are linked, and a minority aren’t.

You can put the hover properties on the image in the stylesheet (thus ‘class=”different”‘). Anytime you want an image to appear with the hover differece, just add that class to it. If the image is already links, you can add the class to the one you want different – not a big deal. it won’t change any other styling you have on it, and if you *do* want the image to take you somewher,e you just replace the hashmark with the URL. CHances are, if the image in question that you want to change already has the link stuff – just add the class to it – nothing more needs ot be done (except to make your visual changes in the stylesheet).

Aha, gotcha! This makes a lot more sense to me. Your time helping me figure this out is really appreciated. I’m more used to working graphically than “in the code” but all this helps me to have a better understanding of what it is I need to do.

I learned a new term, too! I’ve not known “#” as “hashmark” before, only as “the pound key”. Hehe.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘How do I make images highlight on mouseover like text links?’ is closed to new replies.