Autor Zpráva
marcus33cz
Profil
Mám na stránkách dva odkazy (defaultlengthA a defaultlengthB) - a potřebuji, aby při přejetí nad jedním z nich vždy změnily barvu textu (na bílou) oba z nich.
Při odjetí myši zase musí změnit barvu na původní modrou.
S Javascriptem vůbec nedělám, tak jsem podle jedné stránky spatlal toto:
		<a href='spustit' id='defaultlengthA'
      onMouseOver="document.getElementById('defaultlengthB').style.color='white'
      document.getElementById('defaultlengthA').style.color='white'"
      onMouseOut="document.getElementById('defaultlengthB').style.color='#3A65A8'
      document.getElementById('defaultlengthA').style.color='#3A65A8'"
      >
     Odkaz 1</a>

            <a href='' id='defaultlengthB'
            onMouseOver="document.getElementById('defaultlengthA').style.color='white'
            document.getElementById('defaultlengthB').style.color='white'"
            onMouseOut="document.getElementById('defaultlengthA').style.color='#3A65A8'
            document.getElementById('defaultlengthB').style.color='#3A65A8'"
            >Odkaz 2</a>


A ještě abych nezapomněl živou ukázku: http://shoutkey.com/rave

Rád bych se zeptat, jestli toto nejde řešit nějak elegantněji, protože se mi nelíbí, jak je to dlouhý. :-) Zkoušel jsem to udělat přes třídu a to mi nešlo, mám ale podezření, že to byla spíš moje chyba v syntaxi než že by to nebylo možné.
joe
Profil
Pomocí "unobtrusive javascript", tedy oddělení JavaScriptu od HTML, tak, že třeba parentovi těm odkazům dáš nějaké id a pak na všechny potomky (čili odkazy) nastavíš události onmouseover a onmouseout.

Takové věci ale už pomocí JavaScriptu neřeším, je na to lepší metoda, CSS transitions, i když ne všechny prohlížeče to zvládají (IE zatím ne, FireFox velmi pomalu i ve čtyřkové desítkové betaverzi (jakjinak), Opera dobře a jádro webkit výborně)
Chamurappi
Profil
Reaguji na marcuse33cz:
Změň třídu (tedy vlastnost className) společnému rodiči, zbytek udělá CSS.

mám ale podezření, že to byla spíš moje chyba v syntaxi
Ukaž.


Reaguji na joa:
Takové věci ale už pomocí JavaScriptu neřeším, je na to lepší metoda, CSS transitions, i když ne všechny prohlížeče to zvládají
To si protiřečí — lepší metoda je ta, která spolehlivě funguje všude. V Exploreru jdou udělat přechody pomocí filtrů (možná s menší pomocí v behavioru) a také by to před deseti lety (nebo i teď) těžko někdo prohlásil za lepší metodu.

Když nad tím přemýšlím, tak vůbec nechápu, jak souvisí CSS transitions s tím, na co se ptá. Mohl bys dodat ukázku?
joe
Profil
Chamurappi:
Takové efekty dá se říct, že jsou jen pro oko, aby to vypadalo trochu lépe.
Tady ale není řeč o přechodech, ale o skrývání elementů a nastavování barev. Pomocí transitions v CSS se tak vytvoří animace, která by jinak musela být psána v JavaScriptu (zbytečně), když to nyní podporují prohlížeče nativně.

Když nad tím přemýšlím, tak vůbec nechápu, jak souvisí CSS transitions s tím, na co se ptá
Jestli jsem to pochopil dobře, problém se týká toho najíždění na bubliny (22, 44, 88 otázek), trochu bych to přestyloval a pak by to pomocí transitions právě šlo. V prohlížečích, co to nezvládají by to vypadalo stejně, ty co to zvládají, tam by to vypadalo lépe :-)
Chamurappi
Profil
Reaguji na joa:
Furt nechápu. Vždyť se vůbec neptal na animace. Pointou otázky je změna barvy dvou odkazů naráz.
joe
Profil
Chamurappi:
Koukám, trochu jsem ulítnul (pořád jsem z těch transitions tak nadšenej :-)), tak to pardón, ale byly by tam hezké. Nicméně to s tím přestylováním platí, udělal bych to takhle (pro marcus33cz):

Jako hlavní odkazy by byly ty typy testů (22/44/88), v těchto odkazech by byl v každém vnořen například nějaký span. Při najetí třeba na 22 se přebarví text "Spustit". To samé s tím popisem, ve skutečnosti by v dokumentu byl pořád vidět. Tímto způsobem jak to máš se vyhledávače nic nedozví.

Odkaz "Spustit" a "88" nevede na tu samou stránku, nevím proč mají být označeny stejně a jen ty dva? Nebo to má platit pro všechny? Můj způsob by sice nefungoval tak, že po najetí by se zase obarvil ten druhý, ale i z logického hlediska mi to nepřijde jako správné řešení. Ať si každý prostě vybere, jaký test chce...

EDIT: původně jsem totiž myslel, že se jedná o něco jiného - proto ty animace.

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: