wxv.pl [Problemy/Pytania] - Najeżdżanie kursorem myszki na obrazek = ukazanie innego
mmmr - 2012-06-25, 13:37
Temat postu: Najeżdżanie kursorem myszki na obrazek = ukazanie innego
Witam. Chciałabym na forum osiągnąć taki sam efekt jak np. na tym forum. Chodzi mi o to, że jak najeżdżam myszką na "step one"pokazują mi się dane rzeczy i informacje i w momencie gdy najadę na "step two" pokazuje się coś innego. Czy jest to efekt osiągnięty przez html? Wiele for tak ma a ja kompletnie nie wiem jak mogłabym osiągnąć taki efekt :( Zależy mi bardziej na czymś takim jakie jest tu (obrazki administracji). Z góry dziękuję za pomoc :)
Tatia Petrova - 2012-06-30, 17:11
To powinno ci pomóc :D
| Kod: |
<center>
<div style="width:S Z E R O K O Ś Ć T A B E L K Ipx;">
</div>
<div style="clear:both;"></div>
</center>
<div id="hm" style="display: ''; position: relative;">
<table width="100%" class="forumline" cellspacing="1" cellpadding="3" border="0" align="center">
<tr>
<td class="row1"><span class="gen"><div class="gensmall">
<script type="text/javascript">
function patonglet1() {
document.getElementById('onglet1').style.display='block';
document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='none';
document.getElementById('onglet4').style.display='none';
document.getElementById('onglet5').style.display='none';
document.getElementById('onglet6').style.display='none';
document.getElementById('onglet7').style.display='none';
document.getElementById('onglet8').style.display='none';
document.getElementById('onglet9').style.display='none';
}
function patonglet2() {
document.getElementById('onglet1').style.display='none';
document.getElementById('onglet2').style.display='block';
document.getElementById('onglet3').style.display='none';
document.getElementById('onglet4').style.display='none';
document.getElementById('onglet5').style.display='none';
document.getElementById('onglet6').style.display='none';
document.getElementById('onglet7').style.display='none';
document.getElementById('onglet8').style.display='none';
document.getElementById('onglet9').style.display='none';}
function patonglet3() {
document.getElementById('onglet1').style.display='none';
document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='block';
document.getElementById('onglet4').style.display='none';
document.getElementById('onglet5').style.display='none';
document.getElementById('onglet6').style.display='none';
document.getElementById('onglet7').style.display='none';
document.getElementById('onglet8').style.display='none';
document.getElementById('onglet9').style.display='none'}
function patonglet4() {
document.getElementById('onglet1').style.display='none';
document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='block';
document.getElementById('onglet4').style.display='block';
document.getElementById('onglet5').style.display='none';
document.getElementById('onglet6').style.display='none';
document.getElementById('onglet7').style.display='none';
document.getElementById('onglet8').style.display='none';
document.getElementById('onglet9').style.display='none'}
function patonglet5() {
document.getElementById('onglet1').style.display='none';
document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='block';
document.getElementById('onglet4').style.display='none';
document.getElementById('onglet5').style.display='block';
document.getElementById('onglet6').style.display='none';
document.getElementById('onglet7').style.display='none';
document.getElementById('onglet8').style.display='none';
document.getElementById('onglet9').style.display='none';
}
function patonglet6() {
document.getElementById('onglet1').style.display='none';
document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='block';
document.getElementById('onglet4').style.display='none';
document.getElementById('onglet5').style.display='none';
document.getElementById('onglet6').style.display='block';
document.getElementById('onglet7').style.display='none';
document.getElementById('onglet8').style.display='none';
document.getElementById('onglet9').style.display='none';}
function patonglet7() {
document.getElementById('onglet1').style.display='none';
document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='block';
document.getElementById('onglet4').style.display='none';
document.getElementById('onglet5').style.display='none';
document.getElementById('onglet6').style.display='none';
document.getElementById('onglet7').style.display='block';
document.getElementById('onglet8').style.display='none';
document.getElementById('onglet9').style.display='none';
}
function patonglet8() {
document.getElementById('onglet1').style.display='none';
document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='block';
document.getElementById('onglet4').style.display='none';
document.getElementById('onglet5').style.display='none';
document.getElementById('onglet6').style.display='none';
document.getElementById('onglet7').style.display='none';
document.getElementById('onglet8').style.display='block';
document.getElementById('onglet9').style.display='none';
}
function patonglet9() {
document.getElementById('onglet1').style.display='none';
document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='block';
document.getElementById('onglet4').style.display='none';
document.getElementById('onglet5').style.display='none';
document.getElementById('onglet6').style.display='none';
document.getElementById('onglet7').style.display='none';
document.getElementById('onglet8').style.display='none';
document.getElementById('onglet9').style.display='block';
}
</script>
<center>
<table>
<tbody>
<tr><td><div class="onglet" onmouseover="javascript:patonglet1()">W Y G L Ą D 1 G U Z I C Z K A (pierwsze to coś, na co najeżdżasz, żeby się zmieniło. Kod może być np. w div.)</div></td><td><div class="onglet2" onmouseover="javascript:patonglet2()">W Y G L Ą D 2 G U Z I C Z K A (druguie to coś, na co najeżdżasz, żeby się zmieniło. Kod może być np. w div.)</div></td></tr>
</tbody>
</table>
</center>
<br>
<center>
<table><tbody><tr><td width="100%">
<!-- MODULE 1 --><div id="onglet1" style="display: block; "><div class="message"><table><tbody><tr>
<td>
Z A W A R T O Ś Ć T E G O CO S I Ę W Y Ś W I E T L I J A K N A J E D Z I E S Z N A P I E R W S Z Y G U Z I C Z E K
(jakieś divy, jakieś obrazki, jakieś linki, fabuła, co tam sobie chcesz)
</td>
</tr>
</tbody>
</table>
</div></div>
<!-- MODULE 2 --><div id="onglet2" style="display: none; "><div class="message"><center><table><tbody><tr>
<td>
Z A W A R T O Ś Ć T E G O CO S I Ę W Y Ś W I E T L I J A K N A J E D Z I E S Z N A D R U G I G U Z I C Z E K
(jakieś divy, jakieś obrazki, jakieś linki, fabuła, co tam sobie chcesz)
</div>
</div>
</center>
</td>
</tr>
</tbody>
</table> |
Kod ze strony czart.czo.pl
|
|
|
