Avatar billede zulaff Nybegynder
14. september 2006 - 12:26 Der er 22 kommentarer og
1 løsning

Brug af document objekt

Jeg vil gerne gemme document.button6 (button6 er navnet på en knap i html-koden) i en variabel, så jeg kan bruge den i en anden funktion, men dette kan jeg ikke få til at virke. Min javascript kode følger. Læg mærke til funktionen mouseOverRoutine og funktionen animate. Hvis jeg sletter alt det med buttonName, og istedet indsætter document.button6 i animate-funktionen virker det (men jeg skal bruge det andet til senere kodning). Er der nogen der kan hjælpe?

<script>
<!--
var frame = 0;

var button6Up = new Image;

button6OverArray = new Array(3);

var buttonName;
var buttonArray;
var timeout_state = null;

window.onload = function() {
    button6Up.src = "images/06.jpg";
   
    for(var i = 0; i < button6OverArray.length; i++) {
        button6OverArray[i] = new Image;
        button6OverArray[i].src = "images/06_0" + i + ".jpg";
    }
}

function mouseOutRoutine() {
    clearTimeout(timeout_state);
    timeout_state = null;
    document.button6.src = button6Up.src;
}

function mouseOverRoutine(buttonName) {
    frame = 0;
    buttonName = document.button6; //Dette virker ikke
    buttonArray = button6OverArray;
    animateButton();
}

function animateButton() {
    buttonName.src = buttonArray[frame].src; /*Ellers virker dette ikke*/
    frame++;
    if(frame < 3) {
        timeout_state = setTimeout("animateButton()", 100);
    }
}
-->
</script>

Og her er den væsentlige del af min html kode:

<a href="http://www.kulkafeen.com" onmouseover="mouseOverRoutine('button6')" onmouseout="mouseOutRoutine()"><img border="0" src="images/06.jpg" name="button6" /></a>
Avatar billede erikjacobsen Ekspert
14. september 2006 - 12:35 #1
Brug id="button6"  og document.getElementById-funktionen
Avatar billede zulaff Nybegynder
14. september 2006 - 12:49 #2
Hvor kan jeg finde en beskrivelse af funktionen document.getElementById ?
Avatar billede erikjacobsen Ekspert
14. september 2006 - 12:56 #3
Fx. http://codepunk.hardwar.org.uk/ajs29.htm
Det kan bestemt anbefales at læse en masse tekst og eksempler med udgangspunkt i document.getElementById - det er en af grundstenene i "rigtig JavaScript"
Avatar billede zulaff Nybegynder
14. september 2006 - 13:02 #4
Tusind tak. Jeg læser lidt og ser om jeg kan få det til at virke. Læg et svar ud, så giver jeg point når jeg har fundet ud af det.
Avatar billede erikjacobsen Ekspert
14. september 2006 - 13:13 #5
Jeg samler slet ikke på point, tak. Men jeg lytter med endnu ;)
Avatar billede zulaff Nybegynder
14. september 2006 - 13:30 #6
Jeg er stadig ikke helt med. Jeg har lidt problemer med at bruge getElementById funktionen. Jeg har ændret min kode i to funktioner så der nu står følgende:

function mouseOverRoutine(buttonName) {
    frame = 0;
    buttonName = getElementById("button6");
    buttonArray = button6OverArray;
    animateButton();
}

function animateButton() {
    buttonName.setAttribute("src", buttonArray[frame].src);
    frame++;
    if(frame < 3) {
        timeout_state = setTimeout("animateButton()", 100);
    }
}

og i html delen har jeg tilføjet et id:

<a href="http://www.kulkafeen.com" onmouseover="mouseOverRoutine('button6')" onmouseout="mouseOutRoutine()"><img border="0" src="images/06.jpg" name="button6" id="button6" /></a>
Avatar billede erikjacobsen Ekspert
14. september 2006 - 13:56 #7
document.getElementById(...)
Avatar billede zulaff Nybegynder
14. september 2006 - 14:04 #8
Den er rettet, men det virker stadig ikke???
Avatar billede erikjacobsen Ekspert
14. september 2006 - 14:35 #9
Og så skal du lade være med at bruge buttonName til to forskellige ting.
Avatar billede mclemens Nybegynder
14. september 2006 - 14:49 #10
Og frame skal være global - ellers skal du sende den videre ...
name="button6" id="button6" <- Det bør være nok med id ...
Avatar billede mclemens Nybegynder
14. september 2006 - 14:50 #11
Hov frame er også global :D
(kiggede kun på 13:30:19)
Avatar billede zulaff Nybegynder
14. september 2006 - 14:51 #12
Nu virker det. Tusind tak for hjælpen, det er jeg virkelig glad for. Hvis du alligevel vil have pointene kan du lægge et svar ud, ellers er nogen andre velkomne til at gøre det, så bliver de da brugt til et eller andet.
Avatar billede mclemens Nybegynder
14. september 2006 - 14:59 #13
Ikke noget hertil - og Erik er ikke nem at give point til... :)
- Du kan dog give ham noget karma ... Det kan han ikke sige nej til :D
Så evt. kan du selv lægge et svar og acceptere det :)
Avatar billede mclemens Nybegynder
14. september 2006 - 15:13 #14
Hvad med denne kode?



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta

http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">

var buttonName,frame=0;
var button6OverArray = new Array(3);

if(window.addEventListener)window.addEventListener("load", function(){wload();}, false);
else if(window.attachEvent)window.attachEvent("onload", function(){wload();});

function wload(){

  buttonName = document.getElementById("button6");
  for(var i = 0; i < button6OverArray.length; i++)button6OverArray[i] = "images/06_0" + i + ".jpg";

}


function mouseOutRoutine() {
    frame = 0;
    buttonName.setAttribute("src","./images/06.jpg");
}


function mouseOverRoutine(buttonName) {
    animateButton(frame);
}


function animateButton(t) {
  if(t==frame){
    buttonName.setAttribute("src", button6OverArray[frame]);
    if(++frame < button6OverArray.length)setTimeout("animateButton("+frame+")", 100);
  }
}


</script>

</head><body>
<a href="http://www.kulkafeen.com" onmouseover="mouseOverRoutine('button6')" onmouseout="mouseOutRoutine()"><img border="0"

src="images/06.jpg" id="button6" /></a>
</body></html>
Avatar billede mclemens Nybegynder
14. september 2006 - 15:15 #15
Lettere ombrudt, den er testet - men ved ikke om det er helt galt ?
... eks.: ww      w.dkif.com/users/clemens/tmp/test.html
Avatar billede mclemens Nybegynder
14. september 2006 - 16:03 #16
Måske lige en lille rettelse ...
(for en sikkerhedsskyld)


function mouseOutRoutine() {
    frame = -1;
    buttonName.setAttribute("src","./images/06.jpg");
}


function mouseOverRoutine(buttonName) {
    frame = 0;
    animateButton(frame);
}
Avatar billede erikjacobsen Ekspert
14. september 2006 - 17:36 #17
function mouseOverRoutine(buttonName) {  ... bruger ikke sin parameter, buttonName. Den må du ku' lave lidt simplere ;)
Avatar billede mclemens Nybegynder
14. september 2006 - 17:48 #18
Takker :) ... joh, det var
en forkortelses smutter *lol*



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">

var buttonName,frame=0;
var button6OverArray = new Array(3);

if(window.addEventListener)window.addEventListener("load", function(){wload();}, false);
else if(window.attachEvent)window.attachEvent("onload", function(){wload();});

function wload(){

  buttonName = document.getElementById("button6");
  for(var i = 0; i < button6OverArray.length; i++)button6OverArray[i] = "images/06_0" + i + ".jpg";

}


function mouseOutRoutine() {
    frame = -1;
    buttonName.setAttribute("src","./images/06.jpg");
}


function mouseOverRoutine() {
    frame = 0;
    animateButton(frame);
}


function animateButton(t) {
  if(t==frame){
    buttonName.setAttribute("src", button6OverArray[frame]);
    if(++frame < button6OverArray.length)setTimeout("animateButton("+frame+")", 100);
  }
}


</script>

</head><body>
<a href="http://www.kulkafeen.com" onmouseover="mouseOverRoutine('button6')" onmouseout="mouseOutRoutine()"><img src="images/06.jpg" id="button6" style="border:0px;" /></a>
</body></html>
Avatar billede mclemens Nybegynder
14. september 2006 - 17:50 #19
Ups, igen ... onmouseover="mouseOverRoutine('button6')"
-> onmouseover="mouseOverRoutine()" ... buttonName er jo fast ...
- Ellers skal det over i object orienteret kodning istedet ...
Avatar billede mclemens Nybegynder
16. september 2006 - 15:40 #20
Kaster lige et svar, hvis du kan bruge nedenstående ... Du kan se det i aktion på
ww        w.dkif.com/users/clemens/tmp/test.html




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" type="text/css" href="main.css" /><title>BIIP</title>

<script type="text/javascript">

var abo={
  "button1":[3,"01_0"], // 3 for 3 img fortløbende src's og 01_0 for start på fil navn (standard og 3 mere)
  "button2":[2,"02_0"] // 2 for 2 img fortløbende src's og 02_0 for start på fil navn (standard og 2 mere)
};

var abtimeout=100; // Timeout src skifte i ms.
var abfileext=".jpg"; // Fil extension
var abdir="images/"; // direktorat

if(window.addEventListener)window.addEventListener("load", function(){wload();}, false);
else if(window.attachEvent)window.attachEvent("onload", function(){wload();});

function wload(){
  for(i in abo){

    abo[i]={
      "o":document.getElementById(i),
      "src":document.getElementById(i).getAttribute("src"),
      "leng":abo[i][0],
      "absrc":0,
      "bsrc":abo[i][1],
      "i":i
    };

    aevent(i);

  }

}


function aevent(j){
  if(abo[j].o.addEventListener){

    abo[j].o.addEventListener("mouseover", function(){mouseOverRoutine(abo[j]);}, false);
    abo[j].o.addEventListener("mouseout", function(){mouseOutRoutine(abo[j]);}, false);

  }else if(abo[j].o.attachEvent){

    abo[j].o.attachEvent("onmouseover", function(){mouseOverRoutine(abo[j]);});
    abo[j].o.attachEvent("onmouseout", function(){mouseOutRoutine(abo[j]);});

  }
}



function mouseOutRoutine(t) {
    t.abscr=-1;
    t.o.setAttribute("src",t.src);
}



function mouseOverRoutine(t) {
  t.abscr=0;
  animateButton(t.i,0);
}



function animateButton(t,ta) {
  t=abo[t];
  if(ta==t.abscr){
    t.o.setAttribute("src",abdir+t.bsrc+t.abscr+abfileext);
    t.abscr=parseInt(t.abscr)+1;
    if(t.abscr<t.leng)setTimeout("animateButton('"+t.i+"',"+t.abscr+")", abtimeout);
  }
}

</script>

</head><body>
<a href="#"><img src="images/01.jpg" style="border:0px;" id="button1" /></a>
<a href="#"><img src="images/02.jpg" style="border:0px;" id="button2" /></a>
</body></html>
Avatar billede mclemens Nybegynder
16. september 2006 - 15:44 #21
Edit:
var abdir="images/"; // direktorat
->
var abdir="images/"; // mappe
Avatar billede zulaff Nybegynder
16. september 2006 - 18:51 #22
Tusind tak for hjælpen alle.
Avatar billede mclemens Nybegynder
16. september 2006 - 20:53 #23
Velbekom, og tak for point :)
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