Help With Mouseovers

tommy19
tommy19

I feel kind of silly. I've been away from OP for a while and my CSS/HTML skills have gotten rustier than I thought...

What I am attempting to do is use HTML to create a mouseover of an image. Normally you see an image with a title over it. When you hover over it the image changes to a slightly different image giving you more information about that person/place/thing.

I would like to do this in HTML as I have multiple images I would like to use rather than a single instance to use over multiple pages.

Any help on this matter would be greatly appreciated. :)

Comments

  • Bortas
    Bortas
    Posts: 645 edited April 2017

    Are you referring to "alt text"? If so, actually the textile can handle this for you, if you want to save yourself the coding time.

    HTML:


    <img src="path/to/image" alt="Text you want to see when hovered">

    Textile: clicking on the "Image Embed" button, choose your image, then look at the code you see:


    [[File:### | &lt;style info&gt; | Text you want to display on hover]]

    hope that helps,

    -bort

    Post edited by Bortas on
  • tommy19
    tommy19
    Posts: 62

    That's not exactly what I'm looking for. I'm looking for a straight image swap. Normally you see image #1 but on mouseover you see image #2.

  • Bortas
    Bortas
    Posts: 645 edited April 2017

    Try this HTML:


    <a class="foo" href="#">
    <img src=http://lorempixel.com/400/200/food/1/>;
    <img src=http://lorempixel.com/400/200/food/2/>;
    </a>

    With this CSS:


    .foo img:last-child{display:none}
    .foo:hover img:first-child{display:none}
    .foo:hover img:last-child{display:inline-block}

    -bort 

    EDIT: no semicolons in the HTML, I'm not sure why this message board forces it.
    Post edited by Bortas on
  • tommy19
    tommy19
    Posts: 62

    THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! 

    That worked perfectly!

    P.S. THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! 

Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions