CODEWITHSUNDEEP
htmlcss
Colonel Mustard
Colonel Mustard

Reputation: 1533

create hyperlink on part of image

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? enter image description here

Upvotes: 0

Views: 432

Answers (2)

Friwi
Friwi

Reputation: 492

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

Upvotes: 0

ZeroBased_IX
ZeroBased_IX

Reputation: 2727

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

Upvotes: 2

Related Questions