| Autor | Zpráva | ||
|---|---|---|---|
| Gecko Profil * |
#1 · Zasláno: 16. 5. 2011, 16:22:05
Zdravím,
pracuji na webu ( http://jiri.smetka.net/ ) kde bych potřeboval, aby se při hoveru na ikonku skryl v levém boxu text "Pevný text, který zmizí při hoveru na obrázek." a zobrazil se "Text, který se zobrazí při hover a zároveň zmizí pevný text" (text by asi byl v divu s disply:none). Nevím jakým JS toho dosáhnout, neumím ani základy :-(. Nevíte jak na to, nebo odkaz na nějaký příklad? Děkuji,. |
||
| Louka Profil |
#2 · Zasláno: 16. 5. 2011, 17:31:36 · Upravil/a: Louka
Těm textům nastav id, např:
<p id="prvni">Pevný text, který zmizí při hoveru na obrázek.</p> <p id="druhy">Text, který se zobrazí při hover a zároveň zmizí pevný text. </p> No a pak obrázku přidáš onmouseover takto (pro jednoduchost pochopení to dám do fce): <script>
function ukazText() {
document.getElementById('prvni').style.display='none';
document.getElementById('druhy').style.display='block';
}
</script>
<img src="pozadovany_obrazek" onmouseover="ukazText();">Tím se při najetí spustí funkce a změní se CSS vlastnost display. Kdybys to chtěl po odjetí myši vrátit zpátky, přidáš analogicky ještě onmouseout="skryjText();" a v té funkci bude function ukazText() {
document.getElementById('druhy').style.display='none';
document.getElementById('prvni').style.display='block';
} |
||
| Gecko Profil * |
#3 · Zasláno: 16. 5. 2011, 17:51:40
No nefunguje to tak jak bych chtěl. Uvedu topodrobněji.
Najedu na stránka - při prvním načtení se zobrazí jen: <p id="prvni">Pevný text, který zmizí při hoveru na obrázek.</p> Jakmile najedu na ikonku (hover), potřebuju, aby se <p id="prvni">Pevný text, který zmizí při hoveru na obrázek.</p> schovalo a místo něj se zobrazilo: <p id="druhy">Text, který se zobrazí při hover a zároveň zmizí pevný text. </p> a jakmile sjedu z ikonky (zruší se hover), tak potřebuju aby zmizel div druhy a zobrazil se div prvni. |
||
| Keeehi Profil |
#4 · Zasláno: 16. 5. 2011, 18:00:02
Gecko:
Tak si přečti ještě jednou [#2]. Jediný problém tam je, že Louka pojmenoval obě funkce stejně resp. zapomněl změnit u druhé funkce ukazText na skryjText. |
||
| Gecko Profil * |
#5 · Zasláno: 16. 5. 2011, 18:09:06
Jo už to šlape.
Mám to tedy takto: function ukazText() {
document.getElementById('prvni').style.display='none';
document.getElementById('druhy').style.display='block';
}
function skryjText() {
document.getElementById('druhy').style.display='none';
document.getElementById('prvni').style.display='block';
}a pak <a href="#" onmouseover="ukazText();" onmouseout="skryjText();"> ... Ještě malá technická - při prvním načtení se zobrazí oba texty, (po rozklikání už to funguje), šel by i při prvním loadu skrýt div druhy ? Díky |
||
| Keeehi Profil |
#6 · Zasláno: 16. 5. 2011, 18:11:27 · Upravil/a: Keeehi
|
||
| Gecko Profil * |
#7 · Zasláno: 16. 5. 2011, 18:15:13
Jéžiš, to mě ale molho napadnout! :-)
No nic. Díky kluci za Váš čas, pomohli jste mi ;-). |
||
| Louka Profil |
#8 · Zasláno: 16. 5. 2011, 18:35:57
Keeehi:
Díky moc, jak jsem to kopíroval, tak jsem to zeslonil. Práce kvapná, málo platná... |
||
|
Časová prodleva: 13 let
|
|||
0