CODEWITHSUNDEEP
javascriptjqueryhtmlcss
YejielIMP
YejielIMP

Reputation: 85

make hover effect on different parts of an image, not html but an img

Basically i have a "blueprint" for a building project,i need to make it so that when they hover on specific parts of the floor a short description pops out. something like this:enter image description here

Upvotes: 6

Views: 9768

Answers (3)

Robert Williams
Robert Williams

Reputation: 1410

This can also be done by assigning this image as background to a div of the same size. Then position anchor links at the exact positions where you want the hover effect. Add a hover tool-tip as given here and that's it. Everything can be done with pure css.

Upvotes: 1

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7161

try this one

<img src="map.jpg" width="100%" height="300px" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="50,50,10,10"  alt="building" title="building">
  <area shape="rect" coords="150,150,10,10"  alt="building + rooms" title="building + rooms">
</map>

set your coordinates in image which will you generate popup message

Upvotes: 0

Jose Gomez
Jose Gomez

Reputation: 628

You can use an Area Map. The syntax is as follows:

<map name="myMap">
  <area shape="rect" coords="0,0,10,20" href="somelink.html">
  <area shape="circle" coords="10,30,50,100" href="anotherlink.html">
</map>

You use the coords to define each area. You then can assign an ID to each area and make the hover items. Try it and let us know.

You can use an Image Map Generator online, there are plenty. I use this one: http://imagemap-generator.dariodomi.de/ It is much easier than doing it by your own.

Upvotes: 8

Related Questions