Zufallsbild mit onMouseOver

johnjonnyjonson

johnjonnyjonson

Grünschnabel
ich hab folgendes Problem, ich hab eine Bildergallerie erstellt die per Javascript Zufallsbilder anzeigt,
jetzt will ich aber einen onMouseOver Effekt über jedes Bild legen, sprich unabhängig vom Bild (bei allen soll das selbe Bild kommen wenn das onMouseOver Event startet).

das ist das script für das Zufallsbild:
Code: 
<script type="text/javascript">
function Zufallsbild () {
max=8
today = new Date();
num = today.getTime();
num = Math.round (Math.abs (Math.sin (num)*100000))
% max;
return num;}
a = Zufallsbild ();
document.write ('<img border=0 src=zufall/bild'+a+'.jpg width=95%><\/p>');
</script>

meine Frage ist jetzt: Wie mach ich das am besten? den Mouseover in die html schreiben oder lieber ein eigenes JavaScript dafür ?

Danke schonmal !
 
Hallo, ich versuche es mal...

also ich wuerde document.write ersetzen und ein img tag im html setzen, auf diesen dann mit js zugreifen und den src einfach aendern, da du ja eh immer nur ein bild anzeigst!
hier das HTML Beispiel:
HTML: 
<body>
<img id="img-id" class="gallery-pics" src="zufall/erstesBild.jpg" style="width:95%;">
</body>
das Script:
Javascript: 
function setImgCacheAndGenerateKey(){
        var key = Math.round (Math.abs (Math.sin (Date.now)*100000)) % 8; //??
        elem.setAttribute('img-id', key);
        return key;
}
window.addEventListener("load", function(event) {
          /* Du kannst auch document.querySelector('IMG') verwenden oder gibst
        dem img tag eine id um dann mit document.getElementById("img-id") auf
        das img zuzugreifen, habe aber dies als beispiel genommen, falls du dich
        doch entschliesst mehrere Bilder anzuzeigen, so hast du dann alle imgs in einer html-collection!!! */
           var elems = document.querySelectorAll('IMG');  // oder auch document.querySelectorAll('IMG.gallery-pics');
   
           for(var i=0;i<elems.length;i++) {
                elems[i].src ="zufall/Bild"+setImgCacheAndGenerateKey(elems[i])+".jpg";
                elems[i].addEventListener('mouseover', function(event) {
                        this.src = 'keinzufall/immerGleich.jpg';
                }
                elems[i].addEventListener('mouseout', function(event) {
                        var srcCache = this.getAttribute('image-id');
                        if(srcCache) {
                                this.src = srcCache ;
                                return true;
                         }
                        //oder neues zufallsbild laden
                        this.src ="zufall/Bild"+setImgCacheAndGenerateKey(this)+".jpg";
                }
                // du kannst auch noch ein click event hinyufuegen um ein neues Bild zu laden
                elems[i].addEventListener('click', function(event) {
                        this.src ="zufall/Bild"+setImgCacheAndGenerateKey(this)+".jpg";
                }
           }
         });
//this bezieht sich in einem event auf das element in dem das event ausgeloest wurde!!!
von variablen inizialisieren haelts du wohl nicht viel, oder sind die alle irgendwo global?

was ich auch noch nicht ganz verstehe, wo ist denn die gallerie... oder ist das eher ein zufallsbildanzeiger, der immer zufaellig ein bild laed, wenn die seite aufgerufen wird?

hoffe das hilft dir etwas weiter...

Hyper

ps. hier ein kleiner fehler in deinem Script:
<img border=0 src='zufall/bild'+a+'.jpg width=95%><\/p>
zu den anderen tausend, frage mich ob du das jemals zum laufen gebracht hast?
 
Zuletzt bearbeitet:
Ich würde noch hinzu fügen, dass Du für eine Zufallszahl besser die Funktion verwenden solltest, die dafür vorgesehen ist: Math.random().
 
ja ein bischen kann er ja selber nachdenken, so lernt man am besten, ich habe zur anregung hinter seiner funk 2 ?? gemacht und hatte schon das date.now verbessert, aber so geht ja der probier und lerneffekt verloren...;)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück