| Autor | Zpráva | ||
|---|---|---|---|
| Novy Profil |
#1 · Zasláno: 13. 7. 2011, 19:45:14
Chtěl bych si dát na web obrázek koule a, když na ten obrázek někdo najede myší, tak se v kouli zobrazí text, jak to udělat? Mělo by to být v JavaScriptu.
|
||
| Sir Tom Profil |
#2 · Zasláno: 13. 7. 2011, 20:03:05
Udělej div s pozadím oné koule (pochopitelně uprav šířku a výšku divu dle rozměrů obrázku) a pak když najede někdo na ten div, tak se změní jeho obsah:
<div id="koule" onmouseover="zobrazitText()"></div>
function zobrazitText(){
document.getElementById("koule").innerHTML = "zobrazovaný text";
}
|
||
| Novy Profil |
#3 · Zasláno: 13. 7. 2011, 20:09:48
nezobrazuje se mi obrázek, má to vypadat takhle?
<script type="text/javascript"> function zobrazitText(){ document.getElementById("koule.png").innerHTML = "Text"; } </script> |
||
| Sir Tom Profil |
#4 · Zasláno: 13. 7. 2011, 20:19:53
Novy:
Samozřejmě, že ten JS kód má být mezi značkami <script> </script>. v getElementById("koule") má být identifikátor (ID) toho divu - pak už jenom u toho divu navolíš obrázek jako pozadí. V CSS: #koule {background-image: url(koule.png); width: ABCpx; height: KLMpx; } |
||
| Novy Profil |
#5 · Zasláno: 13. 7. 2011, 20:31:42
šlo by udělat, aby tam ten text byl jen při najetí myši?
|
||
| panther Profil |
#6 · Zasláno: 13. 7. 2011, 20:33:45
Novy:
v JS onmouseover, případně v CSS :hover.
|
||
| Novy Profil |
#7 · Zasláno: 13. 7. 2011, 20:37:16
je to tam <div id="koule" onmouseover="zobrazitText()"></div>, ale stejně tam ten text zůstane
|
||
| panther Profil |
#8 · Zasláno: 13. 7. 2011, 20:38:43
Novy:
nestačí jen kopírovat, ale přemýšlet, případně si něco dohledat. onmouseover, onmouseout
|
||
| peta Profil |
#9 · Zasláno: 14. 7. 2011, 07:51:01 · Upravil/a: peta
Novy:
Ptas se na javascript? Forum javascript je tu take. <div id="koule" onmouseover="zobrazitText()"></div>
<script type="text/javascript">
function zobrazitText()
{
document.getElementById("koule.png").innerHTML = "Text"; //???
}
</script> id = html, css id, takze "koule.png" neni id (jedine id v prikladu je id=koule), proto ti chybova konzola hlasi chybu. Vis, ze ma prohlizec chybovou konzolu pro ladeni javascriptu, ne? Nebylo by jednodussi pouzit css hover? <div class="m">
<div><img src="koule.png"><span>text1</span></div>
<div><img src="koule.png"><span>text2</span></div>
<div><img src="koule.png"><span>text3</span></div>
</div>
<style>
.m div span {display:none; position:absolute;}
.m div:hover span {display:block;}
</style>Pripadne i ten obrazek dat do css <div class="m">
<div><span>text1</span></div>
<div><span>text2</span></div>
<div><span>text3</span></div>
</div>
<style>
.m div {background:url("koule.png");}
.m div span {display:none;}
.m div:hover span {display:block;}
</style>Zkousel jsi koukat na priklady na jakpsatweb.cz zalozka css - priklady nebo javascript - priklady? |
||
| panther Profil |
#10 · Zasláno: 14. 7. 2011, 08:40:56
peta:
„Pripadne i ten obrazek dat do css“ zrovna toto řešení nebude fungovat vždy a všude, a sice kvůli řádku .m div:hover span {display:block;}.
Novy: jsou tu dvě řešení - JS a CSS, která nejsou ekvivalentní. Jaké je pro tvůj konkrétní případ správné, není možno říci, každé se používá na něco jiného. Záleží na povaze obrázku, jestli se jedná o obrázek (img, JS) či obrázkové pozadí (background, CSS). |
||
|
Časová prodleva: 13 let
|
|||
0