CODEWITHSUNDEEP
jqueryhtmlcssimagemap
fiskolin
fiskolin

Reputation: 1421

Change span style when over map area

What I am trying to do is change style (background color) of a span when mouse hover an area. Is that possible?

Seems to be like this (I guess):

span.wind {
    padding: 1px;
    background: red;
    transition: .5s;
    -webkit-transition: .5s
}

area.wind:hover > span.wind {
    background: blue;
    color: #ffffff;
}

Full example here

Upvotes: 2

Views: 522

Answers (1)

Rooster
Rooster

Reputation: 10077

SEE THIS WORKING FIDDLE

You cant do what youre trying with your css the way it currently is, but you can put a mouseenter and mouseleave event on the mapped area that adds and removes a class to the span element, thus changing its style very efficiently. This way you can have predefined values in a stylesheet rather than adding and removing them inline each time.

HTML

<p>Blue <span class="wind_changer">wind</span></p>

<img class="map" width="720" height="305" src="http://www.gloper.org/highplay.pt/images/cultura/logocultura.png" usemap="#usa" />

<map name="usa"><area class="wind" coords="387,9,401,9,414,11,425,17,426,27,418,37,404,42,386,49,353,58,319,66,299,68,273,73,249,76,216,78,183,81,147,84,122,86,103,89,72,92,52,95,24,97,3,97,6,90,57,76,28,84,41,79,73,72,89,72,101,68,108,65,121,62,134,60,150,56,170,51,205,45,224,41,240,36,265,30,280,29,299,23,317,19,342,14,364,11,376,9" shape="poly" title="Blue Wind" /></map>

JS

$.noConflict();
jQuery(function() {
    jQuery('.map').maphilight();
    jQuery('.wind').mouseenter(function(){
        jQuery('.wind_changer').addClass('fancy');
    });

    jQuery('.wind').mouseleave(function(){
       jQuery('.wind_changer').removeClass('fancy'); 
    });
});

NEW CSS

span.wind_changer {
    padding: 1px;
    background: red;
    transition: .5s;
    -webkit-transition: .5s;
 }

.wind_changer.fancy {background:blue;color:#fff;}

Upvotes: 2

Related Questions