Posso aggiungere un'area mappa immagine all'interno di un tag <a>?

Question

Come aggiungere un <area> all'interno di un tag <a> all'interno di una mappa immagine <map> e avere ancora Firefox per mostrare la mappa immagine?

Se sto facendo questo:

<img usemap="#progress" src="http://yourmillionpixels.com/wp-content/uploads/2015/09/progress-bar-with-goals-20.png" width="482" height="817"/> 

<map name="progress"> 
    <a href="http://yourmillionpixels.com/wp-content/uploads/2015/07/20000-goal.jpg"> 
    <area shape="rect" coords="152,648,308,673" target="_self"/></a> 
</map> 

Firefox ignorerà tutto <map>, Chrome, tuttavia, non lo faranno. Posso fare in modo che Friefox non lo ignori?

sto usando un plugin per Wordpress in modo che quando un tag <a> viene utilizzato si aprirà l'immagine come un pop-up invece di caricare l'immagine nella finestra corrente

Answer 1

Mi ci è voluto un po 'ma l'ho preso.

Grazie Gaurav Rai per il suggerimento,

ho dovuto chiamare uno script nella href nell'elemento area: href="javascript:getAnchor();"

poi fare un ancoraggio <a> tag con un id. il mio era 20000Anchor

poi fare uno script che ottiene l'id di ancoraggio 20000Anchor e lo attiva con un clic()

<img usemap="#progress" src="http://yourmillionpixels.com/wp-content/uploads/2015/09/progress-bar-with-goals-20.png" width="482" height="817"/> 

<map name="progress"> 
    <area href="javascript:getAnchor();" shape="rect" coords="152,648,308,673" target="_self"/></a> 
</map> 

<a href="http://yourmillionpixels.com/wp-content/uploads/2015/07/20000-goal.jpg" id="20000Anchor"></a> 

<script> 
    function getAnchor(){ 
     document.getElementById("20000Anchor").click(); 
    } 
</script> 

L'ancora <a> elemento/ID può ora essere utilizzato con la mappa immagine e lavorerà con Chrome e Firefox

Answer 2

Con il codice HTML immagino sei cercando di rendere l'area cliccabile e reindirizzare l'utente a una pagina specifica. Non puoi farlo con il tag di ancoraggio. Per questo è necessario chiamare una funzione javascript e in quella funzione è possibile reindirizzare facilmente.

<img usemap="#progress" src="http://yourmillionpixels.com/wp-content/uploads/2015/09/progress-bar-with-goals-20.png" width="482" height="817"/> 

<map name="progress"> 
    <area style="cursor:pointer;" onClick="redirect('http://yourmillionpixels.com/uploads/2015/07/50000goal.png');" shape="rect" coords="152,648,308,673" target="_self"/> 
</map> 

<script> 

function redirect(u) 
{ 
    window.location.href=u; 
} 
</script>