XraYSoLo
Senior HTML'ler
hi zusammen,
"und ob ich schon wandelte im finsteren tal, so fürchte ich nichts..."
...denn es gibt ja html.de ;-).
da ich schon länger nichts mehr in richtung gestaltung per CSS gemacht habe, ist mein wissen etwas eingerostet und muss aufgefrischt werden - wo wäre ein besserer platz als hier?
eben, gibt keinen
.
der folgende code beschreibt ein (schwarz-weiß-)bild, dass in eine 3x3-tabelle eingelassen ist. hovere ich über eines der bilder, wird mittels CSS-anweisung das schwarz-weiß-bild durch ein farbiges ersetzt. der effekt ist also eine simple einfärbung.
so weit so gut, hab' ich noch hinbekommen.
JETZT soll aber an der markierten stelle "hier sollte der dynamische text stehen..." ein text erscheinen, wenn man über eines der bilder fährt. jedes bild soll einen anderen satz beinhalten, es reicht aber, wenn mir mal gesagt wird, wie man einen beliebigen schriftzug beim bild-hover an der markierten stelle anzeigt.
thx schonmal
Nils aka XraYSoLo
"und ob ich schon wandelte im finsteren tal, so fürchte ich nichts..."
...denn es gibt ja html.de ;-).
da ich schon länger nichts mehr in richtung gestaltung per CSS gemacht habe, ist mein wissen etwas eingerostet und muss aufgefrischt werden - wo wäre ein besserer platz als hier?
eben, gibt keinen
.der folgende code beschreibt ein (schwarz-weiß-)bild, dass in eine 3x3-tabelle eingelassen ist. hovere ich über eines der bilder, wird mittels CSS-anweisung das schwarz-weiß-bild durch ein farbiges ersetzt. der effekt ist also eine simple einfärbung.
so weit so gut, hab' ich noch hinbekommen.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Sigi schneiden</title>
<style type="text/css">
<!--
.spacer { background-color:#FFFFFF; width:1px; height:1px; }
.sigi_04_01 { background-image:url(sigi_04_01.png); width:100px; height:133px; }
.sigi_04_02 { background-image:url(sigi_04_02.png); width:100px; height:133px; }
.sigi_04_03 { background-image:url(sigi_04_03.png); width:100px; height:133px; }
.sigi_04_04 { background-image:url(sigi_04_04.png); width:100px; height:133px; }
.sigi_04_05 { background-image:url(sigi_04_05.png); width:100px; height:133px; }
.sigi_04_06 { background-image:url(sigi_04_06.png); width:100px; height:133px; }
.sigi_04_07 { background-image:url(sigi_04_07.png); width:100px; height:133px; }
.sigi_04_08 { background-image:url(sigi_04_08.png); width:100px; height:133px; }
.sigi_04_09 { background-image:url(sigi_04_09.png); width:100px; height:133px; }
.sigi_04_01:hover { background-image:url(vocal2_01.jpg); width:100px; height:133px; }
.sigi_04_02:hover { background-image:url(vocal2_02.jpg); width:100px; height:133px; }
.sigi_04_03:hover { background-image:url(vocal2_03.jpg); width:100px; height:133px; }
.sigi_04_04:hover { background-image:url(vocal2_04.jpg); width:100px; height:133px; }
.sigi_04_05:hover { background-image:url(vocal2_05.jpg); width:100px; height:133px; }
.sigi_04_06:hover { background-image:url(vocal2_06.jpg); width:100px; height:133px; }
.sigi_04_07:hover { background-image:url(vocal2_07.jpg); width:100px; height:133px; }
.sigi_04_08:hover { background-image:url(vocal2_08.jpg); width:100px; height:133px; }
.sigi_04_09:hover { background-image:url(vocal2_09.jpg); width:100px; height:133px; }
-->
</style>
</head>
<body>
<table border="0">
<tr>
<td class="sigi_04_01"></td>
<td class="spacer"></td>
<td class="sigi_04_02"></td>
<td class="spacer"></td>
<td class="sigi_04_03"></td>
</tr>
<tr>
<td class="spacer"></td>
<td class="spacer"></td>
<td class="spacer"></td>
<td class="spacer"></td>
<td class="spacer"></td>
</tr>
<tr>
<td class="sigi_04_04"></td>
<td class="spacer"></td>
<td class="sigi_04_05"></td>
<td class="spacer"></td>
<td class="sigi_04_06"></td>
</tr>
<tr>
<td class="spacer"></td>
<td class="spacer"></td>
<td class="spacer"></td>
<td class="spacer"></td>
<td class="spacer"></td>
</tr>
<tr>
<td class="sigi_04_07"></td>
<td class="spacer"></td>
<td class="sigi_04_08"></td>
<td class="spacer"></td>
<td class="sigi_04_09"></td>
</tr>
</table>
<p>
hier sollte der dynamische text stehen...
</body>
</html>JETZT soll aber an der markierten stelle "hier sollte der dynamische text stehen..." ein text erscheinen, wenn man über eines der bilder fährt. jedes bild soll einen anderen satz beinhalten, es reicht aber, wenn mir mal gesagt wird, wie man einen beliebigen schriftzug beim bild-hover an der markierten stelle anzeigt.
thx schonmal
Nils aka XraYSoLo
