Mapped image onClick event plus maphilight hover

Question

Above is a sample image with 4 mapped regions.
Here is what I am trying to do:
If mouse is hovered on any mapped region, only that region should change color
If mouse is clicked on any mapped region, an entirely new image should replace Image 1

What I have tried so far:

changing image when clicked on mapped_region

 <img alt="main menu" class="map" id="myimage" src="image_1.png" border="0" usemap="#map1" />
 <map name="map1" id="map1">
     <area id="button1" alt="map1 button1" coords="4,49,148,138" shape="rect" onclick="document.getElementById('myimage').src='image_2.png'" />
 </map>

highlighting mapped_region on mouse hover

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('.map').maphilight();
        });
    </script>

Both maphighlight and map_click_event are working fine separately. But when I enable them both, only maphilight works. How can I enable onclick event for mapped image when maphilight is active?

Edit: picture and question to be more clear

Shine Cardozo · Accepted Answer · 2014-01-05T16:03:15.717

2

You will have to use Jquery to achieve this. The following site has a good tutorial for beginners: codeacademy

This might help you grasp the concept of jquery. Copy paste and run. Its crude you will have to make some changes, but it's just the way you have asked above.

    <!DOCTYPE html>
    <html>
    <head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>
    $(document).ready(function () {

    $('.area').mouseenter(function () {
        $(this).addClass("change");
    });

    $('.area').mouseleave(function () {
        $(this).removeClass("change");
    });


    $('#a1').click(function () {
        $('.map').addClass("img_add");
        $('.map div').hide();
    });
    $('#a2').click(function () {
        $('.map').addClass("img_add");
        $('.map div').hide();
    });
    $('#a3').click(function () {
        $('.map').addClass("img_add");
        $('.map div').hide();
    });
    $('#a4').click(function () {
        $('.map').addClass("img_add");
        $('.map div').hide();
    });
    </script>

    <style>
    .map {
         height:40px;
         width:220px;
    }
    .area {
         height:30px;
         width:50px;
         background-color: yellow;
         float: left;
         margin: 2px;
    }
    .change {
        background-color: red;
    }
    .img_add {
        background-image:url('some_image.ext');
        background-repeat: no-repeat;
    background-position: center;
    }
    </style>

    </head>

    <body>

<div class="map">
    <div class="area" id="a1"></div>
    <div class="area" id="a2"></div>
    <div class="area" id="a3"></div>
    <div class="area" id="a4"></div>
</div>

    </body>
    </html>

Output looks like this.

P.S: For valid image to appear give valid link in style for .img_add (replace "some_image.ext" with proper image link)

edited Jan 05 '14 at 16:03

answered Jan 03 '14 at 11:26

Shine Cardozo

489
5
16

1

No one "have to" use a library. You can suggest it, but doing so without posting an actual solution is not an answer - post it as comment instead. – Fabrício Matté Jan 03 '14 at 22:22
My bad man I should have left it as a comment but now I can't ignore your request. – Shine Cardozo Jan 04 '14 at 06:28
Thanks for your response, checking it out – wervdon Jan 04 '14 at 07:22
Unfortunately I failed to make this work on my case, my js knowledge is very limited. I edited my question to be more clear, can you check it again? – wervdon Jan 04 '14 at 08:51
Do I need to define mapped regions in css then add functions to highlight and change image in javascript? – wervdon Jan 04 '14 at 08:53
Here you go. I have made the necessary changes. Edited by hoping you meant that "image 1" is the image of "map 1" – Shine Cardozo Jan 05 '14 at 15:09
Nope, please check the following link: http://www.testing-site.info/jquery-maphighlight-demo.html image 1 is the complete picture, map1-2-3-4 are the heads of presidents – wervdon Jan 05 '14 at 15:20
Please make necessary changes like outer div to 'map' and inner divs to 'area'. Add extra ids to area divs so that you can tell jquery which image was clicked on. – Shine Cardozo Jan 05 '14 at 15:58
How about now? Is this proper? – Shine Cardozo Jan 05 '14 at 16:19
Gonna check and report back – wervdon Jan 05 '14 at 19:07
Thanks to you, I made some progress but still there is one thing missing. I need to make both hover and click events work on the next image as well. I modified areas so highlight is working fine on all images but click event does not. On Image_1, when I click a button Image_2 is supposed to load (which is working fine), then when I click a button on Image_2, Image_3 is supposed to load. I think I should check the background-image of the .map to activate the appropriate .img_add function, that's where I got stuck. My latest: http://jsfiddle.net/hnpaP/2/ – wervdon Jan 06 '14 at 10:13
1

Code specific to you has been updated on jsfiddle.net here is the link: http://jsfiddle.net/hnpaP/3/. I have written it with more content so as to simplify it for you. You may use if statement to reduce code, but I like to keep it simple as I am phase 1 (start of the chain) developer. – Shine Cardozo Jan 06 '14 at 10:56
Wow that is exactly what I have been trying to do. Thanks a lot for your time. – wervdon Jan 06 '14 at 11:12
Glad I was of some help. – Shine Cardozo Jan 06 '14 at 11:38

score 0 · Answer 2 · answered Jan 03 '14 at 11:28

0

$("#link").click(function() {
    $("#image").attr("src", "images/medium/2.png");
});

where link is id or class element for click and #image is a id image to change source

answered Jan 03 '14 at 11:28

mcmac

1,042
9
13

Mapped image onClick event plus maphilight hover

2 Answers2