Menu
I have a picture that needs to be split into 4, and each part must have a link. Do people still use image hotspots?
540
I am assuming you are talking about client side image maps.
They are still being used and are part of HTML 4.01 and XHTML 1.1, and also in the current HTML 5 draft.
They are simple to use and are supported by all browsers and as such are a good way to have "hot spots" on a single image. I can't think of a single better alternative (ease of use, browser support, accessibility, being part of the HTML spec) that will give you this functionality.
Whether having such "hot spots" on a single image is advisable (discoverability by the user being the main issue), is a different question.
53
Using images as links is lame in my opinion; it can hurt accessibility, and depending on the image used, can result in Mystery Meat Navigation, which is lame.
Instead, I'd make that image a background image.
<div id="image-hotspot">
<a href="#small-planets">Small Planets</a>
<a href="#big-planets">Big Planets</a>
<a href="#the-sun">The Sun</a>
</div>
#image-hotspot {
background:url(http://onlyfunnyjokes.com/bestoftheweb/wp-uploads/earth_planets_size_comparison.jpg);
height:650px;
width:385px;
}
#image-hotspot a {
display:block;
text-indent:-10000px; /* you could also change the opacity instead*/
/* as a matter of fact I suggest using the opacity technique */
/* the text-indent has caused me troubles in the iPad browser */
height:216px;
}
You might need to use more advanced CSS positioning to make sure those anchor elements <a> are where you need them to be.
Here's another example which should seem more relevant:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title >Test</title>
<style type="text/css">
#image-hotspot {
background:url(http://upload.wikimedia.org/wikipedia/commons/c/c4/Planets2008.jpg);
height:720px;
width:1280px;
position:relative;
top:0px;
left:0px;
}
#image-hotspot a#the-sun {
display:block;
text-indent:-10000px;
height:720px;
width:200px;
position:absolute;
left:0px;
top:0px;
}
#image-hotspot a#mercury {
display:block;
text-indent:-10000px;
height:25px;
width:25px;
position:absolute;
left:225px;
top:275px;
}
#image-hotspot a#venus {
display:block;
text-indent:-10000px;
height:75px;
width:40px;
position:absolute;
left:265px;
top:250px;
}
#image-hotspot a#earth {
display:block;
text-indent:-10000px;
height:75px;
width:45px;
position:absolute;
left:325px;
top:250px;
}
#image-hotspot a#mars {
display:block;
text-indent:-10000px;
height:75px;
width:45px;
position:absolute;
left:383px;
top:250px;
}
#image-hotspot a#jupiter {
display:block;
text-indent:-10000px;
height:125px;
width:135px;
position:absolute;
left:450px;
top:225px;
}
#image-hotspot a#saturn {
display:block;
text-indent:-10000px;
height:125px;
width:195px;
position:absolute;
left:610px;
top:225px;
}
#image-hotspot a#uranus {
display:block;
text-indent:-10000px;
height:75px;
width:60px;
position:absolute;
left:805px;
top:250px;
}
#image-hotspot a#neptune {
display:block;
text-indent:-10000px;
height:75px;
width:60px;
position:absolute;
left:887px;
top:250px;
}
</style>
</head>
<body>
<div id="image-hotspot">
<a id="the-sun" href="#the-sun">the sun</a>
<a id="mercury" href="#mercury">mercury</a>
<a id="venus" href="#venus">venus</a>
<a id="earth" href="#earth">earth</a>
<a id="mars" href="#mars">mars</a>
<a id="jupiter" href="#jupiter">jupiter</a>
<a id="saturn" href="#saturn">saturn</a>
<a id="uranus" href="#uranus">uranus</a>
<a id="neptune" href="#neptune">neptune</a>
<!-- <a id="pluto" href="#pluto">pluto</a> -->
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
