Geek Answers Handbook

Can I use image hotspots? Is this the best way to do this in today's world?

I have an image that needs to be divided into 4, and each part should have a link. Are people still using image access points?

+4
source share
3 answers

I assume that you are talking about the client side of the image map .

They are still in use and are part of HTML 4.01 and XHTML 1.1, as well as in the current HTML 5 project.

They are easy to use and supported by all browsers and, as such, are a good way to have hot spots in a single image. I cannot come up with any better alternative (ease of use, browser support, accessibility, which is part of the HTML specification) that will provide you with this functionality.

Is it desirable to have such "hot spots" in one image (openness to the user, which is the main problem), this is another question.

+8
source

Using images as links is lame in my opinion; this can damage accessibility, and depending on the image used, can lead to Mystery Meat Navigation , which is lame.

Instead, I will make this image a backdrop.

HTML

<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>

CSS

 #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 may need to use more advanced CSS positioning to make sure that these <a> anchor elements are where you need them.

Adding

Here is another example that should look 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>
+7
source

You can use image cards, the main reason people don’t like them is because people often display a small part of the image, and you don’t know what is the link. If you can, just wrap each image in it with respect <a href='link'>img</a>

0
source

More articles:


All Articles