Søg
Avatar billede sjh Nybegynder
27. marts 2004 - 20:49 Der er 21 kommentarer og
1 løsning

Flyt billede

Hvordan flytter jeg "image_right.jpg" fra venstre mod højre når siden er loadet.. det skal lande lige der hvor jeg har lavet det i tablen.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>move</title>
  </head>
  <body>
    <table border="0" width="640" cellpadding="0" cellspacing="0" align="center">
      <tr>
        <td align="left"><img src="image_left.jpg"></td>
        <td align="center"><img src="image_center.jpg"></td>
        <td align="right"><img src="image_right.jpg"></td>
      </tr>
    </table>
  </body>
</html>
Avatar billede skovenborg Nybegynder
27. marts 2004 - 22:19 #1
Mener du:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>move</title>
    <script type="text/javascript">
    var imgPos,timer,imgElm;
    function getPos(elm) {
      for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
      return {x:zx,y:zy}
    }
    function initImg(elm) {
          imgPos = getPos(elm);
          imgElm = elm;
          elm.style.position = "relative";
          elm.style.left = -imgPos.x+"px";
          elm.style.top = "0px";
    }
    var speedX = 5;
    function scrollImg() {
          x = parseInt(imgElm.style.left);
          if (x < 0) imgElm.style.left = (x += speedX)+"px";
          else {imgElm.style.left ="0px";window.clearTimeout(timer);}
    }
    </script>
  </head>
  <body onload="timer = window.setInterval('scrollImg();',10);">
    <table border="0" width="640" cellpadding="0" cellspacing="0" align="center">
      <tr>
        <td align="left"><img src="image_left.jpg"></td>
        <td align="center"><img src="image_center.jpg"></td>
        <td align="right"><img src="image_right.jpg" width="213" onload="initImg(this);"></td>
      </tr>
    </table>
  </body>
</html>
Avatar billede skovenborg Nybegynder
27. marts 2004 - 22:20 #2
for at ændre farten skal du bare ændre speedX (hvor meget den går mod højre for hver gang funktion kaldes) og tallet i timer = window.setInterval('scrollImg();',10); (10 betyder at funktionen kaldes hvert 10 millisekund)
Avatar billede sjh Nybegynder
28. marts 2004 - 03:53 #3
Det ser godt ud.. men billede må ikke vises før den begynder at køre.

jeg prøvet lidt med style="display:none;" fra start men kan ikke få det til at virke.. :(
Avatar billede roenving Novice
28. marts 2004 - 04:03 #4
?-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>move</title>
    <script type="text/javascript">
    var imgPos,timer,imgElm;
    function getPos(elm) {
      for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
      return {x:zx,y:zy}
    }
    function initImg(elm) {
          imgPos = getPos(elm);
          imgElm = elm;
          elm.style.position = "relative";
          elm.style.left = -imgPos.x+"px";
          elm.style.top = "0px";
          elm.style.display="inline";
    }
    var speedX = 5;
    function scrollImg() {
          x = parseInt(imgElm.style.left);
          if (x < 0) imgElm.style.left = (x += speedX)+"px";
          else {imgElm.style.left ="0px";window.clearTimeout(timer);}
    }
    </script>
  </head>
  <body onload="timer = window.setInterval('scrollImg();',10);">
    <table border="0" width="640" cellpadding="0" cellspacing="0" align="center">
      <tr>
        <td align="left"><img src="image_left.jpg"></td>
        <td align="center"><img src="image_center.jpg"></td>
        <td align="right"><img src="image_right.jpg" style="dispaly:none;" width="213" onload="initImg(this);"></td>
      </tr>
    </table>
  </body>
</html>
Avatar billede sjh Nybegynder
28. marts 2004 - 04:09 #5
Ja nu er den det.. kan man ikke få den til at starte -width på billede??


og kan man få den til at gøre det med flere billeder på en gang (vil godt give 60 point mere for det)
Avatar billede skovenborg Nybegynder
28. marts 2004 - 12:41 #6
hva' mener du med at starte -width på billede?
Avatar billede sjh Nybegynder
28. marts 2004 - 15:50 #7
elm.style.left = -(imgPos.x +  "width på billede"  )+"px";
Avatar billede skovenborg Nybegynder
28. marts 2004 - 20:51 #8
skriv:
elm.style.left = -(imgPos.x +  elm.offsetWidth  )+"px";
Avatar billede sjh Nybegynder
28. marts 2004 - 22:37 #9
:) skal du have 60 point mere eller hvad

-> kan man få den til at gøre det med flere billeder på en gang (vil godt give 60 point mere for det)
Avatar billede skovenborg Nybegynder
29. marts 2004 - 00:20 #10
nej, det lige meget - har bare arbejdet på at få det til at virke ordentligt ;-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>move</title>
    <script type="text/javascript">
    var imgPos,timer;
    var imgElm = new Array();
    var imgElmLength;
    function getPos(elm) {
      for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
      return {x:zx,y:zy}
    }
    function initImg(elm) {
          imgPos = getPos(elm);
          elm.style.position = "relative";
          elm.style.left = -(imgPos.x+elm.offsetWidth)+"px";
          elm.style.top = "0px";
          imgElm[imgElm.length] = elm;
          imgElmLength++;
    }
    var speedX = 5;
    var finished = new Array();
    function scrollImg() {
          for (i=0;i<imgElm.length;i++) {
                x = parseInt(imgElm[i].style.left);
                if (x < 0) {imgElm[i].style.left = (x += speedX)+"px";}
                else {imgElm[i].style.left = "0px";finished++;imgElm.splice(i,1);}
          }
          if (finished == imgElmLength) {window.clearInterval(timer);}

    }
    </script>
  </head>
  <body onload="timer = window.setInterval('scrollImg();',10);">
    <table border="0" width="640" cellpadding="0" cellspacing="0" align="center">
      <tr>
        <td align="left"><img src="image_left.jpg" onload="initImg(this);"></td>
        <td align="center"><img src="image_center.jpg" onload="initImg(this);"></td>
        <td align="right"><img src="image_right.jpg" onload="initImg(this);"></td>
      </tr>
    </table>
  </body>
</html>
Avatar billede roenving Novice
29. marts 2004 - 00:27 #11
-- og så fjern da den imgElmLength, du kan jo bare bruge imgElm.length, som du jo også bruger de fleste steder !-)
Avatar billede skovenborg Nybegynder
29. marts 2004 - 00:40 #12
nej, det er helt bevist den er der. Problemmer er at jeg fjerner et element fra imgElm-array'et for at den ikke ligger og fylder op. Men det vil samtidig sige at længden også bliver én mindre. Og så ryger jeg ud i det problem at finished bliver lig imgElm.length, selvom ikke alle billeder er færdige. Så imgElmLength er simpelthen til for at bevare længden af det oprindelige array.
Avatar billede roenving Novice
29. marts 2004 - 00:50 #13
Den virkede hos mig, da jeg fjernede den ...

Men man skal da åbenbart krølle hjernen engang imellem:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>move</title>
    <script type="text/javascript">
    var imgPos,timer;
    var imgElm = new Array();
    function getPos(elm) {
      for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
      return {x:zx,y:zy}
    }
    function initImg(elm) {
          imgPos = getPos(elm);
          elm.style.position = "relative";
          elm.style.left = -(imgPos.x+elm.offsetWidth)+"px";
          elm.style.top = "0px";
          imgElm[imgElm.length] = elm;
    }
    var speedX = 10,antal=0;
    function scrollImg() {
          for (i=0;i<imgElm.length;i++) {
                x = parseInt(imgElm[i].style.left);
                if (x < 0) {imgElm[i].style.left = (x += speedX)+"px";}
                else {imgElm[i].style.left = "0px";imgElm.splice(i,1);}
          }
          if (imgElm.length==0) {window.clearInterval(timer);}
          document.getElementById('minSpan').innerHTML = ++antal;
    }
    </script>
  </head>
  <body onload="timer = window.setInterval('scrollImg();',50);">
    <table border="0" width="640" cellpadding="0" cellspacing="0" align="center">
      <tr>
        <td align="left"><img src="image_left.jpg" onload="initImg(this);"></td>
        <td align="center"><img src="image_center.jpg" onload="initImg(this);"></td>
        <td align="right"><img src="image_right.jpg" onload="initImg(this);"></td>
      </tr>
    </table>
    <span id="minSpan"></span>
  </body>
</html>
Avatar billede skovenborg Nybegynder
29. marts 2004 - 00:56 #14
nåja, sådan kunne man jo også gøre - faktisk meget lettere, men jeg havde bare den finished-løsning i hovedet hele tiden.
Avatar billede sjh Nybegynder
29. marts 2004 - 01:23 #15
Jeg kan se i har været lidt igang :) jeg har også leget lidt med det :D og er kommet til det her:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>move</title>
    <script type="text/javascript">
    var timObj, imgObj1, imgObj2, imgObj3, imgObj4, imgObj5, imgObj6, imgObj7, imgObj8;

    function getPosX(obj){
      var curleft = 0;
      if (obj.offsetParent){
        while (obj.offsetParent){
          curleft += obj.offsetLeft;
          obj = obj.offsetParent;
        }
      }
      else if (obj.x)
        curleft += obj.x;
      return curleft;
    }

    function setImgObj(obj) {
          obj.style.position = "relative";
          obj.style.left = -(getPosX(obj) + obj.offsetWidth)+"px";
          obj.style.top = "0px";
          obj.style.display="inline";
          return obj;
    }

    function scrollObj(obj, speedX) {
      var pos = 0;
      pos = parseInt(obj.style.left);
      if (pos < 0){
        obj.style.left = (pos += speedX)+"px"
          return pos;
        } else {
          obj.style.left ="0px";
        return 0;
      }
    }

    function scrollImage() {
      var intCount = 0;
      intCount += scrollObj(imgObj1,1);
      intCount += scrollObj(imgObj2,2);
      intCount += scrollObj(imgObj3,3);
      if (intCount == 0) {
        intCount = scrollObj(imgObj4,15);
        if (intCount == 0) {
          intCount = scrollObj(imgObj5,15);
          if (intCount == 0) {
            intCount = scrollObj(imgObj6,15);
            if (intCount == 0) {
              intCount = scrollObj(imgObj7,15);
              if (intCount == 0) {
                intCount = scrollObj(imgObj8,15);
                if (intCount == 0) {
                  window.clearTimeout(timObj);
                }
              }
            }
          }
        }
      }
    }
    </script>
  </head>
  <body onload="timObj = window.setInterval('scrollImage();',10);">
    <table border="0" width="640" cellpadding="0" cellspacing="0" align="center">
      <tr>
        <td align="left"><img src="image_left.jpg" style="dispaly:none;" onload="imgObj1=setImgObj(this);"></td>
        <td align="center"><img src="image_center.jpg" style="dispaly:none;" onload="imgObj2=setImgObj(this);"></td>
        <td align="right"><img src="image_right.jpg" style="dispaly:none;" onload="imgObj3=setImgObj(this);"></td>
      </tr>
      <tr>
        <td><img src="image_left.jpg" style="dispaly:none;" onload="imgObj4=setImgObj(this);"></td>
      </tr>
      <tr>
        <td><img src="image_left.jpg" style="dispaly:none;" onload="imgObj5=setImgObj(this);"></td>
      </tr>
      <tr>
        <td><img src="image_left.jpg" style="dispaly:none;" onload="imgObj6=setImgObj(this);"></td>
      </tr>
      <tr>
        <td><img src="image_left.jpg" style="dispaly:none;" onload="imgObj7=setImgObj(this);"></td>
      </tr>
      <tr>
        <td><img src="image_left.jpg" style="dispaly:none;" onload="imgObj8=setImgObj(this);"></td>
      </tr>
    </table>
  </body>
</html>


men jeg vil godt give jer bægge point hvis det er ok :) leg et svar
Avatar billede roenving Novice
29. marts 2004 - 01:27 #16
Hov, der var åbenbart en tavetosse på denne:

style="display:none;"
Avatar billede skovenborg Nybegynder
29. marts 2004 - 01:35 #17
værsgo' :-)
Avatar billede sjh Nybegynder
29. marts 2004 - 01:43 #18
roenving > smider du også lige et svar :-)
Avatar billede roenving Novice
29. marts 2004 - 01:46 #19
Næh, det er da skovenborg, som har arbejdet, så det er vel også ham, som skal have points ,-)
Avatar billede sjh Nybegynder
29. marts 2004 - 01:48 #20
okææ :-) så siger jeg mange tak for hjælpen.
Avatar billede sjh Nybegynder
29. marts 2004 - 01:49 #21
hov du skulle jo have 120 point opretter lige et nyt spm..
Avatar billede sjh Nybegynder
29. marts 2004 - 01:51 #22
http://www.eksperten.dk/spm/483148
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 11:56 Er det muligt at lave sin egen webserver i boligforening? Af Strawberry i Cloudtjenester
I går 10:21 Ny printer, men hvilken Af mort1 i Printere
13/0819:41 USB på Linux Af Uvanga i Linux
12/0818:26 Hvilken type mus Af mort1 i PC
11/0813:21 ms Forms Af leahcim i Andet software
White papers
Flere white papers »