Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>A similar answer was posted by someone else. I'm not sure why it was deleted. It appears to work:</p> <pre><code>$('[item="texas"]') </code></pre> <p>Here's an example:</p> <pre><code>&lt;img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/U.S._Territorial_Acquisitions.png/320px-U.S._Territorial_Acquisitions.png" alt="" usemap="#texasmap" id="" /&gt; &lt;map id="texasMap" name="texasmap"&gt; &lt;area shape="circle" coords="135,150,45" href="#" alt="" item="texas" /&gt; &lt;area shape="circle" coords="245,170,30" href="#" alt="" item="florida" /&gt; &lt;/map&gt; &lt;div id="texas" class="display"&gt;You clicked the Republic of Texas!&lt;/div&gt; &lt;div id="florida" class="display"&gt;You clicked Florida!&lt;/div&gt; </code></pre> <pre><code>$('[item="texas"]').click(function(){ $(".display").hide(); $("#texas").show(); return false; }); $('[item="florida"]').click(function(){ $(".display").hide(); $("#florida").show(); return false; }); </code></pre> <p><a href="http://jsfiddle.net/xtKXL/5/" rel="nofollow">http://jsfiddle.net/xtKXL/5/</a></p> <h2>Edit:</h2> <p>To make things a little more dynamic, you can grab the "item" from the <code>&lt;area&gt;</code> over which you're hovering and use that value to display the appropriate <code>&lt;div&gt;</code>:</p> <pre><code>$('[item]').click(function(){ var item=$(this).attr('item'); $(".display").hide(); $("#"+item).show(); return false; }); </code></pre> <p><a href="http://jsfiddle.net/xtKXL/6/" rel="nofollow">http://jsfiddle.net/xtKXL/6/</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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