StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I'd suggest having all the images on the page, positioned on top of each other. The below will add all the images linked to by the area to a container then crossfade when you click...</p> <pre><code><script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> jQuery(function($){ $('#Map area').each(function(){ var area = $(this); var img = $('<img>').attr('src', area.attr('href')); $('#imgcontainer').append(img); area.click(function(){ $('#imgcontainer img').stop().fadeOut(); img.stop().fadeIn(); return false; }) }); $('#imgcontainer img:first-child').show(); }); </script> <style> #imgcontainer{width:260px;height:193px;} #imgcontainer img{display:none;position:absolute;} </style> <img src="button.jpg" width="260" height="193" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="61,21,120,55" href="A.img" /> <area shape="rect" coords="147,21,205,54" href="B.img" /> <area shape="rect" coords="60,58,121,90" href="C.img" /> <area shape="rect" coords="147,59,205,92" href="D.img" /> <area shape="rect" coords="61,92,121,125" href="E.img" /> <area shape="rect" coords="146,96,205,128" href="F.img" /> <area shape="rect" coords="60,128,122,163" href="G.img" /> <area shape="rect" coords="146,131,204,164" href="I.img" /> </map> <div id="imgcontainer"></div> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload