Sélectionnez la section de l'image mappée lorsque Mouseover texte sur la page Web

Question

Scénario:

• Image avec plusieurs zones cartographiées.
• Une liste de texte sur la page

fonctionnalité souhaitée: Quand je mouseOver les différents morceaux de texte dans la liste, les zones correspondant à l'image cartographiée est mis en surbrillance.

Quelqu'un connaît-il un bon outil javascript qui peut le faire?

J'ai trouvé un plugin jquery (map hilight) qui va mettre en évidence la section de l'image que vous déplacez votre souris sur l'image elle-même. Je suis à la recherche de l'étape suivante - déclencher les faits saillants d'une source en dehors de l'image.

Answer 1

J'ai regardé le code source pour le plugin que vous avez mentionné et il devrait être assez facile de l'étendre afin qu'il fera ce que vous voulez faire, voici quelques conseils:

ligne 127-136 de jquery.maphighlight.js:

mouseover = function(e) { 
    var shape = shape_from_area(this); 
    add_shape_to(canvas, shape[0], shape[1], $.metadata ? $.extend({}, options, $(this).metadata()) : options); 
}; 

if(options.alwaysOn) { 
    $(map).find('area[coords]').each(mouseover); 
} else { 
    $(map).find('area[coords]').mouseover(mouseover).mouseout(function(e) { clear_canvas(canvas); }); 
} 

C'est là toute la magie de l'événement se produit. La fonction mouseover est utilisée pour mettre en évidence une zone \

Dans votre code, vous pouvez essayer de trouver la zone coordonnées que vous souhaitez mettre en évidence en faisant quelque chose comme ceci:.

$(map).find('#id_of_the_area[coords]').each(moseover); 

Où id_of_the_area serait un ID vous avez donné la balise <area> que vous voulez mettre en surbrillance.

Si vous mettez cela dans une fonction, vous pouvez l'appeler de partout où vous en avez besoin.

Edit:

Sur la base de votre question dans le commentaire, voici quelques conseils:

Les fonctions de mettre en avant/une zone pourrait pas surligner ressembler à quelque chose comme ceci:

function highlight(e) { 
    $(map).find('#id_of_the_area[coords]').each(moseover); 
} 
function unHighlight(e) { 
    clear_canvas($(canvas)); 
} 

Dans cet exemple, id_of_map et id_of_canvas correspond à l'ID de la carte et des éléments de canevas.

La portée des fonctions mouseover ou clear_canvas et map ou canvas peut être un problème. Vous devez faire attention où placer ce code. Je suggère de lire un peu sur les plugins jquery avant d'essayer d'ajouter cette fonctionnalité.

En jquery, vous pouvez attacher des événements à n'importe quel élément html. Comme ceci:

$('#id_of_element').mouseover(highlight); 
$('#id_of_element').mouseout(unHighlight); 

id_of_element serait l'id de l'élément que vous souhaitez déclencher la surbrillance.

Espérons que cela aide!

Answer 2

Highslide est pas exactement ce que vous avez demandé, but worth a look.

Answer 3

alors que ce n'est pas super élégant, vous pouvez déclencher l'événement mouseover de l'élément de la zone en question manuellement:

<a href="..." onmouseover="$('#certain-area') 
     .trigger('mouseover');">link text</a> 

même pour mouseout. Bien sûr, cela est mieux fait discrètement que d'utiliser onmousover et onmouseout.