Der Aufkleber (oder Band) sind die Bilder, die sich in der oberen rechten Ecke oder oben links, und sie bilden gemeinsam eine Band Winkel. Es gibt verschiedene Arten, von einfachen Bildern zu den schönsten Flash-Filme. Manchmal sind sie so konzipiert, um ihre Position auch bei navigieren Sie den Inhalt des Browser-Fenster.
Wenn Sie nicht möchten, dass sich auf Dienstleistungen wie QuickRibbon.com, sondern wollen ein Band der eigenen, hier sind 3 einfachen Schritten zu folgen.
1. Wir schaffen das Bild
Zunächst erstellen wir das Bild, das wollen wir in einer Ecke, links oder rechts. Das Bild unten, bis 163x163 Pixel, ecostruita auf der oberen linken Ecke.
Um die volle Wirksamkeit der Überschneidung muss sich bei der Rettung, ein Format, das Transparenz, wie GIF oder PNG.
2. Der HTML-Code
Gespeicherte unser Image können wir es in unseren Seiten, die Umhüllung der das img mit einem div die Sie verwenden können, um das Bild in:
HTML: > <img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0" > </div> <div class = "ribbon"> <img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0"> </ div>
Wenn unsere Aufkleber sollte ein Link, wir können den map um einen sensiblen Bereich, ist nicht rechteckig. Die Aufkleber, die in diesem Beispiel, in der Tat, Sie haben eine Neigung und Transparenz zeigt perfekt die Konturen. Es wäre daher unangemessen, lassen klicken Sie auf einen leeren Bereich, indem ein Tag a introno Bild. Dann haben wir mit dieser Syntax:
HTML: > <img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0" usemap = "#ribbonlink" > </div> <div class = "ribbon"> <img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0" usemap = "#ribbonlink"> </ div> > <area shape = "poly" coords = "163,0,0,163,0,129,129,0" href = "http://undolog.com" > </map> <map name = "ribbonlink"> <area Form = "poly" Coords = "163,0,0163,0129129,0" href = "http://undolog.com"> </ map>
Das Attribut coords area definiert die Koordinaten unserer Band.
3. der CSS
Nun fügen wir die Definitionen der Stile, die zulassen, dass unsere Aufkleber auf Ihrer Seite zu positionieren sie richtig:
CSS: div.ribbon (
; position: absolute;
top: 0px; left: 0px;
height: 163px; width: 163px;
;padding: 0 ; margin: 0; padding: 0;
; overflow: visible;
; float: none;
} z-index: 10000)
div.ribbonimg (
;padding: 0 ;margin: 0 ; border: 0; padding: 0; margin: 0;
} background-image: none)
Wenn wir wollen, dass die Band zu bleiben "stecken" in der Video-, auch beim Scrollen Sie das Fenster, nur die Art absolute Stil position im fixed
CSS: div.ribbon (
; Position: fixed;
top: 0px; left: 0px;
height: 163px; width: 163px;
;padding: 0 ; margin: 0; padding: 0;
; overflow: visible;
; float: none;
} z-index: 10000)
Hinweis: die fixed die im Stil position bis vor kurzem war es nicht von allen Browsern unterstützt. Um die Wirkung, in der Tat, war gezwungen, eine JavaScript-Funktion, dass in regelmäßigen Abständen kontrolliert die Strömung von den möglichen Inhalt des Fensters und ersetzen das Band, um den Eindruck zu bleiben im Wesentlichen unbeweglich. Zum Glück, heute, mit einigen veralteten Version von Explorer, von allen Browsern unterstützt die Art fixed
Verwandte Post
