jQuery show div sur le vol stationnaire avec une image de la carte

J'ai une image de la carte que je veux montrer une nouvelle div quand je hove sur les hotspots. Il commence avec une liste par défaut de texte, mais une fois que j'ai passer la souris sur le hotspots, je veux que le changement correspondant de la division. Je suis en utilisant le code suivant et suis pas la joie:

$(".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");
});

Voici le code complet:
http://jsfiddle.net/leadbellydesign/jR6pa/1/

J'ai fait des tonnes de recherches et ont abouti à rien d'utile. Je ne veux pas changer les images, je veux juste montrer div à l'.

  • Il n'y a aucun attribut ID de la div ".bureau par défaut".
  • Bon, quand j'ajoute l'ID "bureau par défaut" quand je souris en dehors de cela, la première image et le texte disparaît. Donc, au moins, je reçois une sorte d'action. Merci!
  • Votre code est à dire que lorsque vous passez la souris sur l'image entière de la carte, créer un de la var et de supprimer la classe caché de lui. Vous devez appliquer ce code à chaque section. Quelque chose comme ceci: $(".office-default div").mouseover(function () { var elementId = $(this).attr("id"); $(elementId).removeClass("hidden"); });
InformationsquelleAutor Justice Is Cheap | 2013-11-14
  1. 2

    Vous avez encore besoin de fixer l'espace ci-dessous les divs, mais cela devrait fonctionner

    DÉMO

    $("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");
});

    Mise à JOUR

    Pour résoudre le problème d'espacement, de mettre à jour votre .office-default CSS:

    DÉMO

    .office-default {
    background:#444;
    padding:5px 15px 0;
    width: 80%;
    height:150px;
}
    • Vous rock! Merci beaucoup.
    • - Une dernière question. Comment serait-il difficile de quitter l'information disponible pour la copie et la pâte jusqu'à ce que vous passez la souris sur une autre zone de la carte? Je vais avoir un moment difficile de dépannage de l'espace supplémentaire si elle disparaît à chaque fois que je souris.
    • Voir mise à jour de la solution 😀
    • Merci! Je devrais avoir posté que j'avais compris. 🙂
    InformationsquelleAutor kei