web-dev-qa-db-fra.com

Lien à l'intérieur d'un lien div

Je voudrais avoir un div qui contient une image et du texte soit un lien. Pour que l'on puisse cliquer n'importe où (pas nécessairement l'image ou le texte) dans la div et être amené à un seul endroit. Cependant, je voudrais également qu'il y ait un autre lien à la fin du texte qui amène l'utilisateur à un autre endroit. Cependant, une fois que j'ajoute ce deuxième lien, le div entier n'est plus un lien et juste l'image et le texte sont des liens. Est-ce que je veux faire?

htmlhyperlink
21
michaellindahl

Ce n'est pas possible en HTML, car un élément a à l'intérieur d'un élément a n'est pas autorisé. Selon les spécifications HTML existantes, vous ne pouvez pas avoir, par exemple, div à l'intérieur a, mais cette restriction n'a jamais été vraiment appliquée par les navigateurs et elle a été levée dans les brouillons HTML5. Les éléments imbriqués a sont un problème différent, car cela créerait une zone active à l'intérieur d'un actif, et sa signification devrait être définie et ce serait déroutant.

Que se passe-t-il dans la pratique lors de l'utilisation

<a href=foo>bla bla <a href=bar>inner link</a> stuff</a>

est qu'il fonctionne comme vous le souhaitez, sauf que le contenu de l'élément a externe après l'élément a interne n'est pas du tout un lien. Apparemment, les navigateurs ne sont pas prêts à gérer des constructions comme celle-ci. En effet, ils impliquent une fermeture </a> tag lorsqu'ils rencontrent un <a> tag lorsqu'un élément a est ouvert. Tout comme ils le font pour les éléments p.

Ainsi, un lien interne à la fin d'un lien fonctionnerait en quelque sorte. Il n'y a bien sûr aucune garantie qu'il fonctionnera dans les futures versions des navigateurs ou qu'il fonctionnera sur tous les navigateurs.

Vous pouvez utiliser deux éléments a séparés et non imbriqués successivement et placer le second visuellement à l'intérieur du premier, en utilisant le positionnement CSS. Mais cela deviendrait quelque peu compliqué. Une approche beaucoup plus simple consiste à configurer un pseudo-lien JavaScript:

<span onclick="document.location.href = 'foo'; return false">inner link</span>

L'inconvénient est qu'il n'agira pas comme un lien lorsque JavaScript est désactivé, et les moteurs de recherche ne le traiteront pas non plus comme un lien.

36
Jukka K. Korpela

Il existe un moyen de le faire sans javascript en utilisant un positionnement absolu et relatif. Cela conserve également la sémantique du code pour le référencement, ce que le javascript a du mal à faire.

 .outside-container {
      width: 900px;
      margin: 0 auto;
      position: relative;
      background: #888;
      padding: 5px;
    }
 
    .overlay {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0; bottom: 0; right: 0; left: 0;
      background: white;
      opacity: 0;
    }
    
    .overlay:hover {
      opacity: .2;
    }
    
    .text-box {
      position: absolute;
      top: 5px; right: 5px;
      width: 30%;
      color: white;
      font: georgia, serif 700 14px;
    }
    
    .image-box {
      width: 68%;
    }
<div class = "outside-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bc/George_Berkeley_by_Jonh_Smibert.jpg" alt="george_wiki" class = "image-box">
         <a class = "overlay" href = "#div"></a>
         <div class = "text-box">
           I was considering the odd fate of those men who have in all ages, through an affectation of being distinguished from the vulgar, or some unaccountable turn of thought, pretended either to believe nothing at all, or to believe the most extravagant things in the world. This however might be borne, if their paradoxes and scepticism did not draw after them some consequences of general disadvantage to mankind. But the mischief lieth here; that when men of less leisure see them who are supposed to have spent their whole time in the pursuits of knowledge professing an entire ignorance of all things, or advancing such notions as are repugnant to plain and commonly received principles, they will be tempted to entertain suspicions concerning the most important truths, which they had hitherto held sacred and <a href = "#text">unquestionable.</a>
         </div>
       </div>

Naturellement, je pensais que j'étais le seul à y penser, mais la question a été répondue avant . J'ai ajouté cela parce que toutes les autres réponses étaient javascript ou jQuery, et je pensais qu'une réponse HTML/CSS pure pourrait être utile.

7
Stigwood

Un morceau de gâteau, si cela ne vous dérange pas d'utiliser un petit jQuery. Vous pouvez utiliser l'événement "click" sur la div du conteneur pour vous amener à un emplacement, puis utiliser la méthode "event.stopPropagation" sur le lien d'ancrage interne pour arrêter le déclenchement de l'événement click externe.

http://jsfiddle.net/timcuculic/a7p13rdy/2/

    <script>
    $(".containerdiv").click(function () {
        window.open(
          'https://www.google.com/',
          '_blank'
        );
    });

    $("a").click(function (event) {
        event.stopPropagation();
    });
</script>
6
Tim Cuculic

essayer

 <a href="your link"><div></div></a>

ou avec peu de javascript

<a href="link1">
    <div>outer  link
        <img  src="image" />
        <p onclick="window.location.href='otherlink'"> inner link</p>
    </div>another
</a>

jsfiddle

5
NullPoiиteя