Making part of an image clickable

Question

I have a background image applied this way

HTML

<div id="background">
    <img src="stock.png" class="stretch" alt="image" />
</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}

I want to have a part of an area of the image clickable, so that it will link me to the next page, any simple ways of doing this?

Possible duplicate of [How to make a section of an image a clickable link](http://stackoverflow.com/questions/18560097/how-to-make-a-section-of-an-image-a-clickable-link) — Makyen, Feb 07 '17 at 00:50

faino · Accepted Answer · 2013-03-20T22:29:02.637

3

You could always make a link relative and z-index it to the proper position:

<div id="background">
    <img src="stock.png" class="stretch" alt="image" />
    <a href="path/to/url/" class="link"></a>
</div>

Then something like:

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}
.stretch {
    width:100%;
    height:100%;
    z-index:1;
}
.link {
    width:200px;
    height:200px;
    position:absolute;
    top:50%;
    left:50%;
    display:block;
    z-index:2;
}

Then move and style the link as you will with CSS and/or image(s).

edited Mar 20 '13 at 22:29

answered Mar 20 '13 at 22:14

faino

3,194
15
17

Tried this but it's not overlaying the image, just creates a link at the bottom – Aaron Mar 20 '13 at 22:22
Yes, that was untested, my apologies; there was a typo in the positioning of the link. I have updated the code and it works fine on my end. Sorry about that. – faino Mar 20 '13 at 22:29
Works perfectly, Thank you my man Can you just explain what the z-index did there? – Aaron Mar 20 '13 at 22:35
Just used the `z-index` to stack the elements on top of each other, to make sure the image was in front of the `div` and the link in front of everything. [Here's some more information on using z-index.](http://www.w3.org/wiki/CSS/Properties/z-index) – faino Mar 20 '13 at 23:03

score 1 · Answer 2 · answered Mar 20 '13 at 22:10

1

Well add another div with position: absolute; and then define his position with this

left:100px;
top:100px;

answered Mar 20 '13 at 22:10

Kyrbi

2,212
7
25
42

Won't that change it's position when viewed under different resolutions? – Aaron Mar 20 '13 at 22:11
Well then define it with percents. – Kyrbi Mar 20 '13 at 22:15

score 1 · Answer 3 · answered Jul 24 '14 at 17:42

I know this is an old question but in my opinion the simplest and best way to do this would be with an image map. They're pretty straight forward, basically you can define clickable shapes on an image (rectangles, circles, and even polygonal shapes but I've never used those). The coordinates and sizes of the shapes are all relative to the image so it is very flexible.

http://www.w3schools.com/tags/tag_map.asp explains how to use it.

Making part of an image clickable

3 Answers3

Linked