SELFHTML Forums-Auslese - CSS - positionierte Bereiche

SELFHTML Forums-Auslese CSS
	Forums-Auslese Seitenlayouts mit positionierten Bereichen
	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

Forums-AusleseSeitenlayouts mit positionierten Bereichen

Positionierung von dynamischen grafischen Buttons

Forums-Auslese
Seitenlayouts mit positionierten Bereichen