C/C++ Forum :: Frage zu Bild laden bei onMouseover

Destiniy Mitglied 21:56:04 28.12.2011 Titel:

Hallo Leute,

ich habe mir folgendes Script gebaut um Bilder aus einem Array neu zu laden wenn man mit der Mouse über eine kleinere Vorschau geht. Das aussehen kann erst mal ignoriert werden

Leider funktioniert es nicht (Bild wird nicht verändert) und ich weiß nicht in welcher richtung ich nach dem Fehler schauen soll.

Vielleicht habt ihr ja einen Tip?

PHP Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17	1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17	if (0 < $p) { $q = 0; echo"<tr><td class='akt-body' width='5'> </td>\r\n"; $pic = substr($filenames[$i],0,strlen($filenames[$i])-4); echo"<td class='akt-body'><center><img src='img/results/$pictures[$q]' name=\"$pic\"><br></center></td>\r\n"; echo"<td class='akt-body' width='5'> </td></tr>\r\n"; echo"<tr><td class='akt-body' width='5'> </td>\r\n"; echo"<td class='akt-body'><center>\r\n"; do { echo"<IMG onMouseOver=\"document.$pic.src='img/results/$pictures[$q]';\" height='82' width='124' src='img/results/$pictures[$q]' border='0'>"; echo $pictures[$q++]; } while ($q<$p); echo"<br></center></td>\r\n"; echo"<td class='akt-body' width='5'> </td></tr>\r\n"; }

PHP Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17	if (0 < $p) { $q = 0; echo"<tr><td class='akt-body' width='5'> </td>\r\n"; $pic = substr($filenames[$i],0,strlen($filenames[$i])-4); echo"<td class='akt-body'><center><img src='img/results/$pictures[$q]' name=\"$pic\"><br></center></td>\r\n"; echo"<td class='akt-body' width='5'> </td></tr>\r\n"; echo"<tr><td class='akt-body' width='5'> </td>\r\n"; echo"<td class='akt-body'><center>\r\n"; do { echo"<IMG onMouseOver=\"document.$pic.src='img/results/$pictures[$q]';\" height='82' width='124' src='img/results/$pictures[$q]' border='0'>"; echo $pictures[$q++]; } while ($q<$p); echo"<br></center></td>\r\n"; echo"<td class='akt-body' width='5'> </td></tr>\r\n"; }

PHP Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17	if (0 < $p) { $q = 0; echo"<tr><td class='akt-body' width='5'> </td>\r\n"; $pic = substr($filenames[$i],0,strlen($filenames[$i])-4); echo"<td class='akt-body'><center><img src='img/results/$pictures[$q]' name=\"$pic\"><br></center></td>\r\n"; echo"<td class='akt-body' width='5'> </td></tr>\r\n"; echo"<tr><td class='akt-body' width='5'> </td>\r\n"; echo"<td class='akt-body'><center>\r\n"; do { echo"<IMG onMouseOver=\"document.$pic.src='img/results/$pictures[$q]';\" height='82' width='124' src='img/results/$pictures[$q]' border='0'>"; echo $pictures[$q++]; } while ($q<$p); echo"<br></center></td>\r\n"; echo"<td class='akt-body' width='5'> </td></tr>\r\n"; }

eiskalt Mitglied 00:07:13 29.12.2011 Titel:

ich steig jetzt nicht ganz durch. Ist das dein PHP-Script?? Wenn ja wird das so nicht funktionieren weil der Mouseover-Befehl im Browser ausgeführt wird und dein PHP-Script nix davon mitkriegt. Wenn du willst das ein neues Bild geladen wird gibts mehrer Möglichkeiten:

1.) Du übergibst das Array an JavaScript und lädst dann daraus das Bild oder
2.) Du schickst einen Ajax Request an den Server und lässt dir ein neues Bild zurückgeben

LeGaN Mitglied 00:56:51 29.12.2011 Titel:

@eiskalt: Lies Dir mal seinen Code durch, er macht's schon richtig. Er vermischt nicht PHP und JS. Und warum Ajax verwenden, wenn's auch unkomplizierter geht?

@Destiniy: Zwei Dinge:

1. Die Bild-URL im onMouseOver-Event ist die gleiche wie bei src. Also würde beim onMouseOver-Event das selbe Bild angezeigt werden -> kein Unterschied sichtbar.

2. Wir wissen nicht, wie $pic aussieht, also wissen wir nicht, ob es da auch eine Fehlerquelle gibt. Probiers aber mal so:

Code:
onMouseOver="this.src='img/bla/blubb/neues_bild.abc';"

Code:
onMouseOver="this.src='img/bla/blubb/neues_bild.abc';"

Code:
onMouseOver="this.src='img/bla/blubb/neues_bild.abc';"

DaRe Mitglied 01:36:46 29.12.2011 Titel:

Probier mal auch lieber sowas:

C/C++ Code:
echo"<td class='akt-body'><center><img src='img/results/$pictures[$q]' name=\"$pic\"><br></center></td>\r\n"; ... echo"<IMG onMouseOver=\"document.getElementsByName('$pic')[0].src='img/results/$pictures[$q]';\" height='82' width='124' src='img/results/$pictures[$q]' border='0'>";

C/C++ Code:
echo"<td class='akt-body'><center><img src='img/results/$pictures[$q]' name=\"$pic\"><br></center></td>\r\n"; ... echo"<IMG onMouseOver=\"document.getElementsByName('$pic')[0].src='img/results/$pictures[$q]';\" height='82' width='124' src='img/results/$pictures[$q]' border='0'>";

C/C++ Code:
echo"<td class='akt-body'><center><img src='img/results/$pictures[$q]' name=\"$pic\"><br></center></td>\r\n"; ... echo"<IMG onMouseOver=\"document.getElementsByName('$pic')[0].src='img/results/$pictures[$q]';\" height='82' width='124' src='img/results/$pictures[$q]' border='0'>";

Ich dachte document.name etc. ist ein wenig veraltet?
Edit: ok, ist sogar von selfhtml.org so gemacht, aber ich würde trotzdem über getElementsByName, vllt hast du ja noch ein anderes Element mit dem gleichen Namen. Ist zwar auch nicht schön, aber da kannst ja auch noch gleich auf ID umsteigen und alles wirklich eindeutig benennen.

Was würde denn die Fehlerkonsole melden?
Edit: Die in Firefox. Vllt. sagt die ja schon, wo es happert.

Dein HTML kommt auch wie genau bei dir im Browser an?

Das Preloaden wäre auch interessant. Aber du musst selber wissen, ob dir die Mühe für diesen Feature wert ist.

Unregistrierter

wenn du ernsthaft webentwicklung betreiben willst, gebe ich dir nun ein paar gut gemeinte ratschläge:

1. benutze eine template engine. niemand erzeugt heute mehr mit echo und dergleichen html.
2. trenne javascript von html code. dann kannst du auch gescheit debuggen und musst nicht im forum fragen, wenn was nicht funktioniert.
3. wenn irgendwas nicht funktioniert, benutzt du zu aller erst den debugger deiner wahl (firebug, chrome dev tools). dort guckst du dir an, ob das html zur laufzeit richtig ist, ob die pfade der bilder stimmen und ob in der konsole irgenwelche javascript fehler fliegen.
4. wenn das alles nicht hilft, setzt du einen breakpoint im javascript. dann kannst du schritt für schritt nachvollziehen, was falsch läuft.

Unregistrierter

ach und übrigens: <center> ist deprecated in html4