Geek asks and answers

Is there a way to use image map coordinates in jquery?

I want to use the coordinates of the image map, but not the map itself. So my question is: can I use the coordinates of the image map and determine if the user scrolls through these coordinates using jquery?

EDIT:

I am aiming for something like this: (I don’t actually use an image card, it just agrees.)

Coordinates from the image map: 186,106,199,86,220,86,241,94,245,109

$("img#test").hover(function(e) {
        if (e.pageX >= 186 && e.pageY >= 106 &&
            e.pageX >= 199 && e.pageY >= 86 &&
            e.pageX >= 220 && e.pageY >= 86 &&
            e.pageX >= 241 && e.pageY >= 94 &&
            e.pageX >= 245 && e.pageY >= 109)
            alert("wewt");
    });
+3
source share
1 answer

You can add event listeners to tags directly or using jQuery. For instance:

<map name="testmap" id="testmap">
    <area shape="rect" coords="10,9,58,27" href="#" title="" alt="You are on a rectangle!">
    <area shape="circle" coords="104,18,14" href="#" title="" alt="You are on a circle!">
</map>
<img src="/img/image.png" style="width:136px;height:36px" usemap="#testmap" />

<script type="text/javascript">
    $('#testmap area').mouseover(function()
    {
        alert($(this).attr("alt"));
    });
</script>
+3
source

More articles:


All Articles