Menu pomocou js – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Menu pomocou js – JavaScript, AJAX, jQuery – Fórum – Programujte.comMenu pomocou js – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Onsi0
Stálý člen
20. 2. 2008   #1
-
0
-

mám na stránke takéto menu:

js



function invisible(theDiv) {
var elem = document.getElementById(theDiv);
elem.style.display = (elem.style.display == "none")?"":"none";
}

function visible(theDiv) {
var elem = document.getElementById(theDiv);
elem.style.display = (elem.style.display == "inline")?"":"inline";
}


html


<div id="menu">
<div id="l1"></div>
<div id="l2"></div>
<div onmouseout="visible('l3');invisible('l3h');" id="l3h"></div>
<div onmouseover="visible('l3h');invisible('l3');" id="l3"></div>
<div id="l4"></div>
<div onmouseout="visible('l5');invisible('l5h');" id="l5h"></div>
<div onmouseover="visible('l5h');invisible('l5');" id="l5"></div>
<div id="l6"></div>
<div onmouseout="visible('l7');invisible('l7h');" id="l7h"></div>
<div onmouseover="visible('l7h');invisible('l7');" id="l7"></div>
<div id="l8"></div>
<div onmouseout="visible('l9');invisible('l9h');" id="l9h"></div>
<div onmouseover="visible('l9h');invisible('l9');" id="l9"></div>
<div id="l10"></div>
<div onmouseout="visible('l11');invisible('l11h');" id="l11h"></div>
<div onmouseover="visible('l11h');invisible('l11');" id="l11"></div>
<div id="l12"></div>
<div onmouseout="visible('l13');invisible('l13h');" id="l13h"></div>
<div onmouseover="visible('l13h');invisible('l13');" id="l13"></div>
</div>


css


div#links {
width: 780px;
height: 35px;
background-image: url(styleimg/bgl.jpg);
}

div#links div {
float: left;
background-repeat:norepeat;
margin: auto;
}

div#links div#l1 {
background-image: url(styleimg/links1.jpg);
width: 143px;
height: 35px;
}

div#links divx#l2 {
width: 38px;
height: 35px;
}

div#links div#l3 {
background-image: url(styleimg/links2.png);
width: 60px;
height: 35px;
}

div#links div#l3h {
background-image: url(styleimg/links2h.png);
width: 60px;
display: none;
height: 35px;
}

div#links div#l4 {
width: 43px;
height: 35px;
}

div#links div#l5 {
background-image: url(styleimg/links3.png);
width: 50px;
height: 35px;
}

div#links div#l5h {
background-image: url(styleimg/links3h.png);
width: 50px;
display: none;
height: 35px;
}

div#links div#l6 {
width: 42px;
height: 35px;
}

div#links div#l7 {
background-image: url(styleimg/links4.png);
width: 48px;
height: 35px;
}

div#links div#l7h {
background-image: url(styleimg/links4h.png);
width: 48px;
height: 35px;
display: none;
}

div#links div#l8 {
width: 44px;
height: 35px;
}

div#links div#l9 {
background-image: url(styleimg/links5.png);
width: 84px;
height: 35px;
}

div#links div#l9h {
background-image: url(styleimg/links5h.png);
width: 84px;
height: 35px;
display: none;
}

div#links div#l10 {
width: 45px;
height: 35px;
}

div#links div#l11 {
background-image: url(styleimg/links6.png);
width: 71px;
height: 35px;
}

div#links div#l11h {
background-image: url(styleimg/links6h.png);
width: 71px;
height: 35px;
display: none;
}

div#links div#l12 {
width: 43px;
height: 35px;
}

div#links div#l13 {
background-image: url(styleimg/links7.png);
width: 59px;
height: 35px;
}

div#links div#l13h {
background-image: url(styleimg/links7h.png);
width: 59px;
height: 35px;
display: none;
}


normálne je zobrazený div, ktorý obsahuje čierny obrázok, a po prejdení naň sa obrázok vymení za zelení a keď ukážem mimo tak sa vráti do pôvodnej farby
všetko funguje ok len keď behám rýchlo myšou z jedného obrázka na druhý tak to vyzerá ako by to počítač nestihol zaznamenať a obrázok zostane zelený a takýmto spôsob môžu byť "vybrané všetky obrázky" čo by byť nemalo
kde mám chybu?

Nahlásit jako SPAM
IP: 84.47.4.–
Onsi0
Stálý člen
23. 2. 2008   #2
-
0
-

dobre uz som to vyriesil

Nahlásit jako SPAM
IP: 91.127.145.–
Onsi0
Stálý člen
23. 2. 2008   #3
-
0
-

len ešte by som potreboval niečo doplniť:

html:



<div id="links">
<div id="l1"></div>
<img class="l2" src="styleimg/blank.png"/>
<img onmouseover="homeOver()" onmouseout="homeOut()" src="styleimg/links2.png" class="l3" name="home" />
<img class="l4" src="styleimg/blank.png"/>
<img onmouseover="klubOver()" onmouseout="klubOut()" src="styleimg/links3.png" class="l5" name="klub" />
<div id="klubchose" name="klubchose">
historiazostavaihriskokontakt
</div>
<img class="l6" src="styleimg/blank.png"/>
<img onmouseover="ligaOver()" onmouseout="ligaOut()" src="styleimg/links4.png" class="l7" name="liga" />
<img class="l8" src="styleimg/blank.png"/>
<img onmouseover="galeriaOver()" onmouseout="galeriaOut()" src="styleimg/links5.png" class="l9" name="galeria" />
<img class="l10" src="styleimg/blank.png"/>
<img onmouseover="forumOver()" onmouseout="forumOut()" src="styleimg/links6.png" class="l11" name="forum" />
<img class="l12" src="styleimg/blank.png"/>
<img src="styleimg/links7.png" onmouseover="linkyOver()" onmouseout="linkyOut()" class="l13" name="linky" />
</div>


css:


div#links {
width: 780px;
height: 35px;
background-image: url(styleimg/bgl.jpg);
position:relative;
}

div#links div#l1 {
background-image: url(styleimg/links1.jpg);
width: 143px;
height: 35px;
float: left;
background-repeat:norepeat;
margin: auto;
}

div#links img.l2 {
width: 28px;
height: 35px;
}

div#links img.l3 {
width: 60px;
height: 35px;
}

div#links img.l4 {
width: 33px;
height: 35px;
}

div#links img.l5 {
width: 50px;
height: 35px;
}

div#links img.l6 {
width: 32px;
height: 35px;
}

div#links img.l7 {
width: 48px;
height: 35px;
}

div#links img.l8 {
width: 34px;
height: 35px;
}

div#links img.l9 {
width: 84px;
height: 35px;
}

div#links img.l10 {
width: 35px;
height: 35px;
}

div#links img.l11 {
width: 71px;
height: 35px;
}

div#links img.l12 {
width: 33px;
height: 35px;
}

div#links img.l13 {
width: 59px;
height: 35px;
}


js:


function linkyOver()
{
document.linky.src ="styleimg/links7h.png";
}
function linkyOut()
{
document.linky.src ="styleimg/links7.png";
}

function forumOver()
{
document.forum.src ="styleimg/links6h.png";
}
function forumOut()
{
document.forum.src ="styleimg/links6.png";
}

function galeriaOver()
{
document.galeria.src ="styleimg/links5h.png";
}
function galeriaOut()
{
document.galeria.src ="styleimg/links5.png";
}

function ligaOver()
{
document.liga.src ="styleimg/links4h.png";
}
function ligaOut()
{
document.liga.src ="styleimg/links4.png";
}

function klubOver()
{
document.klub.src ="styleimg/links3h.png";
}
function klubOut()
{
document.klub.src ="styleimg/links3.png";
}

function homeOver()
{
document.home.src ="styleimg/links2h.png";
document.klubchose.display= "inline";
}
function homeOut()
{
document.home.src ="styleimg/links2.png";
}


div klubchose má štandartne display = "none" no potreboval by som doplniť funkciu pri v ktorej keď ukážem na obrázok klub tak klubchose bude mať vlastnosť display = "inline" a po následnom opustení klubu myšou by bolo znovu display = "none"

prosím pomôžte

Nahlásit jako SPAM
IP: 91.127.145.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 2 hosté

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý