nicht angemeldet
Mouseover erst bei Bedarf laden
Hallo Zusammen,
ich habe zu einem Gruppenbild der Musikkapelle mouseover-Effekte zu jeder einzelnen Person erstellt, so dass ein Foto zur Person in einem Bereich des Bildes dargestellt wird.
Problem: Beim Aufruf der Seite werden sofort alle Bilder geladen, auch die die nur bei mouseover erscheinen sollen, so dauert es sehr lange bis der Besucher das Gruppenbild zu sehen bekommt.
Kann man die Reihenfolge der Bilder angeben in der sie geladen werden sollen, oder kann man es einrichten daß die mouseover-Bilder nur geladen werden wenn die Maus über dem Bereich ist.
Vielen Dank für Eure Hilfe
Gruß Wolfgang
-
Hallo Zusammen,
ich habe zu einem Gruppenbild der Musikkapelle mouseover-Effekte zu jeder einzelnen Person erstellt, so dass ein Foto zur Person in einem Bereich des Bildes dargestellt wird.
Problem: Beim Aufruf der Seite werden sofort alle Bilder geladen, auch die die nur bei mouseover erscheinen sollen, so dauert es sehr lange bis der Besucher das Gruppenbild zu sehen bekommt.Ich warte jetzt schon zemlich lange, aber ein Gruppenbild sehe ich immer noch nicht. Dafür einen netten Mauseffekt über der leeren Map...
Kann man die Reihenfolge der Bilder angeben in der sie geladen werden sollen, oder kann man es einrichten daß die mouseover-Bilder nur geladen werden wenn die Maus über dem Bereich ist.
Wie wär´s mit einer Funktion, die auf MouseOver aktiviert wird:
function ZeigBild(dateiname)
{
bild = new Image();
bild.src = dateiname;
foto.src = bild.src;
}einbinden in die Map jeweils mit
onMouseOver="ZeigBild(foto/dasrichtigebild.jpg)"
Vielen Dank für Eure Hilfe
Gern geschehen.
Gruß Wolfgang
Gruß aus P. nach M.
HvA-
Danke für deine schnelle Antwort,
und erstmal Entschudigung, das Gruppenbild bzw. die Teile daraus hatte ich noch nicht hochgeladen.
Etwas besser funktioniert es jetzt schon aber die Bilder für die mouseovereffekte werden nach dem Gruppenbild geladen (OK) nur wenn der Besucher einen bestimmten mouseover aktivieren will, kann es sein daß erst die anderen 40 geladen werden und er lange warten muß.
Meine Programmierkenntnisse beschränken sich darauf zusammenkopieren und anpassen.
Was Du schreibst hört sich gut an, aber kannst Du es noch genauer sagen.function ZeigBild(dateiname)
{
bild = new Image();
bild.src = dateiname;
foto.src = bild.src;
}einbinden in die Map jeweils mit
onMouseOver="ZeigBild(foto/dasrichtigebild.jpg)"
Danke und Gruß Wolfgang
-
-
Moin!
Problem: Beim Aufruf der Seite werden sofort alle Bilder geladen, auch die die nur bei mouseover erscheinen sollen, so dauert es sehr lange bis der Besucher das Gruppenbild zu sehen bekommt.
Die Mouseover-Bilder werden aber ja nicht automatisch gleich geladen, sondern deshalb, weil irgendeine Art von Preload sie sofort lädt. Wenn du das rauswirfst (aber bitte schön selektiv: Ich mag es z.B., wenn Navigationsgrafiken sofort erscheinen, alles andere wirkt unprofessionell), dann lädt beim Start der Seite weniger.
Dazu mußt du dann aber auch die Mouseover-Bildwechselfunktion ändern (bzw. dann lieber zwei Funktionen haben). Wenn ein Bild nicht vorgeladen wurde, gibts für das Bild auch kein Image-Objekt (die Dinger, die durch new Image() erzeugt werden), du mußt also nur die src-Adresse des Bildes austauschen.
Oder du überarbeitest nochmal die Grafiken insgesamt und versuchst, kleinere Bilder (also weniger Dateigröße) herzustellen.
- Sven Rautenberg
-
Hallo Sven,
Danke für Deine Hilfe,
ich glaub einen direkten Preload-Befehl habe ich nicht.
Das mit der Adresse zum Bildaustauschen habe ich leider nicht verstenden.
Für eine kurze Erklärung wäre ich sehr dankbar.Dank und Gruß Wolfgang
-
Moin!
Danke für Deine Hilfe,
ich glaub einen direkten Preload-Befehl habe ich nicht.Das könnte daran liegen, weil <meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
Ich meinte mit dem Preload-Befehl aber genau dieses hier:
<script language="JavaScript">
<!--
var bild1 = new Image();
var bild2 = new Image();
// gekürzt, insgesamt 40 Definitionen
bild1.src="foto/alfons_goppel_1024.jpg";
bild2.src="foto/matthias_schoepf_1024.jpg";
//gekürzt, ebenfalls 40 Definitionen
-->
</script>Das mit der Adresse zum Bildaustauschen habe ich leider nicht verstenden.
Wenn du den Code oben wegläßt, wird nicht mehr vorgeladen. Aber da dein Code zum Bildertauschen im Moment so aussieht:
<area shape="rect" coords="85,15,108,46" href="haupt_1024.html"
onMouseOver="foto.src=bild1.src"
onMouseOut="foto.src='musikkapelle_wallgau_165_s_1.jpg'">mußt du die onmouseover-Anweisung passend modifizieren. Du mußt statt foto.src=bildX.src einfach foto.src='foto/alfons_goppel_1024.jpg' schreiben. Das Bild wird sodann erst beim Anfordern durch Mausüberfahren geladen.
Ob das in diesem Fall wirklich gut ist, mußt du selbst probieren und entscheiden.
- Sven Rautenberg
-
Servus Sven,
Danke erstmal für Deine Erklärung.
Ich werden jetzt das Wechseln der Bilder so wie Du meinst an das Mouseover dranhängen, somit werden die Bilder erst geladen wenn man mit der Maus über die bereiche fährt. Wenn das dann für den Besucher unschön ist weil jedes Foto 8KB hat und evtl. zu lange dauert dann könnte ich ja folgendes noch zusätzlich machen: die Bilder die eigentlich nicht vorgeladen werden am ende vom Dokument doch noch vorladen, somit hätte ich dann eigentlich das erreicht was ich wollte und zwar daß zuerst die wichtigen bilder geladen werden (Gruppenfoto, Navigation) und wenn dies fertig ist dann kann ja schonmal das eine oder andere Foto aus der mousover-Funktion geladen werden.
So hätte ich mir als Unwissender das vorgestellt.Vielen Dank für Deine Hilfe
Grüße aus Wallgau
Wolfgang
-
-
-