mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Fr 19.04.2024 20:23 Benutzername: Passwort: Auto-Login

Thema: Bild mit vielen kleinen Icons, wie in die Webseite einbinden vom 27.07.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Bild mit vielen kleinen Icons, wie in die Webseite einbinden
Autor Nachricht
intelinside
Threadersteller

Dabei seit: 27.07.2011
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 27.07.2011 11:29
Titel

Bild mit vielen kleinen Icons, wie in die Webseite einbinden

 Antworten mit Zitat Zum Seitenanfang
Hallo erstmal,

mir fehlen die Fachbegriffe was meine Frage angeht, deshalb konnte ich nicht wirklich im Forum danach suchen.
Ich Umschreibe es so gut es geht.

Erstmal ein Beipielbild:




Hier habe ich mehrere "Positionen" auf dem Bild. Wie macht man das ganze mit HTML, CSS, Javascript und Co. dass aus nur einer Bilddatei mehrere Positionen in den unterschiedlichsten Bereichen einer Webseite dargestellt werden können. Oder mit dem mouseover Effekt verschiedene Bereiche eines Bildes "angesprochen" und dadurch dargestellt werden.

Wäre euch sehr verbunden, wenn mit jemand mit den Fachbegriffen dienen und evtl. ein Tutorial aufzeigen könnte Lächel

Vielen lieben Dank im voraus
Intelinside
  View user's profile Private Nachricht senden
top
Moderator

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht: Männlich
Verfasst Mi 27.07.2011 11:49
Titel

Antworten mit Zitat Zum Seitenanfang
Mit den Suchbegriffen "css sprites" solltest du weiter kommen. *zwinker*
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Mi 27.07.2011 11:52
Titel

Antworten mit Zitat Zum Seitenanfang
Das nennt man Sprinte Images.

Ein Bsp

CSS
Code:

.foo {
  display:block;
  width:3em;
  height:3em;
  text-indent:-9999em;
}
  .login {
    background:transparent url(sprite.gif) 0% 0% no-repeat;
  }

  .login:hover {
    background:transparent url(sprite.gif) 0% 50% no-repeat;
  }


HTML
Code:

<a href="#" class="foo login">login button</a>


Zuletzt bearbeitet von Kash am Mi 27.07.2011 11:58, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
intelinside
Threadersteller

Dabei seit: 27.07.2011
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 27.07.2011 12:35
Titel

Antworten mit Zitat Zum Seitenanfang
Vielen Dank... diese Infos sollten vorerst ausreichen Lächel

Bei Fragen melde ich mich nochmal *gg*
  View user's profile Private Nachricht senden
 
Ähnliche Themen kleinen Texteditor in Webseite einbinden
pdf in Webseite einbinden
Video einbinden in Webseite
Dreamreaver -> FLV in webseite einbinden -> ?
Easyslider in Webseite einbinden...
Sound in Webseite einbinden
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB