JavaScript / Tipps / MouseOver

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="Computer.style.visibility='hidden';" 
 onMouseOut="Computer.style.visibility='visible';">

 <img src="Bild1.gif" id="Computer">       (Computer = Jedes Bild benötigt einen anderen Namen [id])
</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

<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: 50px; top: 50px" 
 onMouseOver="Bild_D.style.zIndex=2; Bild_E.style.zIndex=1"
 Id="Bild_D">

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

Beispiel: 8

<style type="text/css">
  img#a1 {filter: Gray()}
</style>

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

Beispiel: 9

<style type="text/css">
  img#a2 {filter: none}
</style>

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

Beispiel: 10

<style type="text/css">
  img#a3 {filter: Xray()}

</style>
<img hspace=10 src="Bild3.gif" id="a3" 
 onMouseOver="this.style.filter = 'none';"
 onMouseOut="this.style.filter = 'Xray()';">

Beispiel: 11

<style type="text/css">
  img#a4 {filter: Glow(color=#770000, strength=20)}
</style>

<img hspace=10 src="Bild4.gif" id="a4" 
 onMouseOver="this.style.filter = 'Glow(color=#DD0000, strength=14)';"
 onMouseOut="this.style.filter = 'Glow(color=#770000, strength=16)';">

Beispiel: 12

<style type="text/css">
 img#a5 {filter: Wave(freq=5, light=5, phase=5, strength=2, add=1)}
</style>
<img hspace=10 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: 13

       

<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()';">

Beispiel: 14

<style type="text/css">
 img#b1 {filter: Alpha(opacity=30, finishopacity=25, style=2)}
</style>
<img src="Bild3.gif" id="b1" 
 onMouseOver="this.style.filter = 'none';"
 onMouseOut="this.style.filter = 'Alpha(opacity=30, finishopacity=25, style=2)';">

Beispiel: 15

<img src="Bild4.gif" 
 onMouseOut="this.style.filter = 'none';"
 onMouseOver="this.style.filter = 'Mask(color=#4b0097)';">

Beispiel: 16

<style type="text/css">
 img#b2 {filter: Alpha(opacity=30, finishopacity=75, style=2)}
</style>

<span style="background-image: url(Bild1.gif);">
<img src="Bild2.gif"
  onMouseOver="this.style.filter = 'none';"
 onMouseOut="this.style.filter = 'Alpha(opacity=30, finishopacity=75, style=2)';" id="b2"></span>

 

Beispiel: 17

<style type="text/css">
 img#b3 {filter: progid:DXImageTransform.Microsoft.Engrave();}
</style>

<img src="bild3.gif"
  onMouseOver="this.style.filter = 'progid:DXImageTransform.Microsoft.Emboss()';"
 onMouseOut="this.style.filter = 'progid:DXImageTransform.Microsoft.Engrave()';" id="b3">

 

Beispiel: 18

<style type="text/css">
 img#b4 {filter: progid:DXImageTransform.Microsoft.Pixelate( maxsquare=4);}
</style>
<img src="Bild3.gif"
  onMouseOver="this.style.filter = 'none';"
 onMouseOut="this.style.filter = 'progid:DXImageTransform.Microsoft.Pixelate( maxsquare=4)';" id="b4">

 

Beispiel: 19

<style type="text/css">
 img#b5 {filter: progid:DXImageTransform.Microsoft.Pixelate( maxsquare=9);}
</style>

<img src="Bild3.gif"
 onMouseOut="this.style.filter = 'progid:DXImageTransform.Microsoft.Pixelate( maxsquare=9)';"
 onMouseOver="this.style.filter = 'progid:DXImageTransform.Microsoft.Pixelate( maxsquare=7)';"
 onClick="this.style.filter = 'progid:DXImageTransform.Microsoft.Pixelate( maxsquare=3)';"
 onDblClick="this.style.filter = 'none';" id="b5">

 

Beispiel: 20

<img src="Bild4.gif" 
 onMouseOut="this.style.filter = 'none';"
 onMouseOver="this.style.filter = 'DropShadow(color=#A0A0A0, offx=6, offy=-3)';">

 

Beispiel: 21

<img src="Bild4.gif" 
 onMouseOut="this.style.filter = 'none';"
 onMouseOver="this.style.filter = 'Shadow(color=#FFD700, direction=45)';">

 

Beispiel: 22

<img src="Bild1.gif" 
 onMouseOut="this.style.filter = 'none';"
 onMouseOver="this.style.filter = 'progid:DXImageTransform.Microsoft.
MotionBlur(direction=90, strength=75)';">

 

Beispiel: 23

<img src="archiv/frames/pix1.gif" id="b6" 
 onMouseOver="this.style.filter = 'none';"
 onMouseOut="this.style.filter = 'Blur(direction=30, strength=45)';">

 

Beispiel: 24

<img src="monster.gif" 
 onMouseOut="this.style.filter = 'none';"
 onMouseOver="this.style.filter = 'filter: Chroma(color=#080c9e)';">      #080c9e = Augenfarbe