4

I have facing to draw an image map with menu bar hover effetive like URL : http://www.99acres.com/paras-seasons-sector-168-noida-npxid-r6378e

The matter is when I hover on menu it highlight also a portion of image alternately When I hover a portion of image it also highlight menu.

enter image description here

Improve this question
1
  • Please take a look at this guide, right now your Question is worded where it seems like you're asking the community to write code for you: codeblog.jonskeet.uk/2012/11/24/…
    – Graham
    Commented Jun 12, 2017 at 5:07

1 Answer 1

Reset to default
0

I believe you are looking for the answer that this post provided in partial: Link the hover state on two elements. One of the provided fiddles provides example which I used in my codepen for you with the method of linking two elements: http://jsfiddle.net/LN2VL/24/

Now, it is not clear exactly what you need. The "linking" of elements is provided by the code: 

$('#Room3Pic').hover(function() {
    $("#Room3").trigger("mouseover");
}, function() {
    $("#Room3").trigger("mouseout");
});

$('#Room3').hover(function() {
    $('#Room3Pic').css('background-color', 'purple');
    $(this).css('background-color', 'purple');
}, function() {
    $('#Room3Pic').css('background-color', 'white');
    $(this).css('background-color', 'white');
});

Here's my modification of the code that may be more suited to your needs.https://codepen.io/pkshreeman/pen/dRvbZG?editors=1010

That is assuming you already have the image mapped out and can add either class or id to each 'map' so that you can link them together. If you need help with that, then I may suggest you take a look at Using JQuery hover with HTML image map for ideas how to map out your images.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.