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 & CSS tutorial_files/littleegret.jpg" alt="Little Egret"></span></a>

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

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

[Nancy OShea · Accepted solution]

That's a very old school approach.  It was fine for mouse users but it does not work with touch screens so it's outdated.  These days, it's better for usability reasons to use an onClick event trigger that opens and stays open on all devices.

If you use Bootstrap layouts, you will find relevant tooltip, popover or data-collapse tutorials online.

Bootstrap Tooltip

Bootstrap Popover

Bootstrap JS Collapse Reference

Nancy

[richards22493971]

Nancy, I do appreciate your assistance, and I did check those links that you recommended.

I did not see what I am looking for at the W3Schools site. I had already check the site before.

I am not concerned about how dated the technique is.

The site that I am building will be on our work intranet, and only for employees using desktop

computers.

The example that I showed is exactly what I would like. I just need to be able to hover over

the specified link and then have the image pop up.

Since, it is a dated technique can you give me some instructions on how to accomplish it in

that manner. Thank you again.

[Nancy OShea]

Do a search for CSS disjointed rollovers.  There may still be a few tuts floating around.  Although I took all of mine down because I don't think people should use them anymore.

Good luck!

Nancy