WordPress.org

Ready to get started?Download WordPress

Forums

How do I make images highlight on mouseover like text links? (10 posts)

  1. Torley
    Member
    Posted 7 years ago #

    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.

    Thanx in advance!

  2. whooami
    Member
    Posted 7 years ago #

    img:hover {
    blah blah blah ...
    }

    or use whatever class you have for those particular images.

    Or use javascript. Ive used this before:
    http://www.codingforums.com/archive/index.php?t-41093.html

  3. Torley
    Member
    Posted 7 years ago #

    Aha, that sounds simpler than I thought it'd be. I'll give it a spin, thank you whooami!

  4. whooami
    Member
    Posted 7 years ago #

    your welcome, good luck :)

    the js trick is nice, Ive no clue how ff well handles it though, since I used it back before I actually made the switch. It does a really neat opacity thing.

  5. Torley
    Member
    Posted 7 years ago #

    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?

  6. Doodlebee
    Member
    Posted 7 years ago #

    :hover doesn't work in IE on anything but anchor links. At least, IE 6 and below, anyway - it supposedly works in IE7, but I haven't tried it yet :)

    You *could* use a javascript (I've used "whatever hover" script before: http://www.xs4all.nl/~peterned/csshover.html)

    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.

    Just my 2 cents (which is about what it's worth!) ;)

  7. Doodlebee
    Member
    Posted 7 years ago #

    Is there a way to make only actual linked images do this?

    add a class to the specific ones you want to change.

  8. Torley
    Member
    Posted 7 years ago #

    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?

  9. Doodlebee
    Member
    Posted 7 years ago #

    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).

  10. Torley
    Member
    Posted 7 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic