Show a box with text when hovering an image


Tags: css,mousehover

Problem :

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


    CSS Howto..

    How to create offer tag with css and pass value to it

    How to apply a sifr rule to a hyperlink and also its a.active counterpart

    How to remove string that dosn't have an html tag using CSS

    Showing divs in th on the same line

    How to apply a CSS property to an element using it's CSS path in Javascript?

    CSS: How to define spacing between responsive columns

    How to make a transparent overlay on image [duplicate]

    How to make an item to appear for a short time (Either Javascript or CSS) [closed]

    How does gmail preserve copy and pasted web content, maintaining the attached CSS?

    How to align two different font-sizes next to each other?

    How to make video responsive for all the screen sizes?

    How to pause css animation?

    How to close the menu after click third layer menu item

    How to create a circle with divided borders in CSS and Javascript?

    How to center a div being focused? [vertically]

    How to display 20 columns in html design

    How do I wrap a long string in a fixed-width container with CSS?

    How to change css rules of external stylesheet [duplicate]

    DotNetNuke Skinning: How do I use\add skin.css?

    How can I use CSS transitions to animate a responsive layout's vertical orientation?

    CSS: How to align table data

    how to put all labels in bold with css

    CSS: Changing div's property on another div's a:hover. Possible ? How?

    How to vertical align icon inside label and button in the same way

    How to create generic CSS class with input parameter

    How to vertically center dynamically 1 or 2 lines of text with CSS? [duplicate]

    Toggle radio button on javascript hide/show of div

    How to horizontally align a list of contacts?

    How to make hover dynamic in CSS?

    CSS Matrix - how to achieve percentage translation