SELFHTML Forums-Auslese CSS

Forums-Auslese
Seitenlayouts mit positionierten Bereichen
Diese Seite ist ein Dokument mit Informationstext

 Positionierung von dynamischen grafischen Buttons
 

Positionierung von dynamischen grafischen Buttons

Basierend auf einem Forums-Beitrag vom 28.Oktober.1998 von:
 Michael Printz, mpr@gmx.de

Das folgende Beispiel zeigt eine komplette Seite, in der zwei mit absoluter Positionierung ausgerichtete, dynamische grafische Buttons verwendet werden.
Der Bildwechsel im Beispiel wird durch die Anwendung von  JavaScript erreicht.

<HTML>
<HEAD>
   <TITLE>Dynamische grafische Buttons</TITLE>

  <SCRIPT LANGUAGE="JavaScript">
    <!--
    Normal1 = new Image();
    Normal1.src = "bild-a1.gif";
    Highlight1 = new Image();
    Highlight1.src = "bild-a2.gif";

    Normal2 = new Image();
    Normal2.src = "bild-b1.gif";
    Highlight2 = new Image();
    Highlight2.src = "bild-b2.gif";

    function Bildwechsel ( BildName, BildObjekt ) {
      if ( document.all ) {
        switch ( BildName ) {
          case 'AltaVista' : window.document.all.AltaVista.src = BildObjekt.src;
                             break;
          case 'Lycos' :     window.document.all.Lycos.src = BildObjekt.src;
                             break;
        }
      }
      else {
        if ( document.layers ) {
          switch ( BildName ) {
            case 'AltaVista' : window.document.DIV0.document.AltaVista.src = BildObjekt.src;
                               break;
            case 'Lycos' :     window.document.DIV0.document.Lycos.src = BildObjekt.src;
                               break;
          }
        }
      }
    }
    //-->
</SCRIPT>

  <STYLE TYPE="text/css">
    <!--
    #DIV0 {
      POSITION:absolute; TOP:100px; LEFT:100px; WIDTH:100px; HEIGHT:100px;
    }
    //-->
  </STYLE>
</HEAD>

<BODY>
<DIV ID="DIV0">
  <A HREF="http://www.altavista.digital.com/"
      onMouseOver="Bildwechsel ( 'AltaVista', Highlight1 )"
      onMouseOut="Bildwechsel ( 'AltaVista', Normal1 )">
      <IMG SRC="bild-a1.gif" NAME="AltaVista" ALT="AltaVista besuchen" BORDER=0 HEIGHT=50 WIDTH=100></A><BR>
    <A HREF="http://www.lycos.de/"
      onMouseOver="Bildwechsel ( 'Lycos', Highlight2 )"
      onMouseOut="Bildwechsel ( 'Lycos', Normal2 )">
      <IMG SRC="bild-b1.gif" NAME="Lycos" ALT="Lycos besuchen" BORDER=0 HEIGHT=50 WIDTH=100></A>
  </DIV>

</BODY>
</HTML>

weiter: JavaScript - Variablen, Funktionen, Objekte, Kontrollstrukturen
zurück: Formatierung/Gestaltung von Elementen mit CSS-Befehlen
 

SELFHTML Forums-Auslese CSS

© 1999  das Redaktionsteam