3 Replies Latest reply on Nov 30, 2016 9:27 AM by Nancy OShea

    Rollover text and an image pops up

    richards22493971

      Hello folks, I am in need of a little assistance. I have to create a web page for work with a list of about 32 steps.

      What I am attempting to do is have an image appear when certain text are rolled over. I do not want the text to

      disappear they have to remain.

       

      I have seen  a great example on this web page:

       

      Hover popups - Wickham's HTML & CSS tutorial

       

      The section on that page where you can rollover the word "Home" and then the image of the bird appears is

      exactly what I need.

       

      I am creating a page with instructions, and it has about 32 steps.

       

      I have looked at the html and css code and their instructions and tried to reproduce it, but it is simply not working properly.

       

       

      THIS IS THEIR CODE:

      -----------------------------------------------------

      #tooltip1 { position: relative; }

       

       

      #tooltip1 a span {

      display: none;

      color: #FFFFFF;

      }

       

       

      #tooltip1 a:hover span {

      display: block;

      position: absolute;

      width: 200px;

      background: #aaa url(images/horses200x50.jpg);

      height: 50px;

      left: 100px;

      top: -10px;

      color: #FFFFFF;

      padding: 0 5px;

      }

       

      <div id="popup">

      <a href="http://www.wickham43.net/introduction.php">Home<span><img src="./Hover popups - Wickham&#39;s HTML &amp; CSS tutorial_files/littleegret.jpg" alt="Little Egret"></span></a>

       

      -----------------------------------------------------

       

      Any assistance will be greatly appreciated. Thank you very much.