Autor Zpráva
HonzaH
Profil *
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
his -> this

Obrázek přes document.getElementById().src=... , třeba
HonzaH
Profil *
toho
his - this
jsem si všimnul už taky, ale nějak mi to stejně bohužel nefachá :-)
Odín
Profil *
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 *
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 *
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
fontWeight
HonzaH
Profil *
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 *
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

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: