nicht angemeldet
Autom. Preloader/Mouseover-Script
Helau,
ich habe recht wenig Ahnung von Javascript. Würde aber gerne ein automatisches Preloader-Script in eine Seite integrieren, die ziemlich viele identische Buttons hat, da hier Daten aus einer Datenbank angezeigt werden.
Ich würde gerne vermeiden, für jeden dieser Buttons ein eigenes Image-Objekt erstellen zu müssen.
Mein Gedanke war nun, alle Images zu suchen, die ein Name-Attribut haben und dann automatisch in einen assoz. Image-Objekt-Array die entsprechende Grafik mit dem Over-State zu speichern. Dazu würde dann der um den Pfad und die Dateierweiterung gekürzte Name der Grafik als Key herhalten müssen, damit ich je Grafik nur ein Image-Objekt brauche.
Meine Frage ist, ob das wohl machbar / sinnvoll / performancemäßig praktikabel ist, oder ob es vielleicht eine andere Lösung gibt, die es mir erspart, extra die Grafiken im Preloader anzugeben.
Ich bin für alle Anregungen/Kommentare dankbar.
Gruß
toby
---
Hier mal mein 1. Versuch:
<script language="Javascript">
out = new Array();
over = new Array();
function preload()
{
//alle images durchlaufen
for(i=0;i<document.images.length;i++)
{
//name des images?
name = document.images[i].name;
//nur images mit attribut name sind interessant
if(name != '')
{
//wie heißt die datei?
source = document.images[i].src;
//dateityp?
ext = source.substring(source.lastIndexOf("."));
//wie heißt der dazu gehörige over-state?
osource = source.substring(0, source.length - 4) + "_o"+ ext;
//benenner für die datei aus dem namen der grafik (nicht des images) erstellen, um doppelte zu vermeiden.
//(kürzen auf den reinen dateinamen ohne extension)
dateiname = source.substring(source.lastIndexOf("/")+1, source.lastIndexOf("."));
//imageobjekte erstellen
out[dateiname] = new Image();
out[dateiname].src = source;
over[dateiname] = new Image();
over[dateiname].src = osource;
}
}
}
function mover(which)
{
//wie heißt die datei?
source = document.images[which].src;
//kürzen auf den reinen dateinamen ohne extension
dateiname = source.substring(source.lastIndexOf("/")+1, source.lastIndexOf("."));
//bildaustausch
document.images[which].src = over[dateiname].src;
}
function mout(which)
{
//wie heißt die datei?
source = document.images[which].src;
//kürzen auf den reinen dateinamen ohne extension
dateiname = source.substring(source.lastIndexOf("/")+1, source.lastIndexOf(".")-2);
//bildaustausch
document.images[which].src = out[dateiname].src;
}
</script>
<body onLoad="preload();">
<a href="#" onMouseover="mover('b_delete');" onMouseout="mout('b_delete');"><img src="img/1.jpg" name="b_delete" width="600" height="400" border="0" alt=""></a>
<a href="#" onMouseover="mover('b_delete1');" onMouseout="mout('b_delete1');"><img src="img/1.jpg" name="b_delete1" width="600" height="400" border="0" alt=""></a>
</body>
-
Mein Gedanke war nun, alle Images zu suchen, die ein Name-Attribut haben und dann automatisch in einen assoz. Image-Objekt-Array die entsprechende Grafik mit dem Over-State zu speichern. Dazu würde dann der um den Pfad und die Dateierweiterung gekürzte Name der Grafik als Key herhalten müssen, damit ich je Grafik nur ein Image-Objekt brauche.
Sowas habe ich auch mal gemacht:
http://home.arcor.de/struebig/js/mouse_over/index.htmles fügt außerdem automatisch die Events zu den Buttons.
Struppi.