WebWork Magazin - Webseiten erstellen lassen, Online Medien, html

Webhoster, Webhosting Provider und Domain registrieren

Home | Registrieren | Einloggen | Suchen | Aktuelles | GSL-Webservice | Suleitec Webhosting
Reparatur-Forum | Elektro forum | Ersatzteilshop Haushalt und Elektronik



Im Homepage und Webhosting-Forum --- mehrere grafiken nacheinander mit einem onclick austauschen

HTML, XHTML, CSS , style, XML, Javascript und mehr, Fragen, Tipps und Anregungen zu diesen Basic Techniken - hier rein !

Forum » HTML, CSS - Hilfe für das Erstellen einer Homepage » mehrere grafiken nache... - 21 Nov 2024 Antworten
mehrere grafiken nacheinander mit einem onclick austauschen
diwie
Otto-Normal-Poster
Threadstarter




Beiträge: 51

ich möchte mit dem onclick-event eine grafik auf der seite austauschen. zur verfügung dafür habe ich zwei links, z.b. pfeile für "vor" und "zurück". bei nur zwei bildern komme ich noch klar. jetzt habe ich aber 10 bilder, die je nach klick auf "vor" oder "zurück" angezeigt/ausgetauscht werden sollen.
ich konnte irgendwie noch keine einfache lösung mit php und js finden und hoffe auf euren erfahrungsschatz. vielleicht hatte ja jemand von euch schon mal ein ähnliches problem.

mfG
diwie

  Profil   Editieren   Zitieren
subjective
Forenheld




Beiträge: 844

Du mußt dir in JS halt merken welche Grafik gerade aktiv ist und dann zu nächsten wechseln.

Mal so als Ansatz (ungetestet):
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41:
var arr_files = new Array();
arr_files[0]         = 'pics/pic1.gif';
arr_files[1]         = 'pics/pic2.gif';
arr_files[2]         = 'pics/pic3.gif';
arr_files[3]         = 'pics/pic4.gif';

var current_file = new Array();

function switchpic(index, imgname) {
  if (document.images) {
    document.images[imgname].src = arr[index].src;
  }
}

function nextpic(imgname) {
  if (current_file[imgname] > 0) {
     current_file[imgname]++;
  } else {
     current_file[imgname] = 1;
  }
  if (current_file[imgname] >= arr_files.length) {
     current_file[imgname] = 0;
  }
  switchpic(current_file[imgname], imgname);
}

function prevpic(imgname) {
  if (current_file[imgname] > 0) {
     current_file[imgname]--;
  } else {
     current_file[imgname] = arr_files.length-1;
  }
  switchpic(current_file[imgname], imgname);
}

arr = new Array()
for (var img in arr_files) {
  arr[img] = new Image();
  arr[img].src = arr_files[img];
}


---
Weaverslave

  Profil   Website   Editieren   Zitieren
diwie
Otto-Normal-Poster
Threadstarter




Beiträge: 51

vielen dank für die schnelle antwort!
also meine grafik die ich austauschen möchte ist definiert mit "name=portrait". wenn ich jetzt meinen link "vor" mit onclick="nextpic(portrait)" belege bekomme ich eine fehlermeldung in der zeile 11 deines listing ('document.images[...]' ist Null oder kein Objekt). sicher muß ich da auch noch etwas anpassen. da ich mich aber nicht allzu gut mit js auskenne, hoffe ich auf deine(eure) weitere hilfe. ;)

mfG
diwie

  Profil   Editieren   Zitieren
subjective
Forenheld




Beiträge: 844

Probier mal: onclick="nextpic('portrait')" - also mit Hochkommas.

---
Weaverslave

  Profil   Website   Editieren   Zitieren
diwie
Otto-Normal-Poster
Threadstarter




Beiträge: 51

vielen vielen dank für die hilfe, das war das problem.

ich habe das array füllen noch etwas abgeändert, läßt sich leichter anpassen :

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8:
x = 0;
var arr_files = new Array();
do{
    arr_files[x]= "images/about_portrait"+(x+1)+".gif"
    x++;
  }while(x<=10)


noch ein frage. kann ich die jeweils angezeigte bildnummer (x+1) noch irgendwie an php o.ä. übergeben, um eine anzeige wie in etwas "bild x von 10" zu realisieren?!

  Profil   Editieren   Zitieren
subjective
Forenheld




Beiträge: 844

Nein das macht keinen Sinn. Definiere ein
1
für die Zahl und setzte diesen dann mittels JS.

Als Ansatz (Zahl mußt du natürlich an der richtigen Stelle aus Variablen zusammenbauen):
1:
document.getElementById('bildnummer').innerHTML = zahl;


---
Weaverslave

  Profil   Website   Editieren   Zitieren
diwie
Otto-Normal-Poster
Threadstarter




Beiträge: 51

nochmals besten dank für die kompetente hilfe. meine probleme konnten so gelöst werden. ;)

  Profil   Editieren   Zitieren
 

Antworten
Forum » HTML, CSS - Hilfe für das Erstellen einer Homepage » mehrere grafiken nache...

Aktuelle Beiträge zur Hilfe im Forum für Homepage - mehrere grafiken nacheinander mit einem onclick austauschen im Forum Homepage Hosting AntwortenLetztes Posting
Unvorhersehbare Layout-Verschiebungen auf meiner Seite - Ideen?
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
0 20.08.2023 20:14 von Freud
Geschenkidee zum Geburtstag
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
2 14.04.2022 16:08 von bryleth03
Webdesigner gesucht
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
2 10.12.2021 15:04 von Rieke
Welcher Hoster ist der Beste?
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
1 10.12.2021 15:02 von Rieke
Warum Wordpress?
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
6 05.07.2021 18:27 von Rieke
Die Idee einen Blog zu führen
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
2 27.02.2021 09:50 von Samira2021
zu viele css dateien?!
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
4 19.01.2021 19:20 von Laurena
WIe kann ich Datum ausblenden?
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
1 23.11.2020 12:21 von noahradar96
Tabelle mit Mannschaftslogos
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
3 23.10.2019 14:54 von andyy
Eigene Website erstellen - kostenlos!
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
0 17.05.2019 15:01 von Fusselchen



Besucher : 8126453    Heute : 371     Gestern : 463     Online : 96     21.11.2024    12:32      0 Besucher in den letzten 60 Sekunden        
Nach oben