Image Sprites
Statt drei Bilder zu verwenden, wir verwenden ein Bild ("Bilder/imageSprites.png"): Mit CSS wir können Teile eines Bildes verwenden die wir gerade benötigen. Im folgenden Beispiel verwenden wir Teile vom Bild "Bilder/imageSprites.png":
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #Javascript-Logo { |
| width: 200px; |
| height: 150px; |
| background: url(Bilder/CSS-imageSprites.png) 0 0; |
| display: block; |
| margin: 0 auto; |
| } |
| #HTML-Logo { |
| width: 200px; |
| height: 150px; |
| background: url(Bilder/CSS-imageSprites.png) 200px 0; |
| display: block; |
| margin: 0 auto; |
| } |
| #CSS-Logo { |
| width: 200px; |
| height: 150px; |
| background: url(Bilder/CSS-imageSprites.png) 400px 0; |
| display: block; |
| margin: 0 auto; |
| } |
| </style> |
| </head> |
| <body> |
| <h2 style="text-align: center">Image-Sprites</h2> |
| <img id="HTML-Logo" src="Bilder/CSS-imageSpritesTransp.png" width="1" height="1"> |
| <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. |
| Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. |
| Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. |
| Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. |
| Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. |
| Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. |
| Aliquam lorem ante, dapibus in, viverra quis, feugiat a, |
| </p> |
| <img id="CSS-Logo" src="Bilder/CSS-imageSpritesTransp.png" width="1" height="1"> |
| <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. |
| Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. |
| Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. |
| Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. |
| Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. |
| Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. |
| Aliquam lorem ante, dapibus in, viverra quis, feugiat a, |
| </p> |
| <img id="Javascript-Logo" src="Bilder/CSS-imageSpritesTransp.png" width="1" height="1"> |
| </body> |
| </html> |
Image Sprites-Leiste
Wir möchten verwenden das Sprite-Image ("Bilder/CSS-imageSpritesForNavi.png") für eine Navigationsleiste. Wir verwenden eine HTML-Liste, weil ein Link unterstützt auch ein background image:
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #navlist { |
| position: relative; |
| } |
| #navlist li { |
| margin: 0; |
| padding: 0; |
| list-style: none; |
| position: absolute; |
| top: 0; |
| } |
| #navlist li, #navlist a { |
| height: 60px; |
| display: block; |
| } |
| #CSS-Logo { |
| left: 0px; |
| width: 100px; |
| background: url('Bilder/CSS-imageSpritesForNavi.png') 0px 0; |
| } |
| #HTML-Logo { |
| left: 140px; |
| width: 100px; |
| background: url('Bilder/CSS-imageSpritesForNavi.png') -100px 0; |
| } |
| #Javascript-Logo { |
| left: 280px; |
| width: 100px; |
| background: url('Bilder/CSS-imageSpritesForNavi.png') -200px 0; |
| } |
| </style> |
| </head> |
| <body> |
| <ul id="navlist"> |
| <li id="CSS-Logo"><a href="CSS-Einführung.htm"></a></li> |
| <li id="HTML-Logo"><a href="index.htm"></a></li> |
| <li id="Javascript-Logo"><a href="js.htm"></a></li> |
| </ul> |
| </body> |
| </html> |
Aufgrund des Einzel-Bild(nicht 6 Bild-Dateien), gibt es beim Laden keine Verzögerung.
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #navlist { |
| position: relative; |
| } |
| #navlist li { |
| margin: 0; |
| padding: 0; |
| list-style: none; |
| position: absolute; |
| top: 0; |
| } |
| #navlist li, #navlist a { |
| height: 60px; |
| display: block; |
| } |
| #CSS-Logo { |
| left: 0px; |
| width: 100px; |
| background: url('Bilder/CSS-imageSpritesHovern.png') 0px 0; |
| } |
| #HTML-Logo { |
| left: 140px; |
| width: 100px; |
| background: url('Bilder/CSS-imageSpritesHovern.png') -100px 0; |
| } |
| #Javascript-Logo { |
| left: 280px; |
| width: 100px; |
| background: url('Bilder/CSS-imageSpritesHovern.png') -200px 0; |
| } |
| #CSS-Logo a:hover { |
| background: url('Bilder/CSS-imageSpritesHovern.png') 0px -60px; |
| } |
| #HTML-Logo a:hover { |
| background: url('Bilder/CSS-imageSpritesHovern.png') -100px -60px; |
| } |
| #Javascript-Logo a:hover { |
| background: url('Bilder/CSS-imageSpritesHovern.png') -200px -60px; |
| } |
| </style> |
| </head> |
| <body> |
| <ul id="navlist"> |
| <li id="CSS-Logo"><a href="CSS-Einführung.htm"></a></li> |
| <li id="HTML-Logo"><a href="index.htm"></a></li> |
| <li id="Javascript-Logo"><a href="js.htm"></a></li> |
| </ul> |
| </body> |
| </html> |
