ich habe ein Script für Zufallsbilder (siehe unten).
Statt Zufallsbild möchte ich jedoch jetzt einen Bilderwechsel machen, d. h. onclick mit „Vorwärts“ zu Bild1, Bild2, Bild3 springen und natürlich auch mit „Zurück“ auch wieder rückwärts und zu „Erstes Bild“ und „Letztes Bild“. Und der Bildtitel soll jeweils mit wechseln.
Bis jetzt habe ich im Netz nichts Anständiges gefunden.
Vielleicht hat jemand einen Tipp oder gleich ein Script für mich.
Danke im voraus
Sarah
\<!--
// erzeugt Zufallszahl kleiner gleich Bilderanzahl
today=new Date();
jran=today.getTime();
var anzahl = 5; // Anzahl der Bilder
var random\_number="";
var image="";
var text\_color="";
ia=9301;
ic=49297;
im=233280;
jran = (jran\*ia+ic) % im;
random\_number = Math.ceil( (jran/(im\*1.0)) \* anzahl);
// lädt ein Image abhängig von der Zufallszahl
if (random\_number==1) {
text\_color="000000";
image="images/bild-1.jpg";
text="Bild 1"
}
if (random\_number==2) {
text\_color="#000000";
image="images/bild-2.jpg";
text="Bild 2"
}
if (random\_number==3) {
text\_color="#000000";
image="images/bild-3.jpg";
text="Bild 3"
}
if (random\_number==4) {
text\_color="#000000";
image="images/bild-4.jpg";
text="Bild 4"
}
if (random\_number==5) {
text\_color="#000000";
image="images/bild-5.jpg";
text="Bild 5"
}
function zufallsbild() {
document.write("\<img src='" + image + "' width='300' border='1' alt='" + text + "'\>\<br\>\<br\>")
document.write("\<font color=#" + text\_color +"'\>" + text + "\</font\>\<br\>")
return
}
// --\>
\<!--
zufallsbild();
//--\>
Mit PHP wärs viel einfacher, aber mit Javascript sollte es ungefähr so gehen:
var isNN,isIE;
var anzahl = 5; // Anzahl der Bilder
var num = 0;
var image = "";
if (parseInt(navigator.appVersion.charAt(0))\>=4){
isNN=(navigator.appName=="Netscape")?1:0;
isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;
}
function showImage() {
image="images/bild-"+num+".jpg";
text="Bild "+num;
if (isIE) {
document.images[0].src = image;
} else if (isNN) {
document.images["pic0"].src = image;
}
}
function nextImage() {
if (num \< anzahl) {
num++;
}
showImage();
}
function prevImage() {
if (num \> 0) {
num--;
}
showImage();
}
Allerdings klappt das mit dem Bildtext nicht so ganz. In der obigen Testdatei erscheint jedenfalls nichts. Außerdem hätte ich gerne individuelle Bildtitel, also nicht Bild 1, Bild 2, etc. (die habe ich in meinem Beispielscript nur als Variablen genommen).
Was mir noch aufgefallen ist: Wenn man die Datei aufruft und - aus welchem Grund auch immer - gleich auf zurück klickt, gibt’s natürlich kein Bild, stattdessen nur das hübsche rote Kreuzchen
Nicht zuletzt hätte ich gerne noch einen „Erstes Bild“ + „Letzes Bild“ Button.
Allerdings klappt das mit dem Bildtext nicht so ganz. In der
obigen Testdatei erscheint jedenfalls nichts. Außerdem hätte
ich gerne individuelle Bildtitel, also nicht Bild 1, Bild 2,
etc. (die habe ich in meinem Beispielscript nur als Variablen
genommen).
das ist deshalb, weil ich den Bildtext im Skript nur ansatzweise integriert hatte.
Was mir noch aufgefallen ist: Wenn man die Datei aufruft und -
aus welchem Grund auch immer - gleich auf zurück klickt,
gibt’s natürlich kein Bild, stattdessen nur das hübsche rote
Kreuzchen
du hast kein Bild mit Namen wsi-0.jpg, die Bilder fangen bei Dir bei wsi-1.jpg an. Das ist im Skript unterhalb nun berücksichtigt.
Nicht zuletzt hätte ich gerne noch einen „Erstes Bild“ +
„Letzes Bild“ Button.
np:
var isNN,isIE;
var anzahl = 5; // Anzahl der Bilder
var num = 0;
var image = "";
var pictext = "";
if (parseInt(navigator.appVersion.charAt(0))\>=4){
isNN=(navigator.appName=="Netscape")?1:0;
isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;
}
function showImage() {
image="images/2002bestof"+num+".jpg";
switch(num) {
case 1: pictext = "Dies ist Bild 1"; break;
case 2: pictext = "Eine andere Beschreibung für Bild 2"; break;
default: pictext = "Bild "+num;
}
if (isIE) {
document.images[0].src = image;
document.images[0].title=pictext;
document.images[0].alt=pictext;
} else if (isNN) {
document.images["pic0"].src = image;
document.images["pic0"].title = pictext;
document.images["pic0"].alt = pictext;
}
}
function nextImage() {
if (num \< anzahl) {
num++;
}
showImage();
}
function prevImage() {
if (num \> 1) {
num--;
}
showImage();
}
function lastImage() {
num = anzahl;
showImage();
}
function firstImage() {
num = 1;
showImage();
}
showImage();
NB:
um Die Bildbeschreibungen zu ergänzen musst Du natürlich das Switch in der Funktion showImage erweitern und weitere CASE für die entsprechende Bildnummer hinzufügen, sonst springt das Skript in den default-Zweig und es heißt wieder „Bild x“.
switch(num) {
case 1: pictext = "Dies ist Bild 1"; break;
case 2: pictext = "Eine andere Beschreibung für Bild 2"; break;
case 3: pictext = "Bild 3 sollten Sie auch gesehen haben"; break;
case ....
default: pictext = "Bild "+num;
}
