[JavaScript] mouseover bei hintergrundgrafik?

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Buzzer, 23. August 2007 .

  1. 23. August 2007
    mouseover bei hintergrundgrafik?

    Gibt es die möglichkeit, den Befehl mouseover, auch bei der Hintergrundgrafik einer Tabelle anzuwenden???

    Momentan habe ich folgenden Quelltext:

    Code:
    <td
     style="height: 30px; width: 100px; background-image: url(.../images/navi1.jpg); background-repeat: no-repeat; text-align: center;"><span
     style="color: rgb(255, 255, 255); font-weight: bold;">Home</span></td>
    
    Nun möchte ich das sich die Hintergrundgrafik von navi1.jpg auf navi1mo.jpg ändert wenn man mit der Maus drüberfährt. Somit habe ich den Vorteil das ich die Tabellen beliebig beschriften kann und keine einzelnen buttons mit Beschriftung herstellen muss.

    Zudem habe ich ein weiteres Problem. Ich vermute diese stelle:
    Code:
    url(.../images/navi1.jpg)
    (die ... stehen für den Pfad der sich aber direkt auf meinen PC bezieht.) falsch ist. Ich hätte aber gerne das er es kapiert wenn da nur "/images/navi1.jpg" steht. Also so das er automatisch den im selben Ordner, der index.html, befindenden Ordner "images" benutzt. Damit das ganze nachher auch auf dem Webspace läuft.

    für Hilfe giebt es natürlich Bewertungen und meinen grenzenlosen Dank

    grz Buzzer
     
  2. 23. August 2007
    AW: mouseover bei hintergrundgrafik?

    Code:
    <script>
     function hover(id,img,img2) {
     elm = document.getElementById(id);
     elm.style.backgroundImage = (elm.style.backgroundImage == 'url('+img+')') ? 'url('+img2+')' : 'url('+img+')';
     }</script>
    HTML:
    <table>
     <tr>
     <td style="width:500px;height:500px;background-image:url('images/bla1.gif');" onMouseOver="hover('tdata','images/bla1.gif','images/bla2.gif');" onMouseOut="hover('tdata','images/bla1.gif','images/bla2.gif');" id="tdata">
     ok.
     </td>
     </tr>
    </table>
    
    Beispielsweise.

    Wenn du auf einen relativen Pfad verweist kannst du afaik entweder "./images/blubla" benutzen, der punkt sorgt dafür das das Grundverzeichnis das von der HTML Datei ist, oder einfach "images/blubla".
    Der Slash am Anfang bringt dich bei Unix Systemen in das root Verzeichnis, dann müsstest du den vollständigen Pfad angeben. (oder so.)
     
  3. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.