tabellenspalte ändert bild bei mouseover! help pls!
- Themenstarter phil-ip
- Beginndatum
- Status
SilentWarrior
Erfahrenes Mitglied
HTML:
CSS:
Das funktioniert aber im IE nicht, für diesen musst du dir also wohl oder übel eine JS-Lösung einfallen lassen. (Es sei denn, du machst einen Link über die gesamte Tabellenzelle, aber das wäre auch nicht das Rosarote vom Ei.)
HTML:
<td id="zelle1">...</td>
HTML:
#zelle1:hover {
background-image:url('bild.gif');
}
M
Maik
Hallo phil-ip,
da die Grafik erst beim mouseover angezeigt werden soll, ist es ratsam, einen Image-Preloader zu installieren, der sicherstellt, dass die Grafik im Browsercache liegt:
Im zweiten Schritt erzeugst du im Style-Sheet die CSS-Klassen .normal und .hover für die Tabellenzelle mit den gewünschten CSS-Eigenschaften:
Zuletzt notierst du in den <td>-TAGs die Attribute class="normal" , onmouseover="this.className='hover'" und onmouseout="this.className='normal'".
Mit Hilfe der Script-Anweisung this.className='[ KlassenName ]' wird die entsprechende CSS-Klasse aufgerufen und so die Tabellenzelle dynamisch gestaltet:
[ Browsercheck: IE 5.5, Mozilla 1.6, NN 7.0, Opera 7.23 ]
greez, maik.l
da die Grafik erst beim mouseover angezeigt werden soll, ist es ratsam, einen Image-Preloader zu installieren, der sicherstellt, dass die Grafik im Browsercache liegt:
HTML:
<head>
<!-- Image-Preloader -->
<script type="text/javascript">
<!--
bgImage = new Image(150,20); // (Grafikweite,-höhe)
bgImage.src = "bgImage.jpg"; // Grafik-URI
//-->
</script>
</head>
<body>Im zweiten Schritt erzeugst du im Style-Sheet die CSS-Klassen .normal und .hover für die Tabellenzelle mit den gewünschten CSS-Eigenschaften:
Code:
td.normal
{
width: 150px;
height: 20px;
background-color: #dfdfdf;
}
td.hover
{
width: 150px;
height: 20px;
background-image: url(bgImage.jpg);
}Mit Hilfe der Script-Anweisung this.className='[ KlassenName ]' wird die entsprechende CSS-Klasse aufgerufen und so die Tabellenzelle dynamisch gestaltet:
HTML:
<td class="normal" onmouseover="this.className='hover'" onmouseout="this.className='normal'">Tabellenzelle</td>greez, maik.l
- Status
