Is image mapping the best solution? - css

Question

I have an image that consists of 5 overlapping rectangles, all of which have its relevant heading on them and must link to its corresponding pages. I have tried uploading the image onto an online image mapping generator which automatically generates the code however, i can only alter the CSS and not the HTML. Would image mapping be the best solution for my problem? or is there any alternative methods i could use which doesn't involve modifying the HTML?
This is my image:
HTML:
<div style="text-align:center; width:406px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_3201310160406077" src="http://www.image-maps.com/uploaded_files/3201310160406077_home_image.png" usemap="#Image-Maps_3201310160406077" border="0" width="406" height="406" alt="" />
<map id="_Image-Maps_3201310160406077" name="Image-Maps_3201310160406077">
<area shape="rect" coords="72,3,192,43" href="#" alt="" title="" />
<area shape="rect" coords="326,75,401,115" href="#" alt="" title="" />
<area shape="rect" coords="4,290,118,330" href="#" alt="" title="" />
<area shape="rect" coords="241,361,332,401" href="#" alt="" title="" />
<area shape="rect" coords="158,180,249,220" href="#" alt="" title="" />
<area shape="rect" coords="404,404,406,406" href="http://www.image-maps.com/index.php?aff=mapped_users_3201310160406077" alt="Image Map" title="Image Map" />
CSS:
dl.image_map {display:block; width:406px; height:406px; background:url(http://www.image-maps.com/uploaded_files/3201310160406077_home_image.png); position:relative; margin:2px auto 2px auto;}
a.LINK0 {left:72px; top:3px; background:transparent;}
a.LINK0 {display:block; width:122px; height:0; padding-top:42px; overflow:hidden; position:absolute;}
a.LINK0:hover {background:transparent; border:1px dashed black; color:black;}
a.LINK1 {left:326px; top:75px; background:transparent;}
a.LINK1 {display:block; width:77px; height:0; padding-top:42px; overflow:hidden; position:absolute;}
a.LINK1:hover {background:transparent; border:1px dashed black; color:black;}
a.LINK2 {left:4px; top:290px; background:transparent;}
a.LINK2 {display:block; width:116px; height:0; padding-top:42px; overflow:hidden; position:absolute;}
a.LINK2:hover {background:transparent; border:1px dashed black; color:black;}
a.LINK3 {left:241px; top:361px; background:transparent;}
a.LINK3 {display:block; width:93px; height:0; padding-top:42px; overflow:hidden; position:absolute;}
a.LINK3:hover {background:transparent; border:1px dashed black; color:black;}
a.LINK4 {left:158px; top:180px; background:transparent;}
a.LINK4 {display:block; width:93px; height:0; padding-top:42px; overflow:hidden; position:absolute;}
a.LINK4:hover {background:transparent; border:1px dashed black; color:black;}

Answer 1

You can do this with full HTML/CSS if you want, playing with position: absolute, z-index and display: table-cell;
nav {
position: relative;
font-family: Arial;
font-size: 14px;
margin: 20px;
}
nav a {
position: absolute;
top: 0; left: 0;
padding: 10px;
border-radius: 5px;
color: #222;
background: #333;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
text-decoration: underline;
}
nav a span {
display: table-cell;
width: 145px; height: 145px;
}
.link-home {
top: 115px; left: 115px;
color: white;
line-height: 145px;
font-size: 24px;
background: #C1272C;
box-shadow: 0 0 10px 0 #333;
z-index: 5;
}
.link-printed-digital-media {
top: 0; left: 65px;
background: rgba(50, 50, 50, .8);
z-index: 4;
}
.link-file-sharing {
top: 70px; left: 185px;
background: rgba(50, 50, 50, .6);
z-index: 3;
}
.link-external-links {
top: 185px; left: 165px;
background: rgba(50, 50, 50, .4);
z-index: 2;
}
.link-stock-management {
top: 165px; left: 0;
background: rgba(50, 50, 50, .2);
z-index: 1;
}
/* size */
.link-printed-digital-media span,
.link-external-links span {
height: 200px;
}
.link-file-sharing span,
.link-stock-management span {
width: 200px;
}
/* align */
.link-home span {
text-align: center;
}
.link-file-sharing span,
.link-external-links span {
text-align: right;
}
.link-external-links span,
.link-stock-management span {
vertical-align: bottom;
}
<nav>
<a href="#" class="link-home">
<span>Home</span>
</a>
<a href="#" class="link-printed-digital-media">
<span>Printed &<br>Digital Media</span>
</a>
<a href="#" class="link-file-sharing">
<span>File<br>Sharing</span>
</a>
<a href="#" class="link-external-links">
<span>External<br>Links</span>
</a>
<a href="#" class="link-stock-management">
<span>Stock<br>Management</span>
</a>
</nav>
Please note <span> are required, as you cannot combine table-cell and absolute positioning on the same element.

Answer 2

If you stack the html elements using a z-index (in CSS) with the right size on the right position, and add hyperlinks with images to it, it should work correctly right?
Check out this example to see how it could work.
<html>
<head>
<style>
/* setup container */
.nav-wrapper
{
position:relative;
width:500px;
height:500px;
background:#f0f0f0;
}
/* on each item */
a.nav-item
{
position:absolute;
width:200px;
height:200px;
}
/* per specific item, note the position and the z-index */
.home {
left: 120;
top: 135;
z-index:5; /*on top*/
background:rgba(250,50,50,.9);
}
.print {
left:80;
top: 30;
z-index:1; /*on bottom*/
background:rgba(60,60,60,.5);
}
.fileshare {
left: 40;
top: 180;
z-index:2;
background:rgba(50,50,50,.5);
}
.stock {
left: 235;
top: 220;
z-index:3;
background:rgba(70,70,70,.5);
}
.links {
left: 240;
top: 50;
z-index:4;
background:rgba(80,80,80,.5);
}
/* for example only */
.nav-item img
{
width:200px;
height:200px;
}
</style>
</head>
<body>
<div class="link-wrapper">
<!-- items over here. note the classes -->
<a href="print.html" class="nav-item print">
<img src="print.png" alt="print" />
</a>
<a href="fileshare.html" class="nav-item fileshare">
<img src="fileshare.png" alt="fileshare" />
</a>
<a href="home.html" class="nav-item home">
<img src="home.png" alt="home"/>
</a>
<a href="stock.html" class="nav-item stock">
<img src="stock.png" alt="stock" />
</a>
<a href="links.html" class="nav-item links">
<img src="links.png" alt="links" />
</a>
</div>
</body>
</html>