nicht angemeldet
Dynamische Buttons - Script-Vereinfachung
StruppiHallo,
ich bräuchte für meine Seite ein Script zum dynamischen Bilder-Wechsel, genau wie hier bei selfHTML auch in den Anwendungsbeispielen beschrieben:
http://de.selfhtml.org/javascript/beispiele/buttons.htm#quelltext
Das Problem dabei ist, dass es bei mir mehr als nur drei Buttons sind. Soviel mehr, dass das Script ziemlich lang werden würde wenn ich jedes Bild dort initialisieren müsste.
Eine Vereinfachung hat offline wunderbar geklappt:
function Bildwechsel (Datei, Name) {
Bildobjekt = "grafiken/navi/" + Datei;
window.document.images[Name].src = Bildobjekt;
}
<a href='index.php' onmouseover='Bildwechsel("index-pressed.jpg","index")' onmouseout='Bildwechsel("index.jpg","index")'><img src='grafiken/navi/index.jpg' class='link' name='index'></a>
Online dann allerdings nicht mehr.
Kann mir hier jmd helfen?
Wie kann man das Script so umgestalten das ich nicht für jede Grafik zwei Zeilen in JavaScript notieren muss?
-
Wie kann man das Script so umgestalten das ich nicht für jede Grafik zwei Zeilen in JavaScript notieren muss?
Auch wenn ich sowas heute nicht mehr machen würde, das läßt sich viel besser mit CSS lösen, halte ich meine mouseover Variante für einfacher, da musst du keinen JS Code in deinen HTML einbauen die Bilder bekommen einfach ein CSS Klasse.
Struppi.
--
Javascript ist toll (Perl auch!)-
Eindeutig eleganter, aber auch mit JS ;-)
-
Auch wenn ich sowas heute nicht mehr machen würde, das läßt sich viel besser mit CSS lösen
Also geht das Ganze auch mit reinem CSS?
Das wär mir um einiges lieber, da ich mich mit JavaScript nur rudimentär auskenne und immer ein schlechtes Gefühl habe, wenn ich sowas einbinde ...Nur, wie würde es denn mit CSS funktionieren ...?
-
hi,
Nur, wie würde es denn mit CSS funktionieren ...?
http://1ngo.de/web/bildwechsel.html
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
hi,
Nur, wie würde es denn mit CSS funktionieren ...?
http://1ngo.de/web/bildwechsel.html
gruß,
wahsagahmm, auch dafür bräuchte ich etliche Einträge.
Es sind allein 12 buttons auf der Startseite,
da ist die JavaScript Lösung dann wohl doch weniger umständlich..?-
hmm, auch dafür bräuchte ich etliche Einträge.
Es sind allein 12 buttons auf der Startseite,
da ist die JavaScript Lösung dann wohl doch weniger umständlich..?Kommt drauf an, was die Buttons darstellen sollen. Üblicherweise haben sie einen Text auf einen Hintergrund. Besser ist es einen Text zu nehmen und immer den gleichen Hintergrund (ohne Text) zu benutzen, dann kommst du mit wenigen Zeilen CSS aus und hast wesentlich mehr Gestaltungsmöglichkeiten.
Ein Klassiker wie man sowas mit CSS gestalten kann sind die Beispiele auf listamatic (1&2) dort sind auch einige mit einem :hover Effekt.
Struppi.
--
Javascript ist toll (Perl auch!)-
Kommt drauf an, was die Buttons darstellen sollen. Üblicherweise haben sie einen Text auf einen Hintergrund. Besser ist es einen Text zu nehmen und immer den gleichen Hintergrund (ohne Text) zu benutzen, dann kommst du mit wenigen Zeilen CSS aus und hast wesentlich mehr Gestaltungsmöglichkeiten.
Hm, leider handelt es sich um reine Grafik-Buttons.
Also 24 verschiedene nicht vereinfachbare Grafiken bzw. 12 Buttons mit 12 hover-Buttons ...-
Hm, leider handelt es sich um reine Grafik-Buttons.
Also 24 verschiedene nicht vereinfachbare Grafiken bzw. 12 Buttons mit 12 hover-Buttons ...Jaja, so hat man's früher gemacht. Hat aber eine Menge Nachteile und kaum Vorteile es so zu machen.
Struppi.
--
Javascript ist toll (Perl auch!)
-
-
-
-
-
-
-
Du kannst über eine for-Schleife die Bilder im Voraus laden. Dazu gibst du den Dateien einen Namen wie hilitedPic_1.jpg,normalPic_1.jpg.
Dann irgendwie so:
for (var idx=1;idx<Bilderanzahl;id++) {
Bildobjekt = "grafiken/navi/hilitedPic_" + idx +".jpg;
Bildname = hilitedPic_" + idx;
window.document.images[Bildname].src = Bildobjekt;
}Für den Bildtausch übergibst du der Funktion zum Bilderwechsel einfach den Namen der akutellen Datei und machst aus hilitedPic_1.jpg dann normalPic_1.jpg bzw. umgekehrt.