make linkable image portion with a div?

Question

how is possible to link a little part of the image like here :

http://www.ceciliabotta.com/index.html ?

Inspecting the element I see that there are some coordinates expressed. Is this the way to do it? I tried to create a div on top of the background image, but it doesn't seem to work at all and so I got stucked.

@user2834426 Check the answer below and if it helpfull please accept — Dinesh Kanivu, Oct 03 '13 at 11:48

score 0 · Answer 1 · answered Oct 03 '13 at 11:48

0

Use Map Area

<img src="name.png" width="140" height="140" border="0" usemap="#Map" />

<map name="Map" id="Map">
  <area shape="rect" coords="77,18,123,81" href="#" />
</map>

answered Oct 03 '13 at 11:48

Dinesh Kanivu

2,551
1
23
55

score 0 · Accepted Answer · edited May 23 '17 at 12:21

Use map area concept.

take three images. 1)original image 2)hover image of input(i.e the full whole image with only input in black letters i.e in hovered state)
3)hover image of video 4)hover image of press

<img id="originalimage" src="originalimage.png" width="140" height="140" border="0" usemap="#Map" />   

<map name="Map" id="Map">
  <area shape="rect" coords="77,18,123,81" href="#" onmouseover="onHover('inputhoverimagesrc.png')" onmouseout="onout6('originalimagesrc.png')" />
  <area shape="rect" coords="77,18,127,90" href="#" onmouseover="onHover('videohoverimagesrc.png')" onmouseout="onout6('originalimagesrc.png')"/>
  <area shape="rect" coords="77,18,125,100" href="#" onmouseover="onHover('presshoverimagesrc.png')" onmouseout="onout6('originalimagesrc.png')"/>
</map>


<script>


function onHover6(image1)
{
document.getElementById('originalimage').src=image1;
} 
function onout6(image2)
{ 
document.getElementById('originalimage').src=image2; 
} 
</script>

Here when you hover on the co-ordinates, the image changes to hoverimages and on mouseout it changes to original image.

You can refer the below link on how to get the co-ordinates of the area.

How to get the image co-ordinates?.

or refer this below stackoverflow question

score 0 · Answer 3 · edited Dec 26 '13 at 04:35

This sample shows the clickable image....

<div>click on the center of the image:
<br />
<br />
<img src="http://radiantq.com/wp-content/uploads/2011/11/software_box.png" width="500px" height="500px" usemap="#map1" alt="imagemap" />
<map id="map1" name="map1">
    <area shape="rect" coords="0 140 200 200" onclick="alert('you clicked me!')" alt="drag" />
    <area shape="rect" coords="11 319 200 200" onclick="alert('you clicked me!')" alt="drag" />
</map>
</div>

for demo:JSFIDDLE

make linkable image portion with a div?

3 Answers3