Kann ich innerhalb eines Tags <a> einen Bildkartenbereich hinzufügen?

Question

Wie kann ich ein <area> innerhalb eines <a> Tags innerhalb einer Imagemap <map> hinzufügen und immer noch Firefox die Imagemap anzeigen lassen?

Wenn im dies zu tun:

<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 die ganze <map> ignorieren, Chrome wird jedoch nicht. Kann ich es so machen, dass Friefox es nicht ignoriert?

ich ein Plugin für Wordpress bin mit so dass, wenn ein <a> Tag verwendet wird, das Bild als Pop-up öffnet stattdessen das Bild im aktuellen Fenster des Ladens

Answer 1

Nahm mich eine Weile, aber ich habe es.

Dank Gaurav Rai für den Vorschlag,

Ich hatte im area Elemente ein Skript im href zu nennen: href="javascript:getAnchor();"

dann einen Anker <a>-Tag mit einem id machen. Mine war 20000Anchor

dann ein Skript, das den Anker-ID bekommt 20000Anchor und aktiviert sie durch Klick()

<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> 

Der Anker <a> Element/Licht kann nun mit dem Bild Karte verwendet und arbeiten mit Chrome und Firefox

Answer 2

Durch Ihre HTML Ich denke, Sie sind Versuchen, den Bereich anklickbar zu machen und den Benutzer auf eine bestimmte Seite umzuleiten. Sie können dies nicht mit dem Anchor-Tag tun. Dazu müssen Sie eine JavaScript-Funktion aufrufen, und in dieser Funktion können Sie leicht umleiten.

<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>