nicht angemeldet
changing jpgs instead of animated gifs
hi out there...
tüftel gerade an einer seite für einen freund und habe folgende idee und damit verbunden ein problem:
in einer <td> hab ich ein jpg-bild und dieses bild soll ausgetauscht
werden, und zwar durch 1 der folgenden möglichkeiten:
a.]
automatisch, quasi wie ein animiertes .gif, allerdings
müssen es jpgs sein wegen der besseren qualität!
oder
b.]
beim einmaligen laden wird das startbild gezeigt,
geht man mit der maus drüber kommt das nächste, geht man
mit der maus wieder runter kommt das nächste und das
wiederholt sich dann solange, bis der array oder was auch
immer [halt die existierende bildanzahl] zuende ist,
dann fängts wieder von vorne an.
---> mit nur 2 bildern kann man das ja einfach mit
mouseover/mouseout lösen, aber in diesem fall sind halt
3, 4 oder mehr bilder nacheinander zu zeigen..
was ich NICHT MÖCHTE ist ein reload der seite, iframes
benutzen und DHTML auch nicht, es sei denn es ist UNBEDINGT
notwendig.
any ideas?
ich nämlich leider nicht :-( ,
nora :-)
-
Mach wie du schon richtig gesagt hast ein Array mit den Sourcen von den Bildern.
Dann schmeißt du bei jedem MouseOver und MouseOut ein Event das eine Funktion aufruft die anhand eines globalen Zählers den Index des Arrays eins höher setzt. Aus dem Array dann den Pfad dem Bild zuweisen und fertig.Sinnvoll wäre evtl. noch ein Vorladen der Bilder, sonst dauerts immer ein bisschen bis das nächste Bild geladen wird.
-
ehrlich gesagt kann ich das ü.b.e.r.h.a.u.p.t. n.i.c.h.t. und hab gehofft, hier hat wer ein script parat.. du vielleicht?
wäre toll :-)kann nämlich nur basis-html :-(
-
Hallo, GirlFromParis,
so müsste es eigentlich gehen (überarbeitetes Skript mit Preload, s.u.) ...
Grüße,
Sebastian
<html>
<head><script language="JavaScript">
var picpath = "pix/";
var picname=new Array("p-1.jpg","p-2.jpg","p-3.jpg");
var index=0;function nextpic(img)
{
if(index>=picname.length)index=0;
img.src=picpath+picname[index];
index++;
// alert(index); // test
}function preloadimages()
{
var myimages=new Array();
for(i=0;i<picname.length;i++) {
myimages[i]=new Image();
myimages[i].src=picpath+picname[i];
// alert(myimages[i].src); // test
}
}</script>
</head>
<body onLoad="preloadimages();">
<img src="pix/p-3.jpg" onmouseover="nextpic(this)" onmouseout="nextpic(this)">
</body>
</html>
-
-
-
Hi,
in einer <td> hab ich ein jpg-bild und dieses bild soll ausgetauscht
werden, und zwar durch 1 der folgenden möglichkeiten:a.]
automatisch, quasi wie ein animiertes .gif, allerdings
müssen es jpgs sein wegen der besseren qualität!unterlasse so etwas bitte. Ich habe, wie viele andere auch, animierte Grafiken in meinem Browser unterbunden, *weil sie tierisch nerven*. Mit obigen Dingen umgehst Du diesen sinnvollen Schutz und *nervst dadurch tierisch*.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Du weisst doch gar nicht, warum das gemacht werden soll ...
-
-
Hallo Nora,
entweder habe ich dein Problem nicht verstanden, oder du siehst den Wald vor lauter Bäumen nicht.
Egal wie du den Bildertausch realisiseren willst (automatisch oder Mausaktion), ich würde mit folgendem JS-Codefragment anfangen:
var picname = new Array ("pic1.jpg", "pic2.jpg", "pic3.jpg", ... "picn.jpg");
var index = 0;function nextpic(img)
{ if (++index > picname.length)
index = 0;
img.src = picname[index];
}Dann noch zwei Eventhandler an das IMG-Element geknüpft, und die Sache müsste laufen:
<img src="pic1.jpg" alt="dynamic pic" onmouseover="nextpic(this)" onmouseout="nextpic(this)">Alternativ -für einen automatischen Ablauf- könntest du auch auf die beiden Eventhandler verzichten, und stattdessen bei der Initialisierung ein setTimeout("nextpic(document.images[n])", delay); hinzufügen. Dasselbe setTimeout() wiederholst du dann als letzte Anweisung innerhalb der function.
Vielleicht hab ich jetzt den einen oder anderen kleinen Bug in den genannten Code-Schnipseln, aber die Marschrichtung wird hoffentlich klar.
Viel Erfolg & gute Nacht,
Martin
-
hallo martin,
hoffe, du hast dort keinen fehler gemacht, den ich würd den nicht erkennen, kann das leider überhaupt nicht :-(
danke für die hilfe ! wenns klappt, hast du mir sehr geholfen!
-
Hallo,
hoffe, du hast dort keinen fehler gemacht, den ich würd den nicht erkennen, kann das leider überhaupt nicht :-(
Hmm, schlechte Voraussetzung!
Einen Fehler habe ich allerdings schon gesehen:
{ if (++index > picname.length)
muss heißen
{ if (++index >= picname.length)Davon abgesehen habe ich einige Variablennamen nur als Platzhalter gesetzt, die du noch durch sinnvolle Angaben ersetzen müsstest. Es lohnt sich daher schon, wenn du dich mal mit den Grundlagen von Javascript beschäftigst.
So long,
Martin
-
hab das jetzt so und es geht auch BIS AUF nicht in der reihe seiende bilder ... eigentlich sollte ja 3-1-2-3-1-2-3-1-2-3 kommen, aber
es kommt 3-1-3-2-1-3-2-1...und dann gehts erst, also das erste mal mouseover und out ist falsch ... hmmmm..hast du da eine idee? ansonsten sehr dankbar, denn super!
<html>
<head>
<title>New document</title>
<script language="JavaScript">
var picname = new Array ("pix/p-1.jpg","pix/p-2.jpg","pix/p-3.jpg");
var index = 0;function nextpic(img)
{ if (++index >= picname.length)
index = 0;
img.src = picname[index];
}
</script><meta name="generator" content="TSW WebCoder">
</head><body>
<img src="pix/p-3.jpg" onmouseover="nextpic(this)" onmouseout="nextpic(this)"></body>
</html>-
ach ich blöd ... reihenfolge geändert und alles ist super!
KUSS !!!
DANKE !!!!
-
-
-
-