Tom: Eine einzige Grafik anstatt vieler

Beitrag lesen

Hello,

Anstatt viele kleine Grafiken einzubinden/zu laden wird häufig eine Technik eingesetzt, bei der nur eine einzige Grafik geladen wird, auf der sich alle diese erforderlichen Minibilder befinden.

Hier etwa ein Beispiel aus Google Maps

http://maps.google.com/mapfiles/hpimgs12.png

Auf dieser Grafik befinden sich viele kleine Piktogramme, die dann im Browser einzeln/ausgeschnitten dargestellt werden. Der Vorteil ist offensichtlich, weil das Laden einer einzigen Grafik vermutlich schneller ist und wohl vom Browser auch schneller gerendert wird.

Aber jetzt meine Fragen: Wie nennt sich diese Technik? Wie ist sie realisierbar?

Interessante Sache. Kannte ich auch noch nicht bisher.

----

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title>clip</title>
    </head>

<body>
        <div>
            <img src="hpimgs12.png" alt="Sammelbild" style="">
        </div>

<div style="position:absolute; top:150px; left:150px; clip:rect(0px, 25px, 20px, 4px);">
            <img src="hpimgs12.png" alt="Sammelbild" style="">
        </div>

<div style="position:absolute; top:150px; left:150px; clip:rect(0px, 45px, 20px, 20px);">
            <img src="hpimgs12.png" alt="Sammelbild" style="">
        </div>

<div style="position:absolute; top:180px; left:100px; clip:rect(0px, 87px, 20px, 66px);">
            <img src="hpimgs12.png" alt="Sammelbild" style="">
        </div>
    </body>
</html>

Funktioniert aber nicht im IE 6.0. Das liegt aber wohl am png, dass er das nicht verknusen kann.
Wie man aber die ausgesschnittenen Bildchen dann am geschicktesten gezielt plaziert, ist mir noch nicht ganz klar.

Liebe Grüße aus dem Cyberspace

Tom vom Berg

--
Nur selber lernen macht schlau
http://bergpost.annerschbarrich.de