#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    7
    Rep Power
    0

    Highlighting an area of an image map based on search text


    I have achieved the ability to highlight a <div> based on search text. You can view the JSFiddle here .

    Now, I'm trying to apply the same concept to a set of mapped coordinates on an image map, and I'm having issues getting it to work.

    Each set of mapped coordinates will have a text value assigned so it remains searchable.

    Here's the JS I have so far...

    Code:
    function doSearch(text) { $('#content div').removeClass('highlight'); $('#content div:contains(' + text + ')').addClass('highlight'); }
    Thoughts?
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,123
    Rep Power
    119
    Assign each image map coordinate with an attribute with the search term in it; something like:
    Code:
    <map name="myMap">
      <area shape="rect" coords="0,0,100,100" href="office.php?location=1" alt="office location 1" data-image="office">
    </map>
    Then change your code; to look for something like:
    Code:
    $("map[name='myMap']").attr("data-image").contains(""+text+"").addClass("highlight");

IMN logo majestic logo threadwatch logo seochat tools logo