roll over bild

Dieses Thema im Forum "Web-Know-how für die Homepage" wurde erstellt von mannyk, 28. März 2004.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. mannyk

    mannyk Halbes Megabyte

    Registriert seit:
    6. Juli 2000
    Beiträge:
    590
    Hi!
    Ich wüsste gerne, wie man es schafft, dass ein Hintergrundbild einer Tabelle sich ändert, wenn man mit der Maus über die Tabelle fährt.
    mfg,
    mannyk
     
  2. mannyk

    mannyk Halbes Megabyte

    Registriert seit:
    6. Juli 2000
    Beiträge:
    590
    Ok, jetzt klappts!
    Habe einfach noch 'onMouseout="goover1()"' in den table-tag gesetzt, wobei bei goover1 das anfangsbild steht.

    Danke für deine Hilfe!

    mfg,
    mannyk
     
  3. Gast

    Gast Guest

    ach stimmt.... der bindestrich wird bei javascript als minus eingesetzt....

    den funktionsaufruf kannste auch mit onMouseOver machen...

    z.b.
    <p onMouseOver="changetab()">test... blah. etc</p>


    als preload empfehle ich bei selfhtml unter javascript anwendungsbeispiele buttons zu sehen, dort ist ein script für dyanmische buttons
     
  4. gerald_b

    gerald_b Kbyte

    Registriert seit:
    15. Januar 2003
    Beiträge:
    259
    Hi,


    'goover' ist der Name der aufzurufenden Funktion und dieser ist beliebig wählbar. Ich habe den einfach so genannt.

    Der Bildwechsel bei berühren der Tabelle sollte geschehen, wenn man - wie bereits gepostet - das TABLE-Tag um die Funktion onMouseover="goover()" ergänzt.


    Die Funktion goover könnte also so aussehen:

    function goover()
    {
    document.getElementById("tabelle").style.backgroundImage="url(bild1.jpg)";
    }

    getestet hab' ich das nicht; ein reload() könnte zur Erneuerung der Darstellung evtl. noch vonnöten sein...


    Das 'onload' im BODY-Tag besagt nur, dass beim Laden der Seite die nach onload angegebene Funktion ausgeführt wird. Da könnte z.B. eine Fenstergrößenanpassung drinstehen.


    mfg

    Gerald
     
  5. mannyk

    mannyk Halbes Megabyte

    Registriert seit:
    6. Juli 2000
    Beiträge:
    590
    @ gerald_b:
    danke nochmals. Jetzt ist es so, dass das Bild in der Tabelle geändert wird, sobald man drauf zeigt - genau was ich wollte.
    Allerdings kommt nicht wieder das erste bild, wenn man mit dem Zeiger weggeht.

    mfg,
    mannyk
     
  6. mannyk

    mannyk Halbes Megabyte

    Registriert seit:
    6. Juli 2000
    Beiträge:
    590
    @gerald_b: Danke schonmal für das Script. Kannst du es noch etwas genauer angeben? Mit dem Code für den Bilderwechsel.
    Auf Selfhtml habe nichts gefunden zu goover gefunden und auch sonst nicht im web.

    @Michael_x:
    Habe das Script ausprobiert, aber es funzt nicht (nur Fehlersymbol in der IE Statusleiste). Außerdem wäre es für mich noch sinnvoller, wenn sich das Bild bei Berühren der Tabelle ändern würde und nicht bei Berühren eines Links.

    kann man das nicht mit onload im body-tag preloaden?

    mfg,
    mannyk
     
  7. gerald_b

    gerald_b Kbyte

    Registriert seit:
    15. Januar 2003
    Beiträge:
    259
    evtl. ist da noch ein kleiner Schreibfehler drin, statt

    document.getElementById("tabelle").style.background-image ="url(bild1.jpg)"

    könnte es

    document.getElementById("tabelle").style.backgroundImage="url(bild1.jpg)"

    heißen; Javascript ist da etwas penibel...
     
  8. Gast

    Gast Guest

    versuchs mal so
    <script>
    function changetab()
    {
    document.getElementById("tabelle").style.background-image ="url(bild1.jpg)"
    }
    </script>
    <table style="background-image:url(bild.jpg)" id="tabelle">
    <tr>
    <td>...</td>
    </tr>
    </table>

    <a href="javascript:changetab()">Test</a>

    habs noch nicht getestet.
    aber so in etwa sollte man das hintergrundbild ändern können.
    allerdings hat dies script auch einen nachteil! die grafik wird erst dann geladen, wenn sie eingesetzt wird. bei l
    langsamen verbindungen dauert es....
     
  9. gerald_b

    gerald_b Kbyte

    Registriert seit:
    15. Januar 2003
    Beiträge:
    259
    Hi,

    innerhalb des TABLE-Tags fügst Du

    onMouseover="goover()" id="Tabelle"

    ein, wobei 'goover' als Funktion eingebaut wird, z.B.

    <HEAD>
    <SCRIPT type="text/javascript">
    <!--
    function goover()
    {
    ... hier muss der Code für den Bildwechsel rein, evtl. mit

    document.getElementById("Tabelle")

    das Objekt besorgen und dann das Hintergrundbild verändern;

    Beispiel für die Änderung der Rahmenfarbe:

    document.getElementById("Tabelle").style.border="thin solid red";
    }
    //-->
    </SCRIPT>


    Hoffentlich hilft's


    Gerald
     
  10. mannyk

    mannyk Halbes Megabyte

    Registriert seit:
    6. Juli 2000
    Beiträge:
    590
    Hi!
    vermutlich ja. Das Problem bei mir ist der Syntax, wie ich die Roll over Geschichte in den Table-Tag krieg, dass sich das Hintergrundbild 'bild.jpg' zu 'bild1.jpg' ändert.

    Also wohl irgendwo hierrein :)


    • <table width="100" border="0" cellspacing="0" cellpadding="0" background="bild.jpg">
      <tr>
      <td>&nbsp;</td>
      </tr>
      </table>

    mfg,
    manny
     
  11. gerald_b

    gerald_b Kbyte

    Registriert seit:
    15. Januar 2003
    Beiträge:
    259
Status des Themas:
Es sind keine weiteren Antworten möglich.

Diese Seite empfehlen