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 ? |
|
|
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" > </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
|
|
|
|
|
Cihan
Dabei seit: 11.06.2008
Ort: Hamburg
Alter: 38
Geschlecht:
|
Verfasst So 07.08.2011 14:07
Titel
|
|
|
Mit HTML und CSS alleine ist das imo nicht umsetzbar, da wird JavaScript faellig. Allerdings habe ich die HTML5-Moeglichkeiten noch nicht ausgeleuchtet.
|
|
|
|
|
Anzeige
|
|
|
ron32
Threadersteller
Dabei seit: 06.08.2011
Ort: Bruchsal
Alter: 51
Geschlecht: -
|
Verfasst So 07.08.2011 22:55
Titel
|
|
|
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
|
|
|
|
|
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
Verfasst Mo 08.08.2011 00:59
Titel
|
|
|
Java ist nicht Javascript.
|
|
|
|
|
ron32
Threadersteller
Dabei seit: 06.08.2011
Ort: Bruchsal
Alter: 51
Geschlecht: -
|
Verfasst Do 11.08.2011 17:22
Titel
|
|
|
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
|
|
|
|
|
|
|
|
Ä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
|
|