JQuery: Gesamte div Box (Container) verlinken
Besonders auf der Startseite machen sich Boxen mit dem Angebot und einem kleinen beschreibenden Text ganz gut. Man kann sein Produkt, einen Artikel, eine News oder eine weitere Unterseite kurz vorstellen und auf der Hauptseite mit einer Verlinkung hinterlegen. Bei Interesse klickt der Nutzer auf die Box, um genauere Details und Informationen zu bekommen. Irgendwo im Teasertext oder in der Überschrift (Titel) der Box ist ein HTML Link, den wir für das Linken des gesamten DIV Containers nutzen können.
Es gibt mehrere Möglichkeiten den ganzen div Container zu verlinken. Eine Möglichkeit wäre dies direkt per CSS zu machen. Das bedeutet, dass wir den Link, welcher in der Regel ein Text ist, mit der Eigenschaft „display“ und dem Wert „block“ (als CSS Befehl wäre dies „display: block“) zu einer Box transformieren und mit der entsprechenden Breite, Höhe sowie inneren und äußeren Abständen so platzieren, wie wir es benötigen.
In diesem Post möchte ich eine weitere Möglichkeit zeigen, wie man im Grunde ganz einfach einen div mit Inhalt wie zum Beispiel Text und Bildern komplett verlinken kann, nämlich mit JavaScript. Hierbei können wir das JQuery Framework nutzen. Der Code ist recht simpel und kurz. Zuerst einmal brauchen wir einen DIV mit Inhalt auf einer HTML Seite:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> <title>HTML Seite mit komplett verlinktem Container</title> </head> <body> <div class="container"> <div class="b1"><img src="bild.jpg" /></div> <div class="b2">Der Text in der Box</div> <div class="b3"><a href="unterseite.html">Link</a></div> </div> </body> </html> |
Wie man sieht, haben wir eine Box mit einem Bild, einem kurzen Text sowie einen Link zu einer Unterseite. Die Gestaltung kann jeder jeweils beliebig festlegen, in diesem Post gehe ich dazu nicht genauer ein. Anschließend haben wir hier unser JQuery Code Schnipsel:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script type="text/javascript"> // den Mauszeiger zu einem Zeigefinger machen (in der Regel alle Links) $('.container').css('cursor', 'pointer'); // bei Klick zur jeweiligen Seite $('.container').click(function(){ location.href = $('.container .b3 a', $(this)).attr('href'); }); // Titel vom Link für auch für die neue Verlinkung nutzen $('.container').mouseover(function(){ $(this).attr('title', $('.container .b3 a', $(this)).attr('title')); }); </script> |
Für die optische Wahrnehmung, dass die komplette Box auch klickbar ist, sollte man den Cursor (Mauszeiger) zur Hand (Pointer) transformieren. Der Grund ist: In der Regel ändert sich in den modernen Browsern der Mauszeiger beim Drüberfahren über einen Link zu der bekannten Hand mit dem Zeigefinger. Mit dem zweiten Befehl legen wir für eine Klick Aktion fest, dass die entsprechende Seite, welche im div mit dem class Attribut b3 als Link festgelegt wurde, geöffnet werden soll. Dazu wird der Inhalt aus dem Attribut href genommen und als Location festgelegt. Der dritte Mouseover Effekt kann im Grund weggelassen werden. Es ist nur ein zusätzlicher Infotext aus dem title-Text des Links, welchen man bei Bedarf noch anzeigen lassen kann.
Nachtrag:
Im oberen Beispiel sucht Jquery bei jedem Aufruf erneut im DOM Knotenbaum (siehe Tipp / Kommentar von paul) nach dem Link bzw. Link-Titel. Verbessern kann man dies wie folgt:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script type="text/javascript"> // Instanz einmal ermitteln! var container = $('.container'); // den Mauszeiger zu einem Zeigefinger machen (in der Regel alle Links) container.css('cursor', 'pointer'); // bei Klick zur jeweiligen Seite container.click(function(){ location.href = $(this).find('a').attr('href'); }); // Titel vom Link für auch für die neue Verlinkung nutzen container.mouseover(function(){ $(this).attr('title', $(this).find('a').attr('title')); }); </script> |
Die benötigte Instanz des div zum Verlinken der gesamten Box wird in einer Variable gespeichert und kann für die Events „click“ und „mouseover“ weiter verwendet werden.
location.href = $(‚.container .b3 a‘, $(this)).attr(‚href‘);
besser:
location.href =$(this).find(‚a‘).attr(‚href‘);
ausserdem:
var container = $(‚.container‘);
container.css(‚cursor‘, ‚pointer‘);
sonst springst du immer wieder in die dom.
Danke für den Tipp! Das stimmt natürlich. Werde ich gleich mal im Code beheben. Obwohl man das als Nutzer natürlich nicht wirklich merkt im Browser. 😉 Oder etwa doch? Obwohl … bei sehr großen HTML Seiten, mit vielen Zeilen Code, und wenn der Link sehr tief in einem Knoten ist, kann ich es mir vorstellen, dass es ein paar Milisekunden länger dauert bis das Javascript abgearbeitet wurde und das richtige Anchor Element zum Verlinken gefunden wurde.
hallo,
im ersten codefenster (wo die links sind) bei
Link
nach b3 ein anführungszeichen einfügen. sonst ist dort kein link 🙂
mfg
Gutes Auge 🙂 Ist verbessert.