Zufallsbild mit onMouseOver

[johnjonnyjonson]

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:

<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 !

 

[LeCub]

Je nachdem was für einen Hover-Effekt kannst du dafür CSS verwenden:

img:hover {
Der Effekt den du willst
}

Mit JavaScript würde das so aussehen

document.getElementsByTagName('img').onmouseover = function hover() {Dein Effekt};
document.getElementsByTagName('img').onmouseout = function out() {Dein Effekt}

 

[johnjonnyjonson]

jetzt mal praktischer da ich da bisschen auf dem schlauch stehe:

<table border="0">
        <tbody>
          <tr>
            <td align="left"><a >   
                    <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>

</a>
</td>
            <td align="right"><div>
         div></td>
          </tr>
        </tbody>
  </table><p style="height:40px">

wie bekomm ich jetzt auf das Zufallsbild diesen onmouseover effekt ?
würde mir sehr helfen, falls jemand da was weiß oder weiß wie ich das script ändern muss das ich den in einen <a> tag bekomme, damit ich den onmouseover per html schreiben kann

 

[Sempervivum]

Wozu denn das a-Tag? Dieses hat ja gar kein href-Attribut. Und anscheinend schließt Du es fälschlicher Weise mit </p>.

 

[johnjonnyjonson]

ja die frage war eigentlich nur, wie ich diesen onmouseover Effekt mit nur einem bild für alle, in das script bekomme

 

[johnjonnyjonson]

also das das Event auf jedes zufallsbild angewendet wird

 

[Sempervivum]

Ich würde es so machen:

        <div style="background-image: url(bilder/8.jpg); width: 250px; height: 150px;"><img id="meinbild"></div>
        <script>
            nr = Math.ceil(Math.random() * 8);
            im = document.getElementById("meinbild");
            im.src = "bilder/" + nr + ".jpg";

        </script>
        <style>
            #meinbild:hover {opacity: 0}
        </style>

 

[johnjonnyjonson]

super funktioniert mal so wie ich mir das vorgestellt hab, kann ich aber dem hover ein bild geben das er drüber legt ? oder geht das nur als bg-img ?

 

[johnjonnyjonson]

oder mit dem hover Effekt eine Schrift einblenden lassen

 

[Sempervivum]

kann ich aber dem hover ein bild geben das er drüber legt

Das Verfahren mit dem bg-image habe ich deshalb gewählt, damit eine CSS-Lösung funktioniert. Man kann es auch umgekehrt machen und und mit absoluter Positionierung ein Bild drüber legen und das mit hover einblenden.

oder mit dem hover Effekt eine Schrift einblenden lassen

Auch das geht, wenn Du statt des festen Bildes einen Container mit der Schrift drin verwendest.

 

[johnjonnyjonson]

also ich hab das bei mir dann doch so gemacht:

<a id="bild1">
            <script type="text/javascript">
function Zufallsbild () {
max=11
today = new Date();
num = today.getTime();
num = Math.round (Math.abs (Math.sin (num)*506004))
% max;
return num;}
a = Zufallsbild ();
document.write ('<img border=0 src=zufall/bild'+a+'.jpg width=95%><\/p>');
</script>
<style>
           #bild1:hover { opacity: 0.3;}
       </style></a>

gibt es da eine Möglichkeit die Schrift darüber zu legen? oder eben dem hover ein bild als Attribut zugeben ?

 

[johnjonnyjonson]

tut mir übrigens leid falls ich nicht deinen Code verwendet hab´, wenn ich das sehe versuch ich das Prinzip zu verstehen und da ich für diesen Zufalls Generator, relativ lange gebraucht hab wollte ich ihn dann auch verwenden