How can I get a mouseover to work for an image inside a table on a static page?

  • I hate it when I’m the one asking questions!!!

    Anyway…
    I’m at a loss. I’m setting up an alumni site for my graduating class at
    https://www.phs90.com
    One of the things which I’m working on is a class roster. Here’s the link to one of those pages:
    https://www.phs90.com/index.php/class-roster/

    The class roster pages were made using the default template. For the Page Content I’m using one big table.
    I’m two thirds of the way getting this to what I have envisioned:
    1. Nonmembers of phs90.com have their image displayed in black and white.
    2. When someone signs up I’ll change their image to a colorized version.
    3. And this is where I’m stuck – I’d like to be able to mouseover the colorized pictures to show a current image…. Kind of like a before and after. However when I put the mouseover code into the table it’s stripped out by WP… How can this be acomplished?

    Thanks!

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

  • One way to do this is with CSS. The easiest way I’ve found to do it is to make create 1 div the size of 1 image, but put your two images together in one. Have the a:hover shift the image up or down the number of pixels your first image is tall.

    This is how I did a mouseover like that on one of my old sites.:

    div#header, div#header a {
    position: fixed;
    top: 0px; left: 0px;
    background: url(/path/to/image.png) top left no-repeat;
    width: 150px;
    height: 35px;
    margin: 0px;
    padding: 0px;
    display: block;
    }
    div#header a:hover { background: url(/path/to/image.png) 0 -35px no-repeat; }
    div#header span, div#header a:hover span { display: none; }

    in the html:

    <div id="header">
    <a href="#" title="mysite"><span>&nbsp;</span></a>
    </div>

    Thread Starter jetshack

    (@jetshack)

    I’d tried something similar to that earlier, but without result…
    when I tried the above WP coverts this

    <div id="header">
    <a href="#" title="mysite"><span>&nbsp;</span></a>
    </div>

    into

    <div><a title="mysite" href="https://www.phs90.com/wp-admin/#"></a></div>

    how do I get WP to keep the id in the div tag?

    I’m not sure. I would think it would keep the id tag, but I don’t know what WP strips out and adds in other than closing single tags such as img.

    Thread Starter jetshack

    (@jetshack)

    That’s what I would have thought too…

    I’m going to continue to fart with it for a while, but I seriouslly think I’m at a loss… I’ve tried 3 different ways with CSS and 15 trillion javascripts… Yours is the closest to working though… I’m going to try yours once more just to make sure I didn’t screw up something in the implementation…

    I mean it’s not like it’s mission critical, but I think would be a neat gee whiz sort of thing for those that took the time to mess around…

    Thread Starter jetshack

    (@jetshack)

    I still couldn’t get this to work… so

    BUMP…

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How can I get a mouseover to work for an image inside a table on a static page?’ is closed to new replies.