Могу ли я добавить область карты изображения внутри тега <a>?

Question

Как добавить <area> внутри тега <a> внутри изображения карты <map> и до сих пор у Firefox есть карта изображения?

Если им это сделать:

<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 будет игнорировать все <map>, Chrome, однако, не будет. Могу ли я сделать так, чтобы Фрифлок не игнорировал его?

Я использую плагин для Wordpress, так что, когда <a> используется тег будет открыть этот файл в виде всплывающего окна вместо загрузки изображения в текущем окне

Answer 1

Принял некоторое время, но я получил его.

Спасибо Gaurav Rai за предложение,

Я должен был вызвать скрипт в HREF в area элементе: href="javascript:getAnchor();"

затем сделать якорь <a> тег с идентификатором. шахта была 20000Anchor

затем сделать скрипт, который получает якорный идентификатор 20000Anchor и активирует его, нажав на кнопку()

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

Якорь <a> элемент/Lightbox теперь можно использовать с изображением карты и будет работать с Chrome и Firefox

Answer 2

По вашему HTML Я думаю, вы пытаясь сделать зону кликабельной и перенаправить пользователя на определенную страницу. Вы не можете сделать это с помощью тега привязки. Для этого вам нужно вызвать функцию javascript, и в этой функции вы можете легко перенаправить.

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