create hyperlink on part of image - html

Question

I have a background image in my footer that has a number of different images inside it. I want to create links to the respective websites of each of the images using html or css but I don't know how. I was told that it can be done in this way though. Is this possible, or am i going to need to split the image into multiple ones?

Answer 1

You can use the HTML Map tag
An example would be:
<img src="GJ7SG.png" alt="" usemap="#map" />
<map name="map">
<area shape="rect" coords="788, 2, 867, 37" alt="Sun" href="someurl.htm"/>
<area shape="rect" coords="608, 1, 719, 37" alt="Sun" href="anotherurl.htm" />
<area shape="rect" coords="374, 0, 501, 39" />
<area shape="rect" coords="168, 0, 312, 38" />
<area shape="rect" coords="1, 7, 87, 39" />
</map>
You will have to do some playing around to get it how you want but that should get you started.
Add the href to each rectangle. You can generate the map here:
https://developer.cdn.mozilla.net/media/uploads/demos/s/u/summerstyle/365ccfd644f2b008c33f0046d2ba1a8f/summer-html-image-ma_1355318513_demo_package/index.html

Answer 2

Try using a HTML Image Map:
<img src="img" usemap="#mymap" />
<map name="mymap">
<area shape="rect" coords="0,0,200,300" href="linkurl" title="sometitle" alt="Hovertext" />
...
</map>
You maybe have to add the image to the foreground for it to work