Image Map: Click to echo/print text on screen
Asked Answered
S

1

6

Is it possible to click a portion of an image map and print out some text, be it the alt or title value of that <area> tag somewhere on the page?

Could I do this through jQuery? I've looked and I'm struggling to do so (very rusty with jQuery, and a novice on top of it). I've played with a bit of code but all I manage to get is static data out.

Thanks.

Edit: This is one large image with 30 uniquely sized and shaped "areas" that are clickable.

Sacrosanct answered 10/9, 2009 at 20:39 Comment(0)
I
13

HTML:

<map name="Map" id="Map">
  <area shape="rect" coords="32,36,222,109" href="#" alt="hi" />
  <area shape="rect" coords="246,45,420,110" href="#" alt="alt" />
  <area shape="rect" coords="456,45,585,111" href="#" />
  <area shape="rect" coords="627,44,768,118" href="#" />
</map>

jQuery:

<script type="text/javascript">
 $(function(){
  $('map area').click(function(){
   alert($(this).attr('alt'));
  });
 });
</script>
Incline answered 10/9, 2009 at 21:2 Comment(1)
The problem is I have one large image with 30 'click' options - cutting it down into 30+ pieces would be a major pain.Sacrosanct

© 2022 - 2024 — McMap. All rights reserved.