Frage von Rindula, 49

Javascript | JQuery | Wie kann ich ein Bild damit "zuschneiden"?

Hallo,

ich habe ein Bild, das mehrere Icons enthält. Ich möchte jetzt aber nur ein Icon davon angezeigt bekommen.

Beispiel: Icon liegt bei X=20 Y=40 und ist W=20 H=10.

Ich hab bisher noch nichts gefunden... Wäre schön wenn einer weiter weiss ^^

Danke schonmal

Rindula

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von Dory1, 31

JavaScript brauchst du dafür nicht:

html

<span class="dein-icon"></span>

css

.dein-icon {
display: inline-block;
background-image: url("icon.png");
background-position: -20px -40px;
width: 20px;
height: 10px;
}
Kommentar von Rindula ,

Genau... so war das... Ich denk auch immer zu kompliziert, Danke sehr ^^

Antwort
von TanteHolger, 28

Hi,
hier ein Anstoß in die richtige Richtung.
Zuerst ein Div wie folgt erstellen,

<div id="current_icon" class="icons" style="background-position:20px 40px;"></div>

in der CSS folgendes,

.icons{width:20px; height:10px; line-height:10px; vertical-align:middle; background:url(/style/images/smile/smile.png);}

die URL in Background einfach anpassen.
Jetzt sollte zumindest das Icon welches Du angegeben hast angezeigt werden.

Alle weiteren Icons kannst Du dann mit mit der CSS KLasse von jQuery anhand der ID im Div anzeigen lassen.
http://api.jquery.com/css/ das ist dann alles nur noch Mathematik =)

Gruß: Holger

Keine passende Antwort gefunden?

Fragen Sie die Community