• 0

[HTML] Display text when mousing over image map


Question

I have a collage that I want to have display text depending on which part of the collage it is over. I was planning on making an image map of the collage, but I can only find tutorials that show me how to make each part of the image map a hyperlink. How do I make it so that each just displays text?

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

This is pretty easy to accomplish if you have a good understanding of js or a library like jQuery.

sample html markup...

<div class="map">
	<img class="bfmap" src="images/collage.jpg" width="400" height="400" alt="Butterflies" usemap="#butterflymap" />
	<span>Butterfly 1</span>
	<span>Butterfly 2</span>
	<span>Butterfly 3</span>
	<span>Butterfly 4</span>
</div>

<map id="bfmap" name="butterflymap">
	<area id="ar1" shape="rect" coords="0, 0, 200, 200" href="#" alt="Butterfly 1" />
	<area id="ar2" shape="rect" coords="200, 0, 400, 200" href="#" alt="Butterfly 2" />
	<area id="ar3" shape="rect" coords="0, 200, 200, 400" href="#" alt="Butterfly 3" />
	<area id="ar4" shape="rect" coords="200, 200, 400, 400" href="#" alt="Butterfly 4" />
</map>

Style the tool tips as necessary and hide them using js. The when the areas are hovered upon pick the corresponding span tag and show it. The advantage of using image maps is that you can customize the area you want active in many shapes unlike css tooltips where the areas are rectangles only.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.