Search code examples
javascripthtmlimageonclickmaphilight

Mapped image onClick event plus maphilight hover

enter image description here

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

Solution

  • 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)