Mapped image onClick event plus maphilight hover

Question

Mapped image onClick event plus maphilight hover

2.3k Views Asked by wervdon At 04 April 2025 at 05:35

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

Original Q&A

There are 2 best solutions below

mcmac On 03 January 2014 at 11:28

$("#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

**Shine Cardozo** · Accepted Answer

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)

Mapped image onClick event plus maphilight hover

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in IMAGE

Related Questions in ONCLICK

Related Questions in MAPHILIGHT

Trending Questions

Popular # Hahtags

Popular Questions