0

In addition to this question Highlight text when hover imagemap area and vice versa - using imagemapster I'm searching for a solution to add a class to an image outside the imagemap. The intention is when hovering on a part of the imagemap a line is showing beneath a image above the imagemap. For an example and partly working script (which is based on the question above): http://jsfiddle.net/kyzho2v4/3/

jQuery(document).ready(function ($) {
    $('#house').mapster({
        mapKey: 'name',
        singleSelect: true,
        fillOpacity: 0.6,
        fillColor: 'FF0000',

        //
        onMouseover: function (evt) {
        var parts = evt.key.split('-');
        var part = parts[1];
        highlightArea(part);
        },

        //
        onMouseout: function (evt) {
        var parts = evt.key.split('-');
        var part = parts[1];
        highlightAreaX(part);
        }

     });   

        //
        $('a').hover(function () {
            var parts = $(this).closest('div').attr('class').split('-');
            var part = parts[2];
            highlightArea(part);

        });

    //
    $('a').mouseleave(function () {
        var parts = $(this).closest('div').attr('class').split('-');
        var part = parts[2];
        highlightAreaX(part);
    });


});

//
function highlightArea(key) {
$('area[name=part-' + key + ']').mouseenter();
$('a').addClass('line');
$('div.menu-item-' + key + ' a').addClass('line');
}

//
function highlightAreaX(key) {
$('area[name=part-' + key + ']').mouseout();
$('a').removeClass('line');
$('div.menu-item-' + key + ' a').removeClass('line');
}
K.Dᴀᴠɪs
  • 9,945
  • 11
  • 33
  • 43
Co_123
  • 13
  • 5
  • Please do not add your solution to your question. Instead, you can answer the question by clicking the "Answer Question" button below. – K.Dᴀᴠɪs Feb 26 '18 at 09:13

1 Answers1

0

Posted OP's answer as an answer:

I found a solution, so for those who are searching the same thing: I only added a new css class (line1) and changed the jquery script a little bit: http://jsfiddle.net/88c0odmn/7/

//
function highlightArea(key) {
$('area[name=part-' + key + ']').mouseenter();

$('div.menu-item-' + key + ' a').addClass('line1');
}

//
function highlightAreaX(key) {
$('area[name=part-' + key + ']').mouseout();
$('a').removeClass('line');
$('div.menu-item-' + key + ' a').removeClass('line1');
}
K.Dᴀᴠɪs
  • 9,945
  • 11
  • 33
  • 43