How do I add an image map link? - html

Question

I'm unsure if this is the correct approach, or even question, so I will elaborate.
Please visit this live page http://thedinnerparcel.co.uk/index.php?option=com_content&view=article&id=22&Itemid=3
I am basically asking if it is possible to overlay a link somewhere in the header div? Specifically over the sticker background image on the right?
I didn't build the site, but I have just added the sticker to the right corner of the header div. (FYI it's a Joomla site so uses a PHP template file.).
I did this as a background image and used some padding and negative margin to make it overflow, then I realised the sticker needs to link to their order page.
Would an image map be the best way to make this into a link? Or is there a better method?
If an image map is the way has anyone got a code example.
I've tried the below code, which I edited from a tutorial on a similar subject, this doesn't work
<div id="header" usemap="#Image-Maps_2201202140621298">
<map id="Image-Maps_2201202140621298" name="Image-Maps_2201202140621298">
<area shape="rect" coords="0,0,275,44" href="#" alt="Dinner Parcel" title="Dinner Parcel"/>
</map>
</div>

Answer 1

Paste the following code as is and it will work for you
Append a <a> to the end of your header div:
<div id="header">
<div...
<div id="menu">...
<a class="my-map" href="#"></a>
</div>
And then add the following styles:
#header{
position:relative;
}
.my-map{
width: 190px;
height: 190px;
display: block;
position: absolute;
bottom: 26px;
background: #EEE;
border-radius: 95px;
right: 2px;
}

Answer 2

I don't know how popular imagemaps are anymore :). You can position the element absolutely relative to the header with the following (for example). Codepen sketch: http://cdpn.io/klsEp
HTML
<div class='header'>
<a class='sticker'>Click me</a>
</div>
CSS
Consider this simple example.
.header {
background: green;
height: 200px;
position: relative;
width: 800px;
}
.sticker {
background: red url('..') no-repeat center;
bottom: -20px;
color: white;
cursor: pointer;
display: block;
height: 100px;
position: absolute;
right: -30px;
width: 100px;
}
.sticker:hover {
background: black;
}

Answer 3

In your HTML, I cannot find the link to menu_bg6.png, but that is where you must put the usemap= tag, as in:
<img src="menu_bg6.png" alt="an image" usemap="#usethismap">
So, not on the DIV tag, but on the IMG tag.
Then you can create a corresponding <map> tag and it should work for you (although, don't forget to insert a URL for the click to action - currently yours is '#').
Here is a simple jsFiddle with more ideas for positioning clickable areas over an image.
Here is an article that discusses how to create pseudo "image maps" for DIVs - without an IMG tag.