onmouseover - Daten nachladen

[Brudertac]

Servus,

ich suche gerade nach einer Lösung für folgende Funktion:
(Server mit ASP)

Bei einem mouseover über ein Bild soll eine grosse Version des Bildes
auf der gleichen Seite nachgeladen und angezeigt werden.
(Ohne Reload der gesamten Seite)

Auf den ersten Blick würde ich einen Layer erstellen und diesen dann
bei mouseover anzeigen.
Leider kommen die Thumbnails und das grosse Bild aus einer Datenbank.
Kann man dem Layer sagen welches Bild er laden und anzeigen soll ?

Ich will eben nicht das gleich 20 Bilder geladen werden und dann bei
Mouseover das jeweilige angezeigt wird.

Ich hoffe ich hab das irgendwie verständlich rübergebracht :confused:

Danke und Gruss
Brudertac

[darph]

Da wirst du JavaScript/DOM und das XMLHttpRequest-Objekt (http://en.wikipedia.org/wiki/XMLHttpRequest) brauchen, sowie ein Script auf Serverseite, welches dann auf Anfrage das Bild liefert.

Eventuell hilft dir auch http://en.wikipedia.org/wiki/Ajax_%28programming%29

[PatkIllA]

Die BIlder haben doch eine "normale" URL?
dann gehtdas auch noch ohne das Request Objekt.
ich würde den Layer halt leer lassen und versteckt halten. Wenn jetzt das Bild angezeigt werden soll, dann änderst du den Inhalt des Layers mit innerHTML und schaltest ihn auf sichtbar.
Evtl kannst sogar schon alles in den Layer schreiben und die URL des Bildes auf ein kleines dummy Bild zeigen lassen und dann nur die URL des Bildes ändern.

[Brudertac]

Die BIlder haben doch eine "normale" URL?
dann gehtdas auch noch ohne das Request Objekt.
ich würde den Layer halt leer lassen und versteckt halten. Wenn jetzt das Bild angezeigt werden soll, dann änderst du den Inhalt des Layers mit innerHTML und schaltest ihn auf sichtbar.
Evtl kannst sogar schon alles in den Layer schreiben und die URL des Bildes auf ein kleines dummy Bild zeigen lassen und dann nur die URL des Bildes ändern.

Nein, die haben keine normale URL. Bislang rufe ich eine ASP Seite auf
und übergebe ein ID. Die ASP Seite "streamt" mir dann das Bild an den Browser.

[PatkIllA]

also <img src="http://server/image.asp?id=bla" alt="bla"/> ?

[Brudertac]

Da wirst du JavaScript/DOM und das XMLHttpRequest-Objekt (http://en.wikipedia.org/wiki/XMLHttpRequest) brauchen, sowie ein Script auf Serverseite, welches dann auf Anfrage das Bild liefert.

Eventuell hilft dir auch http://en.wikipedia.org/wiki/Ajax_%28programming%29

Eieiei. Das ist ziemliches Neuland für mich. Hast du eventuell eine
Beispielseite parat die sowas zeigt ? (als Howto o.ä.)

Mit Ajax hab ich schon rumprobiert allerdings bekomme ich da immer
eine Fehler zurück.
Könnte aber sein das sich die beiden Verfahren einfach nicht so einfach
verbinden lassen. (ASP Stream und Ajax)

[Brudertac]

also <img src="http://server/image.asp?id=bla" alt="bla"/> ?

Ganz genau !

[PatkIllA]

Das ist für den Browser eine normale URL.
Da brauchst du noch nicht mit AJAX anfangen.

[MadMan2k]

Nein, die haben keine normale URL. Bislang rufe ich eine ASP Seite auf
und übergebe ein ID. Die ASP Seite "streamt" mir dann das Bild an den Browser.
die URI dieser Seite ist hier mit "normale" URI gemeint. ein XmlhttpRequest hilft dir hier nicht weiter. Du muss nur mit DOM ein img Element mit src="uri_deiner_asp_seite" erzeugen und es dann ensprechend positionieren.

edit: Ajax ist halt hauptsächlich Hype

[Brudertac]

die URI dieser Seite ist hier mit "normale" URI gemeint. ein XmlhttpRequest hilft dir hier nicht weiter. Du muss nur mit DOM ein img Element mit src="uri_deiner_asp_seite" erzeugen und es dann ensprechend positionieren.

edit: Ajax ist halt hauptsächlich Hype

Hm, so ganz versteh ichs noch nicht aber das wird noch :smile:
Wird das dann erst bei Bedarf geladen ? (hm, muss ja eigentlich so sein)

[PatkIllA]

wenn der Browser die URL nirgendswo mitgeteilt bekommt, kann er es auch noch nicht laden. Auf unsichtbar schalten reicht leider nicht. Da wird das Bild gleich mitgeladen.

[PatkIllA]

<div id="meinLayer"><img id="meinBild" src="" alt="" /></div> in die Seite

wenn dann was passieren soll musst du in einem Script
document.getElementById("meinBild").src="http://server/bild.asp?id=x";
document.getElementById("meinLayer").style.visibility = "visible";
aufrufen

[Brudertac]

Ah, okay. Danke. Ich werd das morgen mal umsetzen und berichten. :smile:

[Brudertac]

<div id="meinLayer"><img id="meinBild" src="" alt="" /></div> in die Seite

wenn dann was passieren soll musst du in einem Script
document.getElementById("meinBild").src="http://server/bild.asp?id=x";
document.getElementById("meinLayer").style.visibility = "visible";
aufrufen

Hab jetzt einiges ausprobiert aber so richtig klappt das noch nicht.
Wenn ich die Reihenfolge ändere dann sehe ich den Layer aber ohne Inhalt.
Wenn ich die Reihenfolge so lasse passiert optisch gar nichts.

Auf jeden Fall kommt folgende Fehlermeldung die sich wohl auf
document.getElementById("meinBild").src="http://server/bild.asp?id=x";
bezieht:

Error:'document.getElementById(...)' ist Null oder kein Objekt

Ich vermute das er "meinBild" nicht finden kann ?
(Kann es sein das die beiden Änderungen nicht in einem Script ausführbar sind ?)

Danke für eure Hilfe.

Gruss
Brudertac

[PatkIllA]

Also bei mir geht es
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>title</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
#meinLayer {
visibility:hidden;
}
</style>
<script type="text/javascript">
function show (id) {
document.getElementById("meinBild").src="http://www.forum-3dcenter.org/vbulletin/image.php?u=" + id;
document.getElementById("meinLayer").style.visibility = "visible";
}
</script>
</head>
<body>
<p>
<a href="javascript:show(13271);">show</a><br/>
<a href="javascript:show(4333);">show</a>

</p>
<div id="meinLayer"><img id="meinBild" src="" alt="" /></div>
</body>
</html>

[Brudertac]

Grummel, hab nen Fehler im Quelltext gehabt den ich dauernd übersehen habe.
(Was so ein kleines " doch anrichten kann)
Funktioniert super !

Danke nochmal.

Gruss
Brudertac

[Brudertac]

Hallo Leute,

muss das ganze nochmal "Ausgraben".

Ich benutze das nun so wie oben beschrieben und habe auf meiner Seite
nun manchmal folgenden Umstand:

Die Seite ist je nach Inhalt recht lang so das man Scrollen muss um
den ganzen Inhalt zu sehen.
Wenn ich nun ganz am Ende der Seite den Mouseover starte wird mir
der Layer angezeigt jedoch sieht man ihn nicht weil er ja "ganz oben"
Positioniert ist.

Jetzt habe ich versucht die Position des Layers mittels
zur Position des Mauszeigers anzupassen:

document.getElementById("Bildvorschau").style.top=event.clientY;


Das ganze klappt auch solange ich nicht Scrollen muss.
Wenn ich aber herunterscrolle dann wird der Layer wieder zu hoch angezeigt.

Mir ist auch Klar das das so nicht anders gehen wird weil ja die Koordinate des Mauszeigers gleich bleibt
aber vielleicht habt Ihr eine Idee wie das gehen könnte.


Danke und Gruss
Brudertac

[MadMan2k]

event.page{X,Y}

[Brudertac]

Das wärs gewesen wenn die Seite nicht mit dem IE funktionieren müsste...
Keiner mehr ne Idee ?