2017-05-14 7 views
-1

J'essaye de créer une carte d'image, formatée ainsi quand une région sur la carte est cliquée le navigateur ouvre le lien choisi dans un nouvel onglet. Je sais utiliser l'attribut target_blank pour faire cela, et cela fonctionne quand j'ai une image spécifique en tant que "bouton". Mais je n'arrive pas à comprendre comment le faire fonctionner sur la carte-image.HTML ne peut pas obtenir "target_blank" pour travailler dans une carte image

Le code ci-joint fonctionne très bien en tant que mappage d'image, mais je souhaite inclure la fonctionnalité d'ouverture du lien dans un nouvel onglet.

Voici le code:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    </head> 
    <body> 
    <div> 
     <map name="pdx"> 
     <area href="https://en.wikipedia.org/wiki/Main_Page" alt="wiki" 
target="_blank" shape="rect" coords="300,200,400,800"> 
     </map> 
    </div> 
    <p> 
     <img src="/1st-stark1852WebCover.jpg" width="1800" alt="pdx_1852" usemap="#pdx"/> 
    </p> 
</body> 
</html> 

Répondre

0

Je ne peux pas utiliser l'image comme il est pas disponible.

carte ne doit pas être ajouté dans un div comme mentionné dans le commentaire, l'étiquette de zone est nécessaire, puis it works well.

ici avec l'icône stackoverflow avec le lien sur une forme rectangle aléatoire.

<div> 
     <map name="pdx"> 
     <area href="https://en.wikipedia.org/wiki/Main_Page" alt="wiki" 
target="_blank" shape="rect" coords="100,100,200,200"> 
     </map> 
    </div> 
    <p> 
     <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded" width="400" alt="pdx_1852" usemap="#pdx"/> 
    </p> 

Et comme je ne sais pas où vous l'exécutez, avoir à l'esprit que certains jeux comme des sites Web où vous écrivez ce code empêchera les liens de travail. comme SO ici aussi ...

 <div> 
 
      <map name="pdx"> 
 
      <area href="https://en.wikipedia.org/wiki/Main_Page" alt="wiki" 
 
    target="_blank" shape="rect" coords="100,100,200,200"> 
 
      </map> 
 
     </div> 
 
     <p> 
 
      <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded" width="400" alt="pdx_1852" usemap="#pdx"/> 
 
     </p>

+0

Je serai damné, cela a fonctionné, mais seulement si la "forme" est venue juste après "zone" - quand j'ai eu la zone href d'abord puis la forme, etc, il ne fonctionnait pas. Merci! –

+0

juste pour vous prouver que vous avez tort sur cette hypothèse, allez sur le lien jsfiddle et vous verrez que ce n'est pas le cas. L'ordre des attributs n'a aucune importance dans xml. – vv01f

+0

bizarre. Eh bien, ça marche maintenant, donc je suis content. J'ai remarqué que j'obtiens de la statique des copies des liens mises en cache, je dois donc effacer l'historique de navigation pour que cela fonctionne parfois. J'utilise aussi des néocons et il y a peut-être des fonctions intégrées que je ne connais pas. En tout cas, merci pour l'aide et les échantillons! –