mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 19.04.2024 06:19 Benutzername: Passwort: Auto-Login

Thema: HTML : Navigations-Code bei Sprite-Bild ? vom 06.08.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> HTML : Navigations-Code bei Sprite-Bild ?
Autor Nachricht
ron32
Threadersteller

Dabei seit: 06.08.2011
Ort: Bruchsal
Alter: 51
Geschlecht: -
Verfasst Sa 06.08.2011 16:50
Titel

HTML : Navigations-Code bei Sprite-Bild ?

Antworten mit Zitat Zum Seitenanfang

Hallo liebe Profis,

ich bin ein blutjunger Anfänger in Sachen Html und bitte euch um Hilfe. Ich habe eine Bild-Datei dass aus mehreren einzelnen Fotos horizontal zusammen gesetzt ist und möchte das durch eine Tastaturabfrage navigieren können.
(1 Bilddatei besteht aus 10 einzelne Fotos zu je 160x120px horizontal zusammengefügt)

das hier habe ich bisher geschafft :

CSS :

Code:
   #image-link {
   width: 160px;
   height: 120px;
   text-decoration: none;
   display: block;
   background: url('http://xxx.jpg') 0 0;
   }

   #image-link:hover, #image-link:active {
   background-position: 160px 0;
   }


HTML :

Code:
    <a href="#" id="image-link" >&nbsp;</a><h2>auf das bild oben klicken</h2>



Ich möchte gerne diese Bilder so navigieren : (wie müsste ich die Code oben anpassen ?)

Taste [y] = vor Taste [x] = zurück Taste [c] = beenden

(anklickbare Links die die Fotoreihe aufruft, Fotorehe erscheint jedoch immer an einer einzigen Stelle mit fester Position)

Fotoreihe 1
Fotoreihe 2
Fotoreihe 3

usw ...

Da es nicht das einzige Bild in Spritetechnik werden soll und ich nicht bei jedem Bild diese Funktion extra schreiben möchte, wäre es nett wenn jemand diese Code gleich so korrigieren könnte dass ich diese nur einmal schreiben muss.
(es wäre in diesem Fall immer die gleiche Stelle die angezeigt werden soll und immer nur ein Bild gleichzeitig aktiv)

ich hoffe ihr verweist mich bitte nicht auf die vielen diashow-codes - ich habe sie teils auch probiert, aber es ist nicht das was ich suche und meine kenntnisse sind eher bescheiden wegem umschreiben. Würde mich über eure Hilfe freuen.

mfg
ron32


Zuletzt bearbeitet von ron32 am Sa 06.08.2011 17:10, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
Cihan

Dabei seit: 11.06.2008
Ort: Hamburg
Alter: 38
Geschlecht: Männlich
Verfasst So 07.08.2011 14:07
Titel

Antworten mit Zitat Zum Seitenanfang

Mit HTML und CSS alleine ist das imo nicht umsetzbar, da wird JavaScript faellig. Allerdings habe ich die HTML5-Moeglichkeiten noch nicht ausgeleuchtet.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
ron32
Threadersteller

Dabei seit: 06.08.2011
Ort: Bruchsal
Alter: 51
Geschlecht: -
Verfasst So 07.08.2011 22:55
Titel

Antworten mit Zitat Zum Seitenanfang

Mittlerweile habe ich auch gelesen dass einer kleiner Code Java nötig ist, weil Html und CSS keine Variablen kennen, und die braucht man ja oben, richtig ? nun, wie würde dann der Java-Script dann eingebunden aussehen ?
Wie Java-Code aussieht weiss ich, nur ich weiss nicht wie ich das mit meinem Programm machen soll.

grüsse
ron32
  View user's profile Private Nachricht senden
pantonine

Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
Verfasst Mo 08.08.2011 00:59
Titel

Antworten mit Zitat Zum Seitenanfang

Java ist nicht Javascript.
  View user's profile Private Nachricht senden
ron32
Threadersteller

Dabei seit: 06.08.2011
Ort: Bruchsal
Alter: 51
Geschlecht: -
Verfasst Do 11.08.2011 17:22
Titel

Antworten mit Zitat Zum Seitenanfang

Möchte mir keiner hier etwas schreiben ? Mir würde ja schon reichen wenn ich wüsste wie man durch JS eine neue Zahl (varuiable) im CSS zuweist und dessen Funktionsaufruf. Ich möchte JS nicht studieren sondern bin einfach gezwungen ein paar Zeilen JS im HTML/CSS hinzu zufügen weil es da keine Variable-Verarbeitung gibt.

css alt : background-position: 160px 0;

css neu : background-position: x + 160px 0; ??

und

html : wenn Mausklick auf Bildlink dann rufe Funktion yy auf

mfg
ron


Zuletzt bearbeitet von ron32 am Do 11.08.2011 17:40, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen HTML/CSS Code
HTML-Code
html code in div box schreiben
Fehler im HTML-Code, wo?
HTML code für Hintergrundbild
Eingeschlichener HTML-Code
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.