Mouseover Effekt

-->

Dieses JavaScript wechselt bei Berührung mit dem Mauszeiger von einer Grafik zu einer anderen. Mit diesem Effekt kann man zB. eine Art dynamische Buttons erzeugen. Die beiden Grafiken für einen Effekt sollten, der Optik wegen, die gleiche Größe besitzen.

Quelltext für Einbindung in die Web-Seite (zwischen den HEAD-Tag's):



<script language="javascript">
<!-- Hide JavaScript from Java-Impaired Browsers
 //

  <!-- Grafik "Maus1-on" -->
  toc1an = new Image(120, 35);     <!-- Größe der Grafik "Maus1-on" -->
  toc1an.src = "maus1on.gif";        <!-- Name der Grafik "Maus1-on" -->


  <!-- Grafik "Maus1-off" -->
  toc1aus = new Image(120, 35);    <!-- Größe der Grafik "Maus1-off" -->
  toc1aus.src = "maus1off.gif";        <!-- Name der Grafik "Maus1-off" -->



       <!-- Grafik "Maus2-on" -->
       toc2an = new Image(120, 35);     <!-- Größe der Grafik "Maus2-on" -->
       toc2an.src = "maus2on.gif";        <!-- Name der Grafik "Maus2-on" -->


       <!-- Grafik "Maus2-off" -->
       toc2aus = new Image(150, 35);    <!-- Größe der Grafik "Maus2-off" -->
       toc2aus.src = "maus2off.gif";        <!-- Name der Grafik "Maus2-off" -->



             <!-- Grafik "Maus3-on ....... -->
             <!-- toc3aus = new ......     -->
             <!-- toc3aus.src ......       -->

             <!-- usw. usw.  -->



<!-- Diese Zeilen bitte nicht verändern -->
function img_act(imgName) {
			imgOn = eval(imgName + "an.src");
        			document [imgName].src = imgOn;
		}
		function img_inact(imgName) {
			imgOff = eval(imgName + "aus.src");
			document [imgName].src = imgOff;
		}
	</script>

Quelltext für Einbindung in die Web-Seite (zwischen den BODY-Tag's):



<!-- ****** Position der Grafiken "Maus1-on" und "Maus1-off" in der Webseite ****************** -->
           <!-- Verweis zu anderer Seite, URL,..... -->
<center><p><a href="script.htm" target="HauptFenster"

onmouseover="img_act('toc1'); window.status=''; return true"


onmouseout="img_inact('toc1')"><img src="maus1off.gif"
alt="" border="0" width="120" height="35" name="toc1"></a>
</center>
<!-- ****************************************************************************************** -->


<!-- ****** Position der Grafiken "Maus2-on" und "Maus2-off" in der Webseite ****************** -->
<center><p><a href="script.htm" target="HauptFenster"
onmouseover="img_act('toc2'); window.status=''; return true"
onmouseout="img_inact('toc2')"><img src="maus2off.gif"
alt="" border="0" width="150" height="35" name="toc2"></a>
</center>
<!-- ***************************************************************************************** -->

<!-- Dann folgt Maus3-on und Maus3-off usw. usw. -->

<ENDE ************************************************************************************************************** -->