Rollover text and an image pops up
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's HTML & CSS tutorial_files/littleegret.jpg" alt="Little Egret"></span></a>
-----------------------------------------------------
Any assistance will be greatly appreciated. Thank you very much.
AdChoices