MouseOver - Dhtml - www.homepage-total.de

Beispiel: 1

<a href="Seite1.htm" 
   onMouseOver="document.Bild.src='Bild2.gif'" 
   onMouseOut="document.Bild.src='Bild1.gif'">

<img src="Bild1.gif" 
   name="Bild" 
   width=100 height=50
   alt="Demolink" 
   border=0>
</a>

Beispiel: 2

<span
 onMouseOver="Bild.style.visibility='hidden'" 
 onMouseOut="Bild.style.visibility='visible'">

 <img src="Bild1.gif" id="Bild">
</span>

Beispiel: 3

<span
 onMouseOver="Bild.style.backgroundColor='Yellow'"
 onMouseOut="Bild.style.backgroundColor='white'">

 <img src="Bild1.gif" id="Bild">
</span>

Beispiel: 4

<span
 onMouseOver="Bild.style.backgroundImage='url(Bild2.gif)'"
 onMouseOut="Bild.style.backgroundImage='url(Bild3.gif)'">

<img src="Bild1.gif" id="Bild"></span>

Beispiel: 5

Frame 1 - Frame 2 - Frame 3 - Frame 4

<p align=center>
<a href="#" onMouseOver="Borde.style.borderStyle='groove'"
 onMouseOut="Borde.style.borderStyle='solid'">Borde 1</a> - 

<a href="#" onMouseOver="Borde.style.borderStyle='double'"
   onMouseOut="Borde.style.borderStyle='solid'">Borde 2</a> - 

<a href="#" onMouseOver="Borde.style.borderStyle='outset'"
   onMouseOut="Borde.style.borderStyle='solid'">Borde 3</a> - 

<a href="#" onMouseOver="Borde.style.borderStyle='dotted'"
   onMouseOut="Borde.style.borderStyle='solid'">Borde 4</a>
<br><br>
<table style="border-style:solid" border=10 id="Borde" align=center>
 <tr>
  <td><img src="Bild1.gif"></td>
 </tr>
</table>

Beispiel: 6

Zoom 1.5 - Zoom 2 - Zoom 2.5

<p align=center>
 <a href="#" onMouseOver="Zoom.style.zoom='1.5'"
  onMouseOut="Zoom.style.zoom='1'">Zoom 1.5</a> - 

 <a href="#" onMouseOver="Zoom.style.zoom='2'"
  onMouseOut="Zoom.style.zoom='1'">Zoom 2</a> - 

 <a href="#" onMouseOver="Zoom.style.zoom='2.5'"
  onMouseOut="Zoom.style.zoom='1'">Zoom 2.5</a>
 <br><br>
 <img src="Bild1.gif" id="Zoom">
</p>

Beispiel: 7

<img src="Bild1.gif" 
style="position:absolute; left:320; top:170" 
 onMouseOver="Bild_D.style.zIndex=2; Bild_E.style.zIndex=1"
 Id="Bild_D">

<img src="Bild2.gif" 
style="position:absolute; left:300; top:150" 
 onMouseOver="Bild_D.style.zIndex=1; Bild_E.style.zIndex=2"
 Id="Bild_E">

Beispiel: 8

<style type="text/css">
 <!--
  img#a1 {filter: Gray()}
  img#a2 {filter: none}
  img#a3 {filter: Xray()}
  img#a4 {filter: Glow(color=#AA0000, strength=20)}
  img#a5 {filter: Wave(freq=5, light=5, phase=5, strength=2, add=1)}

 -->
</style>

<img src="bild2.gif" id="a1" 
 onMouseOver="this.style.filter = 'none'"
 onMouseOut="this.style.filter = 'Gray()'">

<img src="bild1.gif" id="a2" 
 onMouseOver="this.style.filter = 'Invert()'"
 onMouseOut="this.style.filter = 'none'">

<img src="bild3.gif" id="a3" 
 onMouseOver="this.style.filter = 'none'"
 onMouseOut="this.style.filter = 'Xray()'">

<img src="bild4.gif" id="a4" 
 onMouseOver="this.style.filter = 'Glow(color=#FF0000, strength=16)'"
 onMouseOut="this.style.filter = 'Glow(color=#AA0000, strength=16)'">

<img src="bild1.gif" id="a5" 
 onMouseOver="this.style.filter = 'Wave(freq=55, light=55, phase=55, strength=8, add=1)'"
 onMouseOut="this.style.filter = 'Wave(freq=5, light=5, phase=5, strength=2, add=1)'">

Beispiel: 9

<img src="bild3.gif" 
 onMouseOver="this.style.filter = 'none'"
 onMouseOut="this.style.filter = 'FlipH()'">

<img src="bild3.gif" 
 onMouseOver="this.style.filter = 'none'"
 onMouseOut="this.style.filter = 'FlipV()'">

Schauen Sie auch zum JavaScript ť JollyFade