annette: bei rollover html-text und bild austauschen

SELF-Forum

bei rollover html-text und bild austauschen

annette
– Informationen zu den Bewertungsregeln

hallo,

ich habe folgendes problem: ich möchte einen rollover-effekt in einer navigation, die aus html-text (weil: text soll editierbar bleiben) und einem bild besteht. das heißt, bei rollover soll sich die hintergrundfarbe der td und eine grafik austauschen. folgender quelltext funktioniert, allerdings tauscht sich das bild nur dann aus, wenn die maus über den text fährt:

--------------
<td onMouseover="bgColor='#F1F1F1';" onMouseout="bgColor='';">
<img src="pix/arrowsmall_gray_out.gif" width="4" height="5" alt="" border="0" name="lnk3" NOSAVE>
<a href="link1.htm" onMouseover="javascript:document.lnk3.src='pix/arrow_orange_over.gif'" onMouseout="javascript:document.lnk3.src='pix/arrowsmall_gray_out.gif'">Navigationspunkt 03</a></td>
</tr>
-------------

jetzt hätte ich gerne:
a) daß sich bild und text auch austauschen, wenn man mit der maus über das bild fährt (hab's versucht mit folgendem quelltext:
onMouseover="javascript:document.lnk4.src='pix/arrow_orange_over.gif';document.getElementById("td4").bgColor='#F1F1F1';")
b) am liebsten wäre mir, das ganze javascript in einer externen datei. ich weiß aber nicht, wie ich die td-ids ansprechen kann

freue mich über jeden hinweis,
annette

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. bei rollover html-text und bild austauschen

    Charlie
    – Informationen zu den Bewertungsregeln

    <script language="JavaScript">
    function tauschen (num,pic)
    {
    window.document.images[num].src=pic;
    }
    </script>

    <td onMouseover="tauschen (0, 'bild2.gif');bgColor='#F1F1F1';"  OnMouseout="tauschen (0, 'bild1.gif');bgColor='';">
    <img src="bild1.gif">
    <a href="#">Link</a>

    ###############################################

    Ziemlich abenteuerlich, funktioniert aber, jedenfalls im MSIE !!
    :o))

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. bei rollover html-text und bild austauschen

      annette
      – Informationen zu den Bewertungsregeln

      vielen herzlichen dank!

      noch schöner fände ich aber eine lösung, bei der sowohl der bildaustausch, als auch der austausch der hintergrundfarbe in einer funktion steckt. also so etwas wie:

      --------------
      <script language="JavaScript">
      function tauschen (num,pic)
      {
      window.document.images[num].src=pic;
      document.getElementById("id_der_td").bgcolor="#F1F1F1";
      }
      </script>
      -------------

      aber wie gesagt: ich weiss nicht, wie ich in der funktion alle entsprechenden tds ansprechen kann! hat jemand einen tipp?

      gruß, annette

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. bei rollover html-text und bild austauschen

      Charlie
      – Informationen zu den Bewertungsregeln

      <html>
      <head>
      <script language="JavaScript">
      var link1 = 'This is Link 1'
      var link2 = 'This is Link 2'

      function tauschen (num,pic)
      { window.document.images[num].src=pic; }

      function change(message)
      { document.getElementById('layer').innerHTML = message; }

      function hintergrund (farbe)
      {zelle.bgColor=farbe;}

      </script></head>
      <body><table border="1" cellspacing="0" align="center"><tr>

      <td id="zelle" onmouseover="hintergrund ('#C0C0C0')"  onmouseout="hintergrund ('')">

      <img src="bild1.gif" onmouseover="tauschen (0, 'bild2.gif')" onmouseout="tauschen (0, 'bild1.gif')">

      <a href="#" id="layer" onmouseover="change(link2)" onmouseout="change(link1)">This is Link 1</a>

      </td></tr></table>
      </body>
      </html>

      Die Funktionen lassen sich nun beliebig kombinieren bzw löschen . . .
      Was immer Du vorhast . . . tu es !!
      :o)

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln