Search code examples
cssmousehover

Show a box with text when hovering an image


I'm new to website building, so I'm really struggling!

I have an image of a PCB board / main board, that I want to display the text of the component when a user hovers this. I have got the image where I want it on my webpage (it will probably be a single page, as it is a subdomain of my Joomla site).

What is the easiest way of doing this?

I thought of creating different css styles, i.e. U5 for component U5 and U6 etc, and when the user hovers over U5 on the pic, it will display the text "U5 does this and that". Is that possible? If it is, how can I do it?

I have the pic up through the index.php on the webspace, and have text that points into the css, but now i'm getting stuck!

Any help would be appreciated. Kind Regards, Matt


Solution

  • Not sure what you need exactly but one of the simplest solutions is to divide img as a map and add alt text to it so it's displayed when user hover over. See this example: http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/ here is w3schools tutorial: http://www.w3schools.com/tags/tag_area.asp

    or more advanced way is to display <DIV> elements instead of alt text