Announcement

Collapse
No announcement yet.

rollover geht nicht

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • rollover geht nicht

    Hallo, ich sitze hier seit nun bald 2 Tagen an einer einfachen Seite. In der Seite soll eine Farbpalette mit rollovers für die einzelnen Farbabschnitte (untitled-03 bis 24) sein. Die Rollovers sollen im Feld darunter die Grafik Untitled-26 mit Farbnamen z.B. weiß (alle Grafiken haben die gleiche Größe) ersetzen. Ich weiß, dass das Schwierig ist, aber einer hier kennt bestimmt eine Lösung.

    Ich habe die Seite mit PHP in Frames zerlegt und auch ein ganz gutes html als Ergebnis bekommen, dass werd ich hier mal anhängen. Ich verzichte mal darauf meine Versuche das rollover hinzukriegen mit aufzunehmen, mach ich mich nur lächerlich mit


    <html>
    <head>
    <title>Untitled-1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- ImageReady Slices (Untitled-1.psd) -->
    <table id="Table_01" width="1280" height="2551" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td colspan="24">
    <img src="images/Untitled-1_01.jpg" width="1280" height="1104" alt=""></td>
    </tr>
    <tr>
    <td>
    <img src="images/Untitled-1_02.jpg" width="599" height="55" alt=""></td>
    <td>
    <a href="FARBEN/weiß.jpg" target="Untitled-1_26">
    **hier soll der erste rollover rein

    <img src="images/Untitled-1_03.jpg" width="19" height="55" border="0" alt=""></a></td>
    <td>
    <img src="images/Untitled-1_04.jpg" width="18" height="55" alt=""></td>
    <td>
    <img src="images/Untitled-1_05.jpg" width="19" height="55" alt=""></td>
    <td colspan="2">
    <img src="images/Untitled-1_06.jpg" width="18" height="55" alt=""></td>
    <td>
    <img src="images/Untitled-1_07.jpg" width="19" height="55" alt=""></td>
    <td>
    <img src="images/Untitled-1_08.jpg" width="18" height="55" alt=""></td>
    <td>
    <img src="images/Untitled-1_09.jpg" width="19" height="55" alt=""></td>
    <td>
    <img src="images/Untitled-1_10.jpg" width="19" height="55" alt=""></td>
    <td>
    <img src="images/Untitled-1_11.jpg" width="18" height="55" alt=""></td>
    <td>
    <img src="images/Untitled-1_12.jpg" width="19" height="55" alt=""></td>
    <td>
    <img src="images/Untitled-1_13.jpg" width="18" height="55" alt=""></td>
    <td>
    <img src="images/Untitled-1_14.jpg" width="19" height="55" alt=""></td>
    <td>
    <img src="images/Untitled-1_15.jpg" width="18" height="55" alt=""></td>
    <td>
    <img src="images/Untitled-1_16.jpg" width="19" height="55" alt=""></td>
    <td>
    <img src="images/Untitled-1_17.jpg" width="19" height="55" alt=""></td>
    <td>
    <img src="images/Untitled-1_18.jpg" width="18" height="55" alt=""></td>
    <td>
    <img src="images/Untitled-1_19.jpg" width="19" height="55" alt=""></td>
    <td>
    <img src="images/Untitled-1_20.jpg" width="18" height="55" alt=""></td>
    <td>
    <img src="images/Untitled-1_21.jpg" width="19" height="55" alt=""></td>
    <td>
    <img src="images/Untitled-1_22.jpg" width="18" height="55" alt=""></td>
    <td>
    <img src="images/Untitled-1_23.jpg" width="19" height="55" alt=""></td>
    <td>
    <img src="images/Untitled-1_24.jpg" width="291" height="55" alt=""></td>
    </tr>
    <tr>
    <td>
    <img src="images/Untitled-1_25.jpg" width="599" height="32" alt=""></td>
    <td colspan="4">
    <img src="images/Untitled-1_26.jpg" width="72" height="32" alt=""></td>
    <td colspan="19">
    <img src="images/Untitled-1_27.jpg" width="609" height="32" alt=""></td>
    </tr>
    <tr>
    <td colspan="24">
    <img src="images/Untitled-1_28.jpg" width="1280" height="1359" alt=""></td>
    </tr>
    <tr>
    <td>
    <img src="images/spacer.gif" width="599" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="19" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="18" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="19" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="16" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="2" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="19" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="18" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="19" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="19" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="18" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="19" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="18" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="19" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="18" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="19" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="19" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="18" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="19" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="18" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="19" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="18" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="19" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="291" height="1" alt=""></td>
    </tr>
    </table>
    <!-- End ImageReady Slices -->
    </body>
    </html>


    Ich würd mich freuen wenn mir jemand helfen kann, ich kann's leider noch nicht...

  • #2
    Hallo,

    an sich ist das mehr ein JavaScript Problem
    Aber ein analoges Beispiel mit Links arbeitet so (Buchquelle: JavaScript Codebook
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <style TYPE="text/css">
      a {
        color: #0000FF;
        font-size: 14pt;
        }
        a:hover {
          color: #FF0000;
          font-size: 14pt;
          font-weight: bold
          }
      </style>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    </head>
    <body>
    <a href="http://www.rjs.de">Link 1</a><br>
    <a href="http://www.webscripting.de">Link 2</a><br>
    </body>
    </html>
    MfG
    Cheat-Sheets for Developers / Programming Quotes

    Comment


    • #3
      Das hat mich schon weitergebracht, vielen dank! Ich habe den Text etwas umgeschrieben s.u., was jetzt noch fehlt, ist der Befehl um bei hover eine Grafik in eine andere Zelle zu laden... und jedes rollover hat eine andere Grafik.

      <head>

      <style TYPE="text/css">

      a {...;}

      a:hover {...;}

      </style>

      <title>...</title>

      </head>

      <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

      <table width="1280" height="2551" border="0" cellpadding="0" cellspacing="0">

      <tr>

      <td colspan="24"><img src="http://.../images/Untitled-1_01.jpg" width="1280" height="1104" alt=""></td>

      </tr>

      <tr>

      <td><img src="http://.../images/Untitled-1_02.jpg" width="599" height="55" alt=""></td>

      <td><a href="#"><img src="http://.../images/Untitled-1_03.jpg" width="19" height="55" border="0" alt=""></a></td>

      u.s.w.

      Danke nochmal, würd mich freun wenn Du mir noch weiter helfen kannst.

      Comment

      Working...
      X