Autor | Zpráva | ||
---|---|---|---|
HonzaH Profil * |
#1 · Zasláno: 5. 9. 2007, 10:14:01
ahoj,
mám problém na stránkách s tímhle skriptem. Potřebuji tohle: Na stránce bude krátký seznam (dělaný pomocí elementu <li>), dejme tomu tak 7 vět pod sebou. Ty řádky bych nejspiš uzavřel každý do DIVu, aby se daly formátovat . Potřebuji, aby, když přejedu (OnMouseOver) jednotlivý řádek toho seznamu, tak se to třeba zvýrazní, trochu zvětší a může změnit barvu pozadí, po vyjetí (OnMouseOut) se to zase vrátí do původního tvaru . ALE navíc, nad tím seznamem by se měl měnit malý obrázek, aktuálně po najetí na každý řádek toho seznamu aby tam byl jiný. Takže se budou v podstatě měnit najednou vždy 2 věci, ten řádek plus k němu nahoře nad ním obrázek. Taky je možná varianta, že místo textů v tom seznamu budou podlouhlé obrázky s textem, to kvůli použitému fontu, který by se jinak nezobrazil. Co se podařilo: Jediné, co se mi podařilo rozchodit je změna barvy řádku po přejetí a vyjetí myši. <DIV onMouseOut="this.style.backgroundColor='white';" onMouseOver="this.style.backgroundColor='orange';" >obsah řádku</DIV> - mění to ale najednou jen jednu věc. <DIV onMouseOut="this.style.backgroundColor='white';font-weight='bold'" onMouseOver="this.style.backgroundColor='orange';" >obsah řádku</DIV> tohle už nešlo, to takle skládat za sebou, nevím, jestli se to vůbec může použít. Proto jsem zkusil tohle, aby to měnilo najednou víc věcí, nadefinovat to do stylu a ten použít: <DIV onMouseOver="this.className='over'" onMouseOut="his.className='over2'">obsah řádku</DIV> v externím stylu: .over {background-color:red;color: Blue;font-weight: bold;} .over2 {color: red;font-weight: bolder;font-style: italic;} ale prostě nic to nedělá. Vůbec mi to nechte brát ty styly. A navíc mi ještě k tomu zbývá dodělat, aby to měnilo i ten obrázek podle každého řádku jiný. Vím jenom, že by to mělo být nějak jako <img id="obrazek" src="obrazek1"> .... Naprosto netuším, jak to propojit s předchozím, nejsem programátor a JavaScriptu nerozumím. I ty předchozí příklady jsem si našel na internetu a použil je. CSS jakžtakž zvládám jednodušší věci. Pokud byste věděli jak na to, byl bych vděčný. Díky Honza |
||
habendorf Profil |
#2 · Zasláno: 5. 9. 2007, 10:29:46
his -> this
Obrázek přes document.getElementById().src=... , třeba |
||
HonzaH Profil * |
#3 · Zasláno: 5. 9. 2007, 10:45:50
toho
his - this jsem si všimnul už taky, ale nějak mi to stejně bohužel nefachá :-) |
||
Odín Profil * |
#4 · Zasláno: 5. 9. 2007, 11:56:00
ja jsem taky zkusil delat v javaScriptu() teprve pred par tydnů, ale asi bych to udělal takhle:
<img id="obrazek" src="obrazekPuvodni.jpg"> <DIV onMouseOut="this.style.backgroundColor='white'; this.style.font-weight='bold'; document.getElementById('obrazek').src=obrazekDruhy;" onMouseOver="this.style.backgroundColor='orange'; document.getElementById('obrazek').src=obrazekPuvodni;"" >obsah řádku</DIV> Ale nezkoušel jsem to. Pak dej vědět.:-) |
||
Odín Profil * |
#5 · Zasláno: 5. 9. 2007, 11:57:56
jo mam tam trochu zmatky sry, oprava:
<img id="obrazek" src="obrazekPuvodni.jpg"> <DIV onMouseOut="this.style.backgroundColor='white'; this.style.font-weight='bold'; document.getElementById('obrazek').src=obrazekDruhy;" onMouseOver="this.style.backgroundColor='orange'; document.getElementById('obrazek').src=obrazekPuvodni;" >obsah řádku</DIV> Ale nezkoušel jsem to. Pak dej vědět.:-) |
||
HonzaH Profil * |
#6 · Zasláno: 5. 9. 2007, 12:32:42
ODÍN
tak jsem to zkusil a nic to nedělalo. zkusil jsem treba i dat tu cestu k tomu obrazku ve skriptu do uvozovek, carek, zavorek a nic :-) <img id="obrazek" src="internet-prouzek-puvodni.png"> <DIV onMouseOut="this.style.backgroundColor='white'; this.style.font-weight='bold'; document.getElementById('obrazek').src=('internet-prouzek1.png');" onMouseOver="this.style.backgroundColor='orange'; document.getElementById('obrazek').src=('internet-prouzek-puvodni.png' );" >obsah řádku</DIV> |
||
habendorf Profil |
#7 · Zasláno: 5. 9. 2007, 12:36:36
fontWeight
|
||
HonzaH Profil * |
#8 · Zasláno: 5. 9. 2007, 12:38:16
ale tedko uz malá změna !!
prohodil jsem obrázky, a po najetí na řádky se to už změní správně, ale po vyjetí se nechce vracet původní obrázek <DIV onMouseOut="this.style.backgroundColor='white'; this.style.font-weight='bold'; document.getElementById('obrazek').src=('internet-prouzek-puvodni.png' );" onMouseOver="this.style.backgroundColor='orange'; document.getElementById('obrazek').src=('internet-prouzek1.png');" >obsah prvniho řádku</DIV> <DIV onMouseOut="this.style.backgroundColor='white'; this.style.font-weight='bold'; document.getElementById('obrazek').src=('internet-prouzek-puvodni.png' );" onMouseOver="this.style.backgroundColor='orange'; document.getElementById('obrazek').src=('internet-prouzek1.png');" >obsah druheho řádku</DIV> |
||
HonzaH Profil * |
#9 · Zasláno: 5. 9. 2007, 12:46:37
Habendorf
jj, díky, sem *****, tohle není vlastně CSS, tady to musí být pohromadě bez pomlček a rozlišovat písmena, dokonce jsem se to dneska někde dočet a na jednom pokusném vzorku to i tak udělal Odín už to funguje, chyba bylo v tom font-weight, jakmile jsem to opravil na fontWeight, po vyjetí se už vrací původní obrázek a celý skript už snad funguje podle mých představ Takže tohle je výsledný a fungující kód, styly těch DIVů si ještě upravim, to už nějak zvládnu: <img id="obrazek" src="/internet-prouzek-puvodni.png"> <br clear="all"> <DIV onMouseOut="this.style.backgroundColor='white';this.style.font-weight= 'normal'; document.getElementById('obrazek').src='/internet-prouzek-puvodni.png' ;" onMouseOver="this.style.backgroundColor='orange';this.style.font-weigh t='bold';document.getElementById('obrazek').src='/internet-prouzek1.pn g';" >obsah prvniho řádku </DIV> <DIV onMouseOut="this.style.backgroundColor='white';this.style.font-weight= 'normal'; document.getElementById('obrazek').src='/internet-prouzek-puvodni.png' ;" onMouseOver="this.style.backgroundColor='orange';this.style.font-weigh t='bold';document.getElementById('obrazek').src='/internet-prouzek2.pn g';" >obsah druheho řádku</DIV> Moc díky všem za rady!!! Honza |
||
Časová prodleva: 17 let
|
0