jQuery selector issue finding image with usemap attribute

Posted by Greg K on Stack Overflow See other posts from Stack Overflow or by Greg K
Published on 2010-03-28T16:29:39Z Indexed on 2010/03/28 16:33 UTC
Read the original article Hit count: 601

I have an image map in my page:

<div id="books">
  <img src="images/books.png" width="330" height="298" border="0" \
   usemap="#map_books" />
  <map name="map_books" id="map_books" alt="books">
    <area shape="poly" coords="17,73,81,288,210,248,254,264, ..." \ 
     href="/about" alt="books" />
  </map>
</div>

I have a function that tries to find the image in the document using this map:

function(elemId) { // elemId = "#map_books"

  if ($(elemId).attr("tagName") == "MAP") {
    // find image using this map
    var selector = "img [usemap=\\" + elemId + "]"; 
    var img = $(selector);

    if (img.length == 0) {
      console.log("Could not find image using " + selector);
    }
}

It fails to find the image.

Could not find image using img [usemap=\#map_books]

I've escaped the elemId because it starts with a hash and tried variations of selectors.

$("img [usemap$=" + elemId.substring(1) + "]")
$("img").find("[usemap=\\" + elemId + "]")

Neither find the image. Any ideas?

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-selectors