Einführung

Folgendes Tutorial beschreibt von A bis Z, wie man einen Print-Link mit Rollover-Effekt auf eine TYPO3-Seite bringt. Als erstes benötigt man eine Grafik, die sowohl den normalen als auch den Mouse-Over Status des Print-Links enthält. Das ganze könnte z.B. so aussehen:

Um das erstellte Hintergrundbild zu verwenden, wird mit folgendem TypoScript-Snippet nun ein Link generiert, der per JavaScript das Drucken der Seite veranlasst:

// TypoScript, Setup
lib.printme = COA
lib.printme{
  10 = TEXT
  10.value ( 
    <a href="#" id="printme" 
    class="pngFix" onclick="javascript:window.print(); 
    return(false);"></a>
  )
}
 
// example for inserting the link
page.10.subparts.PRINTME  < lib.printme

Die CSS-Klasse .pngFix wird hier übrigens vergeben, um einen Bugfix für transparente PNG Bilder im IE6 anzuwenden. Nun müsseen nur noch dem generierten Link mit Hilfe der vergebenen CSS-ID "printme" die richtigen CSS-Eigenschaften zugewiesen werden:

#printme{
  background: url(../images/printme.png) 0px 0px;
  width: 100px;
  height: 60px;
  display: block;
}
 
#printme:hover{
  background: url(../images/printme.png) -100px 0px;
}

Wichtig ist, dass die Breite genau die Hälfte der Bildbreite (100px in diesem Fall) beträgt. Während des Hover-Ereignisses wird dann das Hintergrundbild um 100px nach links verschoben. Dies sorgt für den gewollten Rollover-Effekt.

Jetzt bookmarken: