Der Hover-effekt bei meiner Grafik funktioniert nicht

[Heidi]

Hallo
Ich möchte, dass wenn man mit der Maus über ein Bild geht, das Bild dann größer wird. Dazu habe ich ein kleines Bild , was immer zu sehen ist und eines, was größer ist als zweite Grafik, die nur erscheinen soll, wenn, wie schon gesagt, man mit der Maus darüber fährt.
In meinen Stylsheets hab ich folgendes geschrieben:
h1:hover {content:url(http://i6.photobucket.com/albums/y244/heidilein/foto_gro.jpg);}
und im Body steht folgendes:

<table border="0"  width="883">
 <colgroup>

<col  width="280">
    <col  width="603">

</colgroup>
 <tr>
  <td style="padding-left:30px;">
  <h1><img src="http://i6.photobucket.com/albums/y244/heidilein/lehrkche.jpg" align="left"  width="190px"  height="143px"  vspace="10px"  hspace="20px" alt="Photobucket - Video and Image Hosting">
  </h1></td>
  <td align="left">
    <font face="Verdana" color="#666666" align="left" size="2">
     ...eine Lehrküche, in der die Kinder selbst kochen können,..
    </font>
  </td>
 </tr>

</table>

Ich dachte eigentlich so müßte es funktionieren, aber es geht nicht. Bei self-html hab ich natürlich auch schon gesucht und bin fündig geworden, aber mit dieser Hintergrundgrafik funktioniert das genauso wenig.
Für Hilfe wäre ich sehr dankbar und bitte: Ich bin blutiger Anfänger.
Grüße Heidi

[splinter]

Hallo

h1:hover {content:url(http://i6.photobucket.com/albums/y244/heidilein/foto_gro.jpg);}

soweit ich weis funktioniert "content" nur mit ":before" und ":after", bin aber nicht sicher.

Probiers doch so:

<img src="url1" onmouseover="this.src='url2'" onmouseout="this.src='url1'" />

MfG

Splinter

[Heidi]

Ah, danke. Das sieht vielversprechend aus. Werd ich gleich mal probieren.
Danke
Heidi

[Powl]

Hallo,

Ah, danke. Das sieht vielversprechend aus.

Jo, soweit man Javaskript voraussetzen kann.

Eine reine CSS Möglichkeit findest Du hier, eine andere hier.
Ansonsten könnte man auch das kleine Bild im a als img Element angeben, und dem a das große als Hintergrund zuweisen. Sofern das img keine transparenten Pixel hat, sieht man das Hintergrundbild ja nicht (sonst musst Du es eben ausserhalb des sichtbaren Bereiches positionieren).
Beim hovern dann a img auf display:none setzen und die Dimmensionen für a:hover so groß definieren, daß das Hintergrund bild ganz 'reinpasst.
Oder so ähnlich ;)

Danke
Heidi

Bitte.
^da Powl

[Heidi]

Probiers doch so:

<img src="url1" onmouseover="this.src='url2'" onmouseout="this.src='url1'" />

MfG

Splinter

Toll! Es funtioniert!
Danke!
Grüße, Heidi