Avatar billede cyperangel Nybegynder
29. november 2002 - 10:57 Der er 6 kommentarer og
1 løsning

JAvascript og divs

Suk og tredobbelt Suk.

Jeg har en hjemmeside der er bygget op primært af divs.

Nu vil jeg gerne ahve det sådan, at når man klikker på et div, så ændres lad os sige 9 andre divs zIndex.

Eller endda bare ved en mouseover... Men jeg kan ikke finde ud af at target min div....

her er lidt info fra min fil

<head>
<style>
div#planetmenu1 {left: 52px; top: 78px; position: absolute; z-index: 10;}
div#planetmenu2 {left: 52px; top: 103px; position: absolute; z-index: 10;}
div#planetmenu3 {left: 52px; top: 122px; position: absolute; z-index: 10;}
div#planetmenu4 {left: 52px; top: 141px; position: absolute; z-index: 10;}
div#planetmenu5 {left: 52px; top: 160px; position: absolute; z-index: 10;}
div#planetmenu6 {left: 52px; top: 179px; position: absolute; z-index: 10;}
div#planetmenu7 {left: 52px; top: 198px; position: absolute; z-index: 10;}
div#planetmenu8 {left: 52px; top: 217px; position: absolute; z-index: 10;}
div#planetmenu9 {left: 52px; top: 236px; position: absolute; z-index: 10;}
div#planetmenu10 {left: 52px; top: 255px; position: absolute; z-index: 10;}
</style>
<script language=javascript>
function pmenu(id){
   
    switch(id) {
        case 1:
            document.div.planetmenu1.style.zIndex=8;
            document.all[planetmenu2].style.zIndex=10;
            all['planetmenu3'].style.zIndex=10;
            div['planetmenu4'].style.zIndex=10;
            div['planetmenu5'].style.zIndex=10;
            div['planetmenu6'].style.zIndex=10;
            div['planetmenu7'].style.zIndex=10;
            div['planetmenu8'].style.zIndex=10;
            div['planetmenu9'].style.zIndex=10;
            div['planetmenu10'].style.zIndex=10;
            break;
</script>
</head>           
som det kan ses har jeg 10 divs, og har forsøgt på 117 forskellige mådet at target mine divs på, men de vil bare ikke.. jeg får at vide at objectet er udefineret det meste af tiden.

Jeg har ellers lavet dem alle sammen sådan her:

<div id="Planetmenu1" STYLE="z-index:10;">
<img src="grafik/planeter/menu/merkur.jpg" name="merkur" onMouseOver="pmenu(1)">
</div>


Nej, det er ikke hle min html side jeg har psotet.. bare det der var relevant.... Jeg har mange mange flere divs, og lige så mange style definitioner...

Men jeg kan ikke finde ud af hvad stien til mine divs er i javascriptdelen... HJÆLP pls
Avatar billede edutasia Nybegynder
29. november 2002 - 11:21 #1
Når du har unikt id, skulle du kunne referere til hver div vha:

  planetmenuXX.style.zIndex=10;

Alternativt:

  document.getElementById('planetmenuXX').style.zIndex=10;

Men jeg har nu en bedre idé: Hvad med et script, der løber alle div'er på siden igennem og ændrer deres zIndex til 10 - med mindre det er den, der er klikket på? Det kan laves sådan her:

function changeZIndex() {
  var oColl = document.all.tags('DIV');
  for (var i=0; i< oColl.length; i++) {
    if (oColl[i].className == 'menuDiv') {
      oColl[i].style.zIndex = (oColl[i] != event.srcElement) ? 10 : 8;
      }
    }
}

Sæt følgende på hver DIV:

  <DIV class="menuDiv" id="planetmenuXX" onclick="changeZIndex()">
Avatar billede cyperangel Nybegynder
29. november 2002 - 11:41 #2
den køber jeg.. men kun hvis du gider forklare mig hvad det er de forskellige dele af det sidste javascript gør, for jeg er et fjols til den slags, og skal kunen forklare hvad det gør :P


mange tak :D
Avatar billede edutasia Nybegynder
29. november 2002 - 12:06 #3
function changeZIndex() {

// find alle DIV'er i dokumentet og indlæs dem i et array ved navn oColl
  var oColl = document.all.tags('DIV');

// løb hver DIV i arrayet igennem
  for (var i=0; i< oColl.length; i++) {

// hvis DIV'ens class er "menuDiv"...
// (vi sikrer lige, at det kun er bestemte DIV'er, der bliver ændret
// - der kunne jo være andre DIV'er i dokumentet)
    if (oColl[i].className == 'menuDiv') {

// ... så sæt zIndex til enten 10 eller 8 - afhængigt af om det var denne
// div der blev klikket på (event.srcElement er den DIV, der udløste "onclick")

      oColl[i].style.zIndex = (oColl[i] != event.srcElement) ? 10 : 8;
      }
    }
}
Avatar billede edutasia Nybegynder
29. november 2002 - 12:08 #4
Alle DIV'er, som du definerer som:

  <DIV class="menuDiv" ...osv

bliver altså påvirket af scriptet - men KUN dem
Avatar billede tommy_carstensen Nybegynder
24. november 2004 - 10:51 #5
Hey cyperangel, fik du det nogensinde til at virke? Jeg har nemlig det samme problem og vil gerne se din færdige kode...
Mit spm. -> http://eksperten.dk/spm/564464
Lignende spm. -> http://eksperten.dk/spm/110740
Avatar billede cyperangel Nybegynder
25. november 2004 - 00:04 #6
ja, det gjorde jeg faktisk :)

Jeg hitter lige linket til den hjemmeside, som jeg fik til at funke med det her. Alle mouse over effekterne, er båret oppe af javascript der ændrer z index på diverse divs. Har du nogen spørgsmål, så bare smid mig en mail på mco at cyperdesign dot dk.

http://tippeshvalpe.adr.dk/

Bare ignorer emnet, det var en opgave for en kammerats forældre :P
Avatar billede cyperangel Nybegynder
25. november 2004 - 00:06 #7
Det skal lige nævnes, at jeg kun beytter onClick i det her javascript, som er at finde i selve index filen, man kan formentlig tilpasse den til også at virke med mouse over.. Og det kan sikkert laves mere raffineret end jeg har gjort, men mit virker da i det mindste :P
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester