I have an image map that I want to show a new div when I hove over the hotspots. It starts with a default listing of text but once I mouseover the hotspots, I want that to change out to the corresponding div's. I'm using the following code and am getting no joy:

$(".office-default").mouseover(function () {
    var elementId = "#office-" + $(this).attr("id").split("-")[1];
    $(elementId).removeClass("hidden");
});

$(".office-default").mouseout(function () {
    var elementId = "#office-" + $(this).attr("id").split("-")[1];
    $(elementId).addClass("hidden");
});

Here's the entire code: /

I've done tons of searches and have e up with nothing helpful. I don't want to change images, I just want to show div's.

I have an image map that I want to show a new div when I hove over the hotspots. It starts with a default listing of text but once I mouseover the hotspots, I want that to change out to the corresponding div's. I'm using the following code and am getting no joy:

$(".office-default").mouseover(function () {
    var elementId = "#office-" + $(this).attr("id").split("-")[1];
    $(elementId).removeClass("hidden");
});

$(".office-default").mouseout(function () {
    var elementId = "#office-" + $(this).attr("id").split("-")[1];
    $(elementId).addClass("hidden");
});

Here's the entire code: http://jsfiddle/leadbellydesign/jR6pa/1/

I've done tons of searches and have e up with nothing helpful. I don't want to change images, I just want to show div's.

• javascript
• jquery
• html
• css
• imagemap

• There is no ID attribute for the div ".office-default". – Navigatron Commented Nov 14, 2013 at 15:03
• Okay, when I add the ID "office-default" when I mouse out of that, the initial image and text disappears. So, at least I'm getting some sort of action. Thanks! – Justice Is Cheap Commented Nov 14, 2013 at 15:11
• Your code is saying that when you hover over the entire image map, create a var and remove the hidden class from it. You need to apply this code to each section. Something like this: $(".office-default div").mouseover(function () { var elementId = $(this).attr("id"); $(elementId).removeClass("hidden"); }); – Navigatron Commented Nov 14, 2013 at 15:13

1 Answer 1

You still need to fix the space below the divs, but this should work

DEMO

$("area").hover(function () {
    $office = $(this).attr("href");
    $(".office-default > div").addClass("hidden");
    $($office).removeClass("hidden");
}, function(){
    $(".office-default > div").addClass("hidden");
    $("#office-1").removeClass("hidden");
});

UPDATE

To fix the spacing issue, update your .office-default CSS:

DEMO

.office-default {
    background:#444;
    padding:5px 15px 0;
    width: 80%;
    height:150px;
}