hover effekt

[studdy]

Also ich will in meiner navigation eine besondere Schrift haben. Ein Freund hat mir empfohlen das ich mit photoshop ein Bild von der Schrift mache und dann Einfüge. Das hab ich auch gemacht aber jetzt will ich das der Hintergrund sich verändert beim darübergehen also hab ich einfach noch ein Bild gemacht wo dasselbe draufsteht mit einem anderen hintergrund.

dann hab ihc das einfach so geschriebne td1:hover
src anderes bild das funktioniert aber nicht.

Wisst ihr wie man das macht das man wenn man über den td geht sich ein anderes bild einbindet????

gruß studdy

[Fitz]

ich würd dann einfach sagen einmal mit background-image und beim hover dann halt auch

[Eyecatcher]

Leider funktioniert diese Lösung mit td:hover nicht im IE. Daher musst du auf einen Hack oder eine Javascript Lösung zurückgreifen, eine richtig einfache Alternative gibts (wegen dem IE) nicht.

Lösung fürn FF:

Code: Alles auswählen

<td id="nav1"></td>

#nav1 {
background:url(bild1.jpg);
}

#nav1: hover {
background:url(rollover1.jpg);
}

[imafox]

Code: Alles auswählen

<td id="nav1"><a class="hoverpic" href="seite.html">Link!</a></td>

.hoverpic {
  display:block;
  background:url(linkbild1.jpg);
}

.hoverpic:hover {
  background:url(linkbild2.jpg);
}

Eine, wie ich finde, elegantere Möglichkeit!

[studdy]

Danke imafox deines geht.

[studdy]

Also deines geht shcon mal imafox es bleibt aber ein problem.
also bei meinem normalen Bild des er anzeigt ist alles ok, mein hover bild ist etwas gelblich , und alles was zwischen <a></a> steht wird dazu gemacht einfach also z.B. steht asdf dazwischen steht nich nur Forum sondern forum und dahinter noch asdf. wisst ihr was das ist?

Code: Alles auswählen

<td id="nav1"><a class="hoverpic" href=main.php?inhalt=kritik>asdf</a></td>

Code: Alles auswählen

td
{
    width:150px;
    color: #000000;
    text-decoration: none;
    font-family: Arial;
    font-size: medium;
    text-align: center;
    height:20px;
}



.hoverpic {
  display:block;
  background:url(Kritik.jpg);
}

.hoverpic:hover {
  background:url(Kritiklink.jpg);
}

Danke für eure hilfe.

gruß studdy

[mib-films]

Ich finde die einfachste Lösung wäre, wenn du schon Photoshop hast, mit einem transparenten .gif Bild zu arbeiten. Dann einfach die Hintergrund Farbe per hover und "background-color" ändern. Wäre für mich eigentlich die naheliegenste Lösung.

mfg Mike

[studdy]

sag mal den code bitte weil ich habs jetzt ewig lang anderes probiert aber ich bekomms net hin. Total komische Fehler treten da auf.

mfg studdy

[Scooby]

Ich würde es einfach mal so machen:

Code: Alles auswählen

      <a href="link.html"
        onmouseover="wechsel1.src='images/bild1.jpg';"
        onmouseout="wechsel1.src='images/bild2.jpg';">
        <img src="images/bild1.jpg" width="Wert" height="Wert" name="wechsel1">
      </a>