Gabriele Schmid: Mouseover-Effekt

Hallo,
ich mache für unseren Musikverein die Homepage. Jetzt soll die Möglichkeit gegeben sein, die Musiker per Mouseover als Bild in die rechte Tabellenhäfte einzublenden. Das schaffe ich auch, allerdings überlappen die Bilder nicht, sondern werden untereinander dargestellt. Bestimmt weiß jemand schnell Rat. Vielen Dank.
Mfg G. Schmid

  1. hallo,

    Bestimmt weiß jemand schnell Rat.

    Das ist ein Irrtum. und ohne Kenntnis deiner CSS weiß überhaupt niemand Rat, was besser zu machen wäre.

    Grüße aus Berlin

    Christoph S.

    --
    Visitenkarte
    ss:| zu:) ls:& fo:) va:) sh:| rl:|
    1. hallo,

      Bestimmt weiß jemand schnell Rat.

      Das ist ein Irrtum. und ohne Kenntnis deiner CSS weiß überhaupt niemand Rat, was besser zu machen wäre.

      Grüße aus Berlin

      Christoph S.

      Hallo nochmals, bin blutiger Anfänger, hab bisher nur hauptsächlich mit Frontpage und ein bißchen mit Dreamweaver 8 bearbeitet. Seht es mir nach, wenns ein bißchen laienhaft ist, aber es täte ja wenn ich das untereinander noch rauskriege gegen ein überlappen der Bilder. .....
      Hier ist mein Script:

      ....
      </font></p>
      <table width="745" border="1">
        <tr>
          <td width="442"><font face="Comic Sans MS"><u><b>Dirigent:</b></u><br>

      <!--Abele Bild MoveOver definieren-->
       <a href="" onMouseOver="MM_swapImage('abele','','',1)" onMouseOut="MM_swapImgRestore()"></a><a href="" target="_top" onMouseOver="zeige('abele')" onMouseOut="verstecke('abele')">Martin Abele</a><br>
      <!--Abele Bild MoveOver definieren fertig-->
      <u><b>Fl&ouml;ten</b>:</u><br>
      <!-- Silke Bild MoveOver definieren-->
       <a href="" onMouseOver="MM_swapImage('silke','','',1)" onMouseOut="MM_swapImgRestore()"></a><a href="" target="_top" onMouseOver="zeige('silke')" onMouseOut="verstecke('silke')">Silke Preibisch</a>;
      <!-- Silke Bild MoveOver definieren fertig-->
      <!-- Diana Bild MoveOver definieren -->
       <a href="" onMouseOver="MM_swapImage('diana','','',1)" onMouseOut="MM_swapImgRestore()"></a><a href="" target="_top" onMouseOver="zeige('diana')" onMouseOut="verstecke('diana')">Diana Zanker;</a>&nbsp;
      <!-- Diana Bild MoveOver definieren fertig-->
      <!-- Julia Bild MoveOver definieren -->
       <a href="" onMouseOver="MM_swapImage('julia','','',1)" onMouseOut="MM_swapImgRestore()"></a><a href="" target="_top" onMouseOver="zeige('julia')" onMouseOut="verstecke('julia')">Julia Sturm</a><br>
      <!-- Julia Bild MoveOver definieren fertig-->
      ...
      <!-- Tabelle definieren -->
      &nbsp;</font></td>
          <td width="287" valign="top">
       <p align="center"><span class="feature">
      <!--Abele Bild definieren -->
       <img src="../images/Rehau/rehau_kl_012.jpg" alt="abele" width="227" id="abele" style="visibility:hidden" align="top" height="244" start="mouseover" onmouseover="MM_showHideLayers('abele','','show','silke','','hide')" >
       <img src="../images/Rehau/rehau_kl_011.jpg" alt="silke" width="227" id="silke" style="visibiliy:hiddeln" align="top" height="244" start="mouseover" onmouseover="MM_showHideLayers('silke','','show','abele','','hide')" >

      </a>
      &nbsp;</span></td>
        </tr>
      </Style>

      <script language="javascript">
      function zeige(a)
      {window.document.getElementById(a).style.visibility="visible";}
      function verstecke(a)
      {window.document.getElementById(a).style.visibility="hidden";}
      function change1(b)
      {window.document.getElementById(b).style.color="red";}
      function change2(b)
      {window.document.getElementById(b).style.color="blue";}
      function tauschen (x, y)
      {window.document.images[x].src=y.src;}
      </script>
      </head>
      <body>
      </td>
      </table>
      </body>
      </html>

      1. hallo,

        bin blutiger Anfänger

        Ja, das sieht man leider. Du hast dich aber schonmal ein bißchen in SELFHTML eingelesen und weißt ungefähr, wie und warum du CSS einsetzen solltest? Und vor allem: du weißt hoffentlich, wie das Grundgerüst einer HTML-Seite aussehen sollte?

        </font></p>

        Das kannst du vollständig streichen.

        <table width="745" border="1">

        Eine Tabelle ist per se nichts Schlechtes. Aber wie sich weiter unten zeigt, steht sie im Header-Bereich deines HTML-Dokuments, und da gehört sie einfach nicht hin.

        <td width="442"><font face="Comic Sans MS"><u><b>Dirigent:</b></u><br>

        <font>, <u> und <b> sind überflüssig. Du möchtest deiner Schrift bitte mit CSS die gewünschten Eigenschaften zuweisen.

        <a href="" onMouseOver="MM_swapImage('abele','','',1)" onMouseOut="MM_swapImgRestore()"></a><a href="" target="_top" onMouseOver="zeige('abele')" onMouseOut="verstecke('abele')">Martin Abele</a><br>

        Das ist offensichtlich das, was dir als Fehler aufgefallen ist. Es läßt sich aber so gut wie gar nichts dazu sagen - bis auf das, daß es so natürlich nicht funktioniert. Schau dir einmal an, wie du die beiden EventHandler onmouseover und onmouseout verwenden kannst. Sie können eingesetzt werden, um eine Javascript-Funktion aufzurufen - aber die sollte vorher im Headerbereich deiner Seite definiert sein oder als externes Script eingebunden werden.

        <script language="javascript">

        Wenn du Javascript benutzen willst, gehört zwingend dazu 'type="text/javascript"'.

        <body>
        </td>
        </table>

        Das ist ein absolutesa Durcheinander, das zeigt, daß du dich bitte gründlich mit dem Grundgerüst einer HTML-Seite beschäftigen solltest.

        Versuche vorerst, dich von deinem Frontpage und Dreamweaver zu lösen. Wenn man weiß, was sie produzieren sollen, kann man solche WYSIWYG-Editoren verwenden. Aber dir scheiont das noch nicht ganz klar zu sein. Macht nichts, das lernst du noch.

        Grüße aus Berlin

        Christoph S.

        --
        Visitenkarte
        ss:| zu:) ls:& fo:) va:) sh:| rl:|