Autor Zpráva
lu.sochr
Profil *
Ahoj všichni,

mám problém, ke kterému se mi nikde nepodařilo najít řešení. Dělám jeden projekt, ve kterém mám klasické menu s odkazy z grafických tlačítek a ke každé položce menu je dole na stránce také malá fotografie, která také funguje jako odkaz na stejné místo jako grafické tlačítko, ke kterému patří. Můj problém je, že tyto tlačítka i fotografie jsou částečně průhledné pomocí CSS opacity a já bych potřeboval aby, když najedu na tlačítko nebo fotografii myší, tak aby se zneprůhlednilo jak tlačítko tak obrázek.

Zde je část mého kódu pro přehlednost:
<div id="page_wrap">

        <div id="menu">
      
            <a href="odkaz1.html"><img src="images/tlacitko_odkaz1.png"></a>
    
            <a href="odkaz2.html"><img src="images/tlacitko_odkaz2.png"></a>
      
            <a href="odkaz3.html"><img src="images/tlacitko_odkaz3.png"></a>
      
        </div>
      
        <a href="odkaz1.html"><img id="odkaz1" src="images/odkaz1.png"></a>
    
        <a href="odkaz2.html"><img id="odkaz2" src="images/odkaz2.png"></a>
    
        <a href="odkaz3.html"><img id="odkaz3" src="images/odkaz3.png"></a>
    
    </div>

Moje první myšlenka bylo na to jít přes CSS a:hover, ale ten ovlivňuje pouze ten daný element a nikoliv druhý, poté jsem zkoušel přes javascript onmouseover a onmouseout, ale tím se mi podařilo zase naopak zprovoznit zneprůhlednění pouze u druhého elementu než nad kterým jsem měl kurzor. Potřeboval bych nějaký způsob aby zneprůhlednily vždy oba odkazy které k sobě patří bez ohlednu jestli najedu na tlačítko nebo fotografii.

Lámu si nad tím hlavu už hrozně dlouho a jsem úplně v koncích, proto moc prosím o jakoukoliv radu.

Předem moc díky,
Luboš
Sir Tom
Profil
lu.sochr:
Také ahoj,
to JS je cesta dobrým směrem - můžeš sem dát kód? Stačí asi přidat pouze 1 příkaz do něj.
joe
Profil
Klidně můžeš použít samotné CSS a to tak, že obrázky umístíš za jednotlivé obrázky tlačítek a poté je napozicuješ absolutně.
Lu.Sochr
Profil *
Sir Tom:
pokoušel jsem se to udělat nějak následovně:
<a href="odkaz1.html" onmouseover ="document.getElementById('odkaz1').style.opacity='1';" onmouseout  ="document.getElementById('odkaz1').style.opacity='0.8';" 

Ale to fungovalo pouze tak, že se zneprůhlednila fotka ale ne tlačítko. Šlo by to udělat třeba nějak, že bych fotce i tlačítku přiřadil stejnou třídu (class) a pak přes nějakou jinou JS funkci?
Keeehi
Profil
Lu.Sochr:
Když to nastavuješ jen jednomu (tomu s id odkaz1) tak se nemůžeš divit, že se změní jen jeden. Pokud mají oba id odakaz1 tak se také nemůžeš divit, protože stejné id má být na stránce unikátní.

Šlo by to udělat třeba nějak, že bych fotce i tlačítku přiřadil stejnou třídu (class) a pak přes nějakou jinou JS funkci?
To by bylo nejlepší řešení.
Lu.Sochr
Profil *
Keeehi:
Nastavil jsem to u všech odkazů, tady jsem napsal jen jednu řádku, protože Sir Tom žádal, abych mu napsal JS kód, který jsem použil.

Problém však byl, že poté mi každé tlačítko nebo fotografie zneprůhledňuje svůj protějšek, já bych ale potřeboval aby zneprůhlednil jak svůj protějšek, tak i sám sebe.

Mohl bys mi napsat jak by se to dalo řešit přes tu class funkci?

Předem moc děkuji,
Luboš
Sir Tom
Profil
Lu.Sochr:
Můj postup je takový, že budeš volat u určitých elementů funkci (při najetí a odjetí myši) s parametrem. Parametr je nějaké číslo (například). Tato funkce bude podle svého parametru měnit opacity u těch elementů, jejichž id bude končit na onen parametr. Čili jedna funkce a parametr bude určovat, co změní opacity.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0