Autor Zpráva
klasik
Profil
Zdravím, potřeboval bych poradit, jak do tohoto kodu :

<a href=".html"><IMG SRC="images/contacts.gif" border="0" hspace="0" vspace="0" ALT="obr" align="right"></a>

mám vepsat java script tak, aby po najetí myši na obrázek se změnil na jiný. Dělá se to nějak asi s onmouseover, nebo jinak, hlavně ať to není složité a ať to jede na všech internetových prohlížečích.

Díky
PerToon
Profil
JavaScript nemusí mít každý zapnutý, takže ta spolehlivost není taková jaká chceš.
<img src="prvni.jpg" onmouseover="this.src='druhy.jpg'" onmouseout="this.src='prvni.jpg'">
Kdybys chtěl, dá se udělat trochu jiné řešení, kdy nepoužiješ JavaScript -> 100% spolehlivost a měníš pozadí odkazu.
klasik
Profil
A jak se to dělá, já to potřebuji do menu, ke najedu na obrázek a ten se změní na jiný?
PerToon
Profil
No to s tím měnícím se pozadím bohužel neumím pořádně. Prostě nastavíš obrázek jako pozadí odkazu a na událost hover toho odkazu v css navážeš změnu obrázku na pozadí. Ale myslím, že ten odkaz musí být potom blokový element aby mohl mít šířku a výšku... takže buď se porozhlédni po diskuzi, nebo doufám že se přidá se svým názorem někdo kdo tu metodu umí.
habendorf
Profil
PerToon: Právě že žádnou změnu obrázku nenavážeš, v tom je ten vtip. Jen obrázek na pozadí posuneš, čili se nic nemusí načítat.
klasik
Profil
???
Mohl by někdo ukázat ukázku, nebo tady napsat ten kod?
habendorf
Profil
http://wellstyled.com/css-nopreload-rollovers.html
Fred
Profil
Mrkni se na wellstyled.com
klasik
Profil
S tím asi nehnu, potřeboval bych to na tuto stránku do toho horního menu :
http://www.masozravky.site.cz/auto/ jak by se najelo např na Cars, tak by se to změnilo na červené.
habendorf
Profil
Já myslím, že je to tam popsáno dost jasně, ne? Čemu konkrétně nerozumíš?
klasik
Profil
Jak toto :

#menu a {
...
background: url("button.gif") top left no-repeat;
}
#menu a:hover {
...
background-image: url("button-over.gif");
}
#menu a:active {
...
background-image: url("button-active.gif");
}

mám zapsat do samostatného souboru CSS a ne ať je to spojeno v souboru s HTML?

Jestli tam má být i toto : /* etc... */ a k čemu to tam je?
klasik
Profil
no jo, jen takový problém, ono to asi mění jen pozadí a text zůstává stejný, ale já potřebuji přesný opak, aby to měnilo text a pozadí stejné. Ono je totiž pozadí a text jeden obrázek.
PerToon
Profil
/* */ tohle jsou poznámky, nemusí tam být a slouší k poznámkám
do samostatného souboru to uděláš tak, že to napíšeš třeba v poznámkovým bloku a uložíš jako *.css
klasik
Profil
a na co tam je to # ?
Já to dělak vždy takto : .něco a tam je #neco, jaký je v tom rozdíl?
PerToon
Profil
no jo, jen takový problém, ono to asi mění jen pozadí a text zůstává stejný, ale já potřebuji přesný opak, aby to měnilo text a pozadí stejné. Ono je totiž pozadí a text jeden obrázek. Tohle teda nechápu.... samozřejmě že to mění pozadí, to si přece chtěl... nebo o co teda jde... chceš měnit text nebo obrázek?
klasik
Profil
text a obrázek je jeden soubor ( obrázek ), ono to není tak, že je bílé pozadí a text napsán v html. Pozadí a text je udělán v graf.editoru a uložen jako jedno.
PerToon
Profil
.neco - <nějaký_tag class="neco">
#neco - <nějaký_tag id="neco">
klasik
Profil
a je to jedno, co si vyberu? jestli # nebo . ?
Anonymní
Profil *
Mel bych prosbu, delam novou webovou stranku a pouzivam v ni
funkci rollover, obrazky se mi uz meni, kdyz na ne najedu, tak se
zvyrazni
to co potrebuju a kdyz z namapovane oblasti dam mys pryc, tak se opet
zobrazi puvodni obrazek, tady je vse v pohode, ale nejak se mi do toho
nedari zakomponovat to, aby se po kliknuti na namapovanou oblast otevrelo
nove okno dle mnou zadanych parametru, jako jsou:
Height=X,Width=X,status=X,scrollbars=X,resizable=X,toolbar=X,left=X,to p=X

To co fungoje: <AREA SHAPE="RECT" HREF="1.htm"
onMouseover="document.roll.src=img1.src"
onMouseout="document.roll.src=imgOff.src" COORDS="14,9,120,48" Alt="Pro
detailní informace klikněte zde!">

tak otevre 1.htm, ale v puvodnim okne pres cely monitor a to prave nechci
a to co jsem zatim zkusil, tak to hazi chybu ve skriptu:-(

1)

<AREA SHAPE="RECT" HREF="#" target="_top" OnClick="var okno; okno =
window.open('1.htm','Height=300,Width=300,status=0,scrollbars=yes,resi zabl
e=yes,toolbar=0,left=10,top=10') onMouseover="document.roll.src=img1.src"
onMouseout="document.roll.src=imgOff.src" COORDS="14,9,120,48" Alt="Pro
detailní informace klikněte zde!">

2)

<AREA SHAPE="RECT" OnClick="var okno; okno =
window.open('1.htm','Height=300,Width=300,status=0,scrollbars=yes,resi zabl
e=yes,toolbar=0,left=10,top=10') onMouseover="document.roll.src=img1.src"
onMouseout="document.roll.src=imgOff.src" COORDS="14,9,120,48" Alt="Pro
detailní informace klikněte zde!">

Myslite si, ze by jste mi s tim nekdo dokazal poradit???
Anonymní
Profil *
Pěknej večír...
Mám toto:
<img border="0" src="img/px_051029_155129.jpg" id="obrazek" style="filter:'alpha(opacity=30, enabled=1)'" onmouseover="obrazek.style.filter='alpha(enabled=0)'" onmouseout="obrazek.style.filter='alpha(opacity=35, enabled=1)'">
V IE funguje jak má, ce Firefoxu a Opeře nikoli... Javu mám povolenu... přehlédl jsem něco??? jak to řešit???
Za jakoukoli radu dík
EiNHorn
Profil *
ja uz sem klasika pochopil... potrebuje to stejny jak ja... potrebuje aby naky obrazkovy tlacitko zrovna s textem se dalo udelat jinak nez javou nebo "this.src = etc..." ale udelat to treba v css... vim co tim myslis klasiku... ale nevim jestli je zrovna validni udelat DIV jako odkaz...
Edgar
Profil *
Anonymní: a jakou url adresu ma ta tvoje stranka??
peta
Profil *
EiNHorn
"dalo udelat jinak nez javou"
JAVA je Java Sun Runtime enviroment a je to plne hodnotny programovaci jazyk ve kterem muzes delat treba 3D strilecky.
JavaSript je uplne neco jineho.

Co se tyce toho problemu vymeny obrazku
http://www.jakpsatweb.cz/ - Zdokonalení odkazů
http://www.jakpsatweb.cz/odkazy.html

Pokud to chces menit u obrazku, jako SRC Javascriptu se nevyhnes; a nechces-li pouzit Javu nebo Flash nebo jiny programovaci jazyk k tomuto stvoreny... Je ale mozne napsat Javascript do CSS a tim padem se ti spousta problemu zdanlive vyresi.
http://www.volny.cz/peter.mlich/www.htm#mssub6
- CSS jako expression (pro IE, pro mozilu obvykle hover funguje)
A lepsi reseni je pouzit JS, ktery ti onmouseover prida automaticky na kazdy tag, ktery ma treba nejaky classname nebo stejne jmeno nebo neco tak.

Anonymní
obrazek.style.filter='alpha(enabled=0)
To je zapis pro IE. (V IE funguje jak má, ce Firefoxu a Opeře nikoli)
Cili je to pochopitelne.
V Opere opacita nejede vubec, pouziva se transparentni obrazek.PNG.
Ve FF se pouziva
http://www.volny.cz/peter.mlich/www.htm#mssub7
(menu opacity)

Jo, a bud tak laskav a zaloz si vlastni tema.

klasik
.neco - <nějaký_tag class="neco">
#neco - <nějaký_tag id="neco">
Ano, v podstate je to jedno. ID se pouziva, pokud na dany prvek budes odkazovat pomoci JS. ID ma prednost pred class.
#neco1 .neco2 {aaa}
DIV#neco1 DIV.neco2 {bbb}
.neco2 {ccc}
DIV.neco2 {ddd}
<div id="neco2"><div class="neco1"></div></div>
(v podstate by tam melo byt BBB)
Bubák
Profil
.neco - <nějaký_tag class="neco">
#neco - <nějaký_tag id="neco">

Doplním, co psal peta.
Pokud neco bude třeba menu, hlavička stránky..., tedy to určíitě na stránce bude jen jednou, použiji #neco
Pokud neco budou třeba podnadpisy, odstavce..., tedy to na stránce bude vícekrát, použiji .neco
venca163
Profil
peta
id - mělo by na něj být do CSS odkazováno pouze z jednoho elementu...
class - třída, slouží k nadefinování něčeho, co se může uplatnit vícekrát, třeba několik tabulek s class="tabulka"
Michalmm
Profil *
Pro ty kterym neni jasny postup podle wellstyled.com doporucuji tento odkaz
Toto téma je uzamčeno. Odpověď nelze zaslat.