Mam problem z efektem rollover. Mianowicie dziala idealnie, jednak chcialbym cos do niego dodac. Strona sklada sie z 3 obrazkow z efektem rollover. Po najechaniu na obrazek staje sie kolorowy, klikamy i pieknie nas przenosi tam gdzie trzeba. Jednak chcialbym jeszcze dodac napis pod spodem po najechaniu na konkretny obrazek.
przed najechaniem:
po najechaniu:
Napis chcialbym, zeby byl w formie obrazka.
Oto kod:
Kod: Zaznacz cały
<body>
<div id="kontener">
<ul>
<li><a href="http://www.onet.pl"onmouseover="rollover_pks.src='grafika/logo_pks_odbicie.png'" onmouseout="rollover_pks.src='grafika/logo_pks_odbicie_szare.png'"><img src="grafika/logo_pks_odbicie_szare.png"
name="rollover_pks" alt="Przedsiębiorstwo Przewozu Towarów" width="132" height="245"/></a></li>
<li><a href="http://www.interia.pl" onmouseover="rollover_s.src='grafika/logo_s_odbicie.png'" onmouseout="rollover_s.src='grafika/logo_s_odbicie_szare.png'"><img src="grafika/logo_s_odbicie_szare.png"name="rollover_s"
alt="Stacja Kontroli Pojazdów" width="118" height="286"/></a></li>
<li><a href="http://www.wp.pl" onmouseover="rollover_l.src='grafika/logo_l_odbicie.png'" onmouseout="rollover_l.src='grafika/logo_l_odbicie_szare.png'"><img src="grafika/logo_l_odbicie_szare.png" name="rollover_l"
alt="Ośrodek Szkolenia Kierowców" width="124" height="247"/></a></li>
</ul>
</div>
<div id="napis"><!--<img src="grafika/napis_pks.png">--></div>
</body>
</html>
Wklejam jeszcze plik stylu, chociaz chyba jest to zbedne:
Kod: Zaznacz cały
body
{
background-image: url(../grafika/tlo.jpg);
background-repeat: repeat-x;
margin:0;
padding:0;
}
div#kontener
{
position:absolute;
width:700px;
height:300px;
margin-top:-150px;
margin-left:-350px;
left:50%;
top:50%;
}
div#kontener ul
{
margin:0;
padding:0;
margin-left:auto;
margin-right:auto;
float:none;
width:auto;
text-align:center;
}
div#kontener li
{
margin:0;
padding:0;
padding-left:40px;
padding-right:40px;
display: inline;
}
img
{
border:0;
}
a:active, a:focus
{
outline: none;
}
div#napis
{
position:absolute;
width:800px;
height:60px;
margin-left:-400px;
left:50%;
top:75%;
text-align:center;
}