Evidenziare la sezione di immagine mappata quando al passaggio del mouse il testo sulla pagina web

Question

Scenario:

• Immagine con diverse aree mappate.
• Un elenco di testo nella pagina

funzionalità desiderata. Quando mouseOver le diverse parti di testo nell'elenco, aree corrispondenti nell'immagine mappata si evidenzierà

Qualcuno sa di un buon strumento javascript che può fare questo?

Ho trovato un plugin jQuery ( mappa hilight ) che metterà in evidenza la sezione del immagine come si sposta il mouse sopra l'immagine stessa. Sto cercando il passo successivo -. Innescando i punti salienti da una fonte al di fuori dell'immagine

Answer 1

Ho guardato il codice sorgente per il plugin lei ha citato e dovrebbe essere abbastanza facile da estendere in modo che esso farà quello che vuoi che faccia, qui alcuni suggerimenti:

Linea 127-136 di 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); });
}

Questo è dove tutta la magia evento si verifica. La funzione mouseover viene utilizzata per evidenziare un'area. \

Nel codice si potrebbe cercare di trovare le coordinate della zona che si desidera evidenziare facendo qualcosa di simile a questo:

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

Dove id_of_the_area sarebbe un id che ti ha dato il tag <area> che si vuole evidenziare.

Se metti che in una funzione che si può chiamare da ovunque ne abbiate bisogno di.

Modifica

In base alla tua domanda nel commento, qui ci sono alcune più puntatori:

Le funzioni per evidenziare / unhighlight una superficie potrebbe essere simile a questa:

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

In questo esempio id_of_map e id_of_canvas sarebbe l'id della mappa e tela elementi.

L'ambito delle funzioni mouseover o clear_canvas e variabili map o canvas potrebbe essere un problema lì. È necessario essere attenti su dove inserire questo codice. Io suggerirei di lettura fino a plugin jQuery un po 'prima si tenta di aggiungere questa funzionalità.

In jQuery è possibile collegare gli eventi a qualsiasi elemento HTML. In questo modo:

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

id_of_element sarebbe l'id dell'elemento che si desidera attivare l'evidenziazione.

Spero che questo aiuti!

Answer 2

Anche se questo non è super-eleganti, è possibile attivare l'evento mouseover dell'elemento zona in questione manualmente:

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

Lo stesso vale per mouseout. Naturalmente, questo è meglio fare in modo discreto che usare onmousover e onmouseout.

Answer 3

Highslide non è esattamente quello che hai chiesto, ma vale la pena dare un'occhiata.