I am facing an issue with my code. My goal is to change the text color (headline and subline text) from black to white. The default image contains 10 Hotspots, each with its own text. Upon hovering over a Hotspot, a new background-color (new image-map with corresponding hotspot) will load and the text color will change. While hovering over the hotspot and headline works fine, hovering over the subline-text changes the color to white but highlights the next hotspot instead. I'm unsure of what the problem could be.
Below is my HTML code:
<!-- MAP BEGIN -->
<div id="shoppingMap">
<!-- HIDDEN MAPS BEGIN -->
<img class="shoppingMap-image one" src="area_one.jpg" usemap="#ShoppingMap" />
<img class="shoppingMap-image two" src="area_two.jpg" usemap="#ShoppingMap" />
...
<img class="shoppingMap-image ten" src="area_ten.jpg" usemap="#ShoppingMap" />
<!-- HIDDEN MAPS END -->
<!-- IMAGE-MAPPING BEGIN -->
...
</map>
<!-- IMAGE-MAPPING END -->
<!-- DEFAULT MAIN TEASER BEGIN -->
<img src="floors&corners_1010x764.jpg" width="1010px" height="764px" usemap="#ShoppingMap"/>
<!-- DEFAULT MAIN TEASER END -->
<!-- HEADLIN- & SUBLINE TEXT BEGIN -->
<div class="areaOne">
<span class="headlineText">Party wear</span>
<span class="sublineText">Make your next night out extra special</span>
</div>
<!-- HEADLIN- & SUBLINE TEXT END -->
</div>
<!-- MAP END -->
And here is the jQuery code:
$(document).ready(function(){
$('.mapArea, .headlineText, .sublineText').hover(function(){
var current_area = $(this).index();
$(this).parents('#shoppingMap').find('img.shoppingMap-image').eq(current_area).addClass('active');
$('.headlineText, .sublineText').css({'color': '#fff'});
$('#shoppingMap img').not('.shoppingMap-image').css({'display':'none'});
}, function(){
var current_area = $(this).index();
$(this).parents('#shoppingMap').find('img.shoppingMap-image').eq(current_area).removeClass('active');
$('.headlineText, .sublineText').css({'color': '#333'});
$('#shoppingMap img').not('.shoppingMap-image').css({'display':'block'});
});
});
Here is the CSS code:
/* HEADLINE TEXT */
...