JavaScript háttérváltás, saját DIV-en belül

JavaScript háttérváltás, saját DIV-en belül
2012-09-16T14:05:09+02:00
2012-09-16T19:49:37+02:00
2022-11-26T21:25:34+01:00
Zizge
Sziasztok!

Van egy JS-em amiben Micu segített benne (köszönet neki, téma előzménye ITT). Viszont felmerült egy problémám. Ha több ugyanolyan div van egymás mellett, akkor mindig az elsőnek a háttere változik meg!

Így néz ki: [ LINK ]

Forráskódban mindent lehet látni.
Hogyan oldjam meg azt hogy amelyik palettára(DIV-re) húzom a kurzort, csak az mögött változzék meg a háttere??

Remélem tudtok segíteni!
Ha valaki, jQuery megoldást mondana, előtte olvassa el az előzményeket itt: http://prog.hu/tudastar/156729/DIV+hatterkep+attunes.html
Mutasd a teljes hozzászólást!

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <title>1</title> <style> .latszik { filter:alpha(opacity=100); opacity: 1; -moz-opacity:1; position:absolute; top:0px; left:0px; z-index:2 } .rejtett { filter:alpha(opacity=0); opacity: 0; -moz-opacity:0; position:absolute; top:0px; left:0px; z-index:1 } </style> <script> idoz=new Array("","","") // 3 van allapot=new Array(1,1,1) sebesseg=200 lepes=0.1 function csere(irany, melyik) { clearTimeout(idoz[melyik]) startCsere(irany, melyik) } function startCsere(irany, melyik) { allapot[melyik]=parseInt((allapot[melyik]+irany*lepes)*100)/100 document.getElementById('teszt').innerHTML=allapot[melyik] kep=document.getElementById('kep'+melyik+'_1') kep.style.opacity = allapot[melyik]; kep.style.filter = 'alpha(opacity=' + allapot[melyik]*100 + ')'; kep=document.getElementById('kep'+melyik+'_2') masik=1-allapot[melyik] kep.style.opacity = masik; kep.style.filter = 'alpha(opacity=' + masik*100 + ')'; if(allapot[melyik]<1 && allapot[melyik]>0) { idoz[melyik]=setTimeout("startCsere("+irany+","+melyik+")",sebesseg) } else { allapot[melyik]=parseInt(allapot[melyik]) } } </script> </head> <body> <div onmouseover="csere(-1,0)" onmouseout="csere(1,0)" style="position:relative"> <img border="0" class="latszik" src="button6.jpg" width="100" height="33" id="kep0_1"> <img border="0" class="rejtett" src="teo.gif" width="100" height="33" id="kep0_2" > </div> <br> <br> <div onmouseover="csere(-1,1)" onmouseout="csere(1,1)" style="position:relative"> <img border="0" class="latszik" src="button6.jpg" width="100" height="33" id="kep1_1"> <img border="0" class="rejtett" src="teo.gif" width="100" height="33" id="kep1_2" > </div> <br> <br> <div onmouseover="csere(-1,2)" onmouseout="csere(1,2)" style="position:relative"> <img border="0" class="latszik" src="button6.jpg" width="100" height="33" id="kep2_1"> <img border="0" class="rejtett" src="teo.gif" width="100" height="33" id="kep2_2" > </div> <br> <br> <div id="teszt"></div> </body> </html>
Mutasd a teljes hozzászólást!

  • Először szüntesd meg az azonos ID-ket!
    Majd csináld azt, amit az előző topic-ban már írtam(aktuális képek ID-jének megadása a "csere" függvénynek)!
    Mutasd a teljes hozzászólást!
  • Először is, az id-nak egyedinek kell lennie, nálad 3 kep1 id-val rendelkező elem van. Ez így biztos nem jó.

    Egyébként add meg az id-t a függvényhívásnál:

    function csere(irany,elemId) { clearTimeout(idoz) startCsere(irany,elemId) } function startCsere(irany,elemId) { kep=document.getElementById(elemId) allapot=parseInt((allapot+irany*lepes)*100)/100 kep.style.opacity = allapot; kep.style.filter = 'alpha(opacity=' + allapot*100 + ')'; kep=document.getElementById(elemId+'_par') masik=1-allapot kep.style.opacity = masik; kep.style.filter = 'alpha(opacity=' + masik*100 + ')'; if(allapot<1 && allapot>0) { idoz=setTimeout("startCsere("+irany+","+elemId+")",sebesseg) } else { allapot=parseInt(allapot) } } <div onmouseover="csere(-1,'kep1')" onmouseout="csere(1,'kep1')" id="mypalettabox"> <img class="latszik" src="images/b4/all/kek.png" border="0" width="199" height="316" id="kep1" alt="" /> <img class="rejtett" src="images/b4/all/szurke.png" border="0" width="199" height="316" id="kep1_par" alt="" /> <a href="#" title=""><img class="p-mappa" src="images/b4/cyclotime_folder2.png" border="0" width="119" alt="" title="" /></a> <div id="p-title" > <h4>Energia 5000</h4> <div id="p-info"> <p>Értéke 5750 &#8364;, melyet most 5000 &#8364;-ért megvásárolhat.</p> </div> <div id="p-vip">VIP csomag</div> <input id="processQuickreg" class="grey" type="submit" value="Megveszem" name="processQuickreg"> <a href="#" title=""><img class="p-infobox" src="images/b4/all/info.png" width="23" height="23" border="0" title="" alt="" /></a> </div> </div>

    [szerk]
    Látom kicsit, lassú voltam. :)
    Mutasd a teljes hozzászólást!

  • Mivel pang a fórum, készítettem erre a kérdésedre is egy TESZT-et, amely tartalmaz egy JQ-s megoldást és Micu JS-es megoldását is...
    Mutasd a teljes hozzászólást!
  • Köszönöm szépen mester!
    Mutasd a teljes hozzászólást!
  • Köszi szépen az összehasonlítást! :)
    Mutasd a teljes hozzászólást!
  • Szívesen
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd