Anzeige eines Links in einem Hyperlink-Bereich

Ich bin gegen ein interessantes Problem und ich bin ratlos.Anzeige eines Links in einem Hyperlink-Bereich

Grundsätzlich auf einer unserer Seiten haben wir ein paar verlinkte Bereiche. Diese Bereiche sind nicht nur dort anklickbar, wo sie Text enthalten, sondern im gesamten Hintergrund, indem Sie den Link mit display:block setzen. Sie können ein einfaches Beispiel für einen solchen anklickbaren Bereich sehen here.

So haben mich kürzlich die Mächte gebeten, einen weiteren Link in diesem Bereich hinzuzufügen. Der innere Link hat ein anderes Ziel als der anklickbare Bereich und kann nur für seinen unmittelbaren Text angeklickt werden und der Rest des anklickbaren Bereichs wird um ihn herumgelegt. Sie können sehen, wie dies in diesem demo zusammenpassen würde (das gelbe Bit stellt den anklickbaren Teil der inneren Verbindung dar und das Rot stellt die äußere Verbindung dar). HINWEIS: Ich weiß, dass dies eine sehr chaotische Implementierung aussieht, aber ich fürchte, es ist nicht in meinen Händen.

Durch Design (aus gutem Grund) Ich <a> Tags wie so nicht einfach Nest meinen kann:

<a href="#" class="clickable_area"> 
    <span>RED Background and clickable</span><br/> 
    <span>RED Background and clickable</span><br/> 
    <span>RED Background and clickable</span><br/> 
    <a class="inner_link" href="#">Yellow background and it's own link</a><br/> 
</a>

Der Versuch, nisten die Tags wie dies die äußere Verbindung verursacht durch die erste Instanz von </a> vorzeitig geschlossen werden wie gesehen here.

Eine Lösung könnte darin bestehen, den inneren Link zu einem span-Element zu machen und onclick-Ereignisse zu verwenden, um den Hyperlink per JavaScript auszuführen, aber ich bin nicht zu sehr von diesem Ansatz überzeugt und würde lieber JavaScript-Umgehungen vermeiden.

Ich habe ein paar Workarounds mit CSS usw. versucht, aber bis jetzt bin ich trocken. Ich habe das Gefühl, dass absolute Positionierung oder negatives Margining der Schlüssel sein könnte, aber ich war auch nie gut darin.

Wenn jemand irgendwelche Vorschläge anbieten könnte, würde ich sehr dankbar sein.

Quelle

2010-11-24 irishbuzz

dies wird nicht helfen, aber Verschachtelung Anker wie das wäre ungültig Markup sein und Probleme weiter auf der ganzen Linie führen könnte. Ich bezweifle, dass es mit * konventionellen * Mitteln gemacht werden kann, aber dann ist SO Heimat von Göttern unter Männern. Ich würde auch vorschlagen, die Implementierung wenn möglich zu überarbeiten (d. H. Mit einem anklickbaren 'div', das auf diese Weise mehrere Verbindungen leicht unterstützen könnte) (aber auch die Sturheit der" Kräfte "zu schätzen) – Ross

Sie können keine Links verschachteln. Mein Vorschlag ist, die innere Verbindung über die Oberseite des äußeren Bereichs zu absolut zu positionieren, etwas wie folgt aus:

<div class="container" style="position:relative"> 
<a href="..."> 
<span>RED Background and clickable</span><br/> 
<span>RED Background and clickable</span><br/> 
<span>RED Background and clickable</span><br/> 
</a> 
<a href="..." style="position:absolute;top:...px;left:...px">link 2</a> 
</div>

Quelle

2010-11-24 22:06:18

Dank Diodeus.Dies ist sicherlich eine mögliche Lösung in Ordnung [siehe hier] (http://jsfiddle.net/JLpsG/). Ich werde die Frage für eine weitere Weile offen lassen, um zu sehen, ob irgendjemand möglicherweise eine bessere Antwort finden kann, aber ich werde akzeptieren, wenn nicht. – irishbuzz

Ok das sieht sicher die beste Antwort aus. Die Demo in meinem letzten Kommentar verwendet 'padding-bottom' auf einem rot anklickbaren Flächenelement, um den Bereich so zu strecken, dass der innere Link verschoben werden kann. Es ist tatsächlich einfacher, einfach einen zusätzlichen '
' im anklickbaren Bereich hinzuzufügen, da dies auch den perfekten Platz erreicht. Danke wieder Diodeus – irishbuzz

ich ein div verwenden würde Ihre Links zu wickeln. Ist das was du willst? http://jsfiddle.net/wcCMC/3/

Quelle

2010-11-24 22:12:22 stevelove

Dies wäre eine normale Situation, aber irishbuzz sed die folgenden HINWEIS: Ich weiß, das sieht eine sehr chaotisch Umsetzung, aber ich fürchte, es ist nicht in meinen Händen. Mit Absicht (und aus gutem Grund) kann ich nicht einfach meine Tags – Michael

verschachteln Danke, dass Sie sich die Zeit nehmen zu antworten. Ich ergänzend zu dem, was Michael kommentiert - der gelbe anklickbare Bereich kann nur den Text des 2. Links abdecken, während der rote Hintergrund den restlichen Raum rechts ausfüllen muss. – irishbuzz

Sie können keine Verbindungen verschachteln, aber absolute Positionierung verwenden.

<div id="wrapper"> 
    <a id="bigred" href="...">Big clickable area</a> 
    <a id="yellow" href="...">Yellow background link</a> 
</div>

CSS

#wrapper { 
    position: relative; 
    height: 300px; 
    width: 500px; 
} 

#bigred { 
    background: #ff0000; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 300px; 
    width: 500px; 
} 

#yellow { 
    background: #ffff00 
    position: absolute; 
    top: 30px; 
    left: 30px; 
}

werden beide Links angeklickt werden. Gelb wird wegen der Reihenfolge der Quelle über Rot gezeichnet. Wenn Sie die Reihenfolge ändern, müssen Sie z-index verwenden, um zu steuern, welche Anzeigen darüber angezeigt werden.

Quelle

2010-11-24 22:15:06

+1 für funktionierende Lösung. Danke Martin. Ich denke, dass die Lösungen von Diodeus und Michael möglicherweise ein wenig besser sind, da sie nicht die 'bigred'-Verbindung benötigen, um die absolute Position zu verwenden oder Breite/Höhe festgelegt haben. – irishbuzz

Hier gehen Sie ein funktionierendes Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<body> 
<style> 
a {text-decoration:none; background-color:red} 
.clickable_area{display:block;color:#000; padding-bottom: 20px;} 
.container{position: relative;} 
.inner_link{position:absolute; bottom: 0px; background-color:yellow} 
</style> 

    <div class="container"> 
     <a href="#" class="clickable_area"> 
      <span>RED Background and clickable</span><br/> 
      <span>RED Background and clickable</span><br/> 
      <span>RED Background and clickable</span><br/> 
     </a> 
     <a class="inner_link" href="#">Yellow background and it's own link</a> 
    </div> 

</body> 
</html>

Quelle

2010-11-24 22:17:56 Michael

+1 für die Arbeitslösung. Danke Michael. – irishbuzz

Ihre Begrüßung :) – Michael

Anzeige eines Links in einem Hyperlink-Bereich

Antwort

Verwandte Themen