Moving an image

Discussion in 'Javascript' started by François de Dardel, Apr 25, 2005.

  1. The URL is:
    http://mapage.noos.fr/dardelf3/tintin/ListeAutos.html
    The JS is in the header

    This page behaves as follows:
    Safari (Mac) OK
    MSIE (Mac) OK
    MSIE 5.0 (PC) OK (on Virtual PC on the Mac)
    MSIE 5.1 (PC) No on my office PC (chgImg works, but MoveDIV doesn't)
    FireFox (Mac) No (chgImg works, but MoveDIV doesn't)
    iCab (Mac) No (chgImg works, but MoveDIV doesn't)

    The faulty function is:

    function moveDIV() {
    // moves the picture in a new position...
    mouseY=document.body.scrollTop+50;
    // Gets the scroll position and positions the DIV 50 px below top
    autoDIV.style.pixelTop = mouseY;
    }

    I've spent 3 days experimenting and searching examples on the web, but
    I still found no solution.

    Can anyone give me a solution ?

    Many thanks in advance.

    --
    François de Dardel
    http:/mapage.noos.fr/dardelf/
    Faber est suae quisque fortunae
    Enlever le quatorze pour m'écrire
    Remove fourteen in the address to send mail
    François de Dardel, Apr 25, 2005
    #1
    1. Advertising

  2. François de Dardel

    RobB Guest

    François de Dardel wrote:
    > The URL is:
    > http://mapage.noos.fr/dardelf3/tintin/ListeAutos.html
    > The JS is in the header
    >
    > This page behaves as follows:
    > Safari (Mac) OK
    > MSIE (Mac) OK
    > MSIE 5.0 (PC) OK (on Virtual PC on the Mac)
    > MSIE 5.1 (PC) No on my office PC (chgImg works, but MoveDIV doesn't)
    > FireFox (Mac) No (chgImg works, but MoveDIV doesn't)
    > iCab (Mac) No (chgImg works, but MoveDIV doesn't)
    >
    > The faulty function is:
    >
    > function moveDIV() {
    > // moves the picture in a new position...
    > mouseY=document.body.scrollTop+50;
    > // Gets the scroll position and positions the DIV 50 px below top
    > autoDIV.style.pixelTop = mouseY;
    > }
    >
    > I've spent 3 days experimenting and searching examples on the web,

    but
    > I still found no solution.
    >
    > Can anyone give me a solution ?
    >
    > Many thanks in advance.
    >
    > --
    > François de Dardel
    > http:/mapage.noos.fr/dardelf/
    > Faber est suae quisque fortunae
    > Enlever le quatorze pour m'écrire
    > Remove fourteen in the address to send mail


    With some help from ppk:

    function moveDIV()
    {
    // moves the picture in a new position...
    var y_scroll, el;
    if (self.pageYOffset)
    // all except Explorer
    y_scroll = self.pageYOffset;
    else if (document.documentElement &&
    document.documentElement.scrollTop)
    // Explorer 6 Strict
    y_scroll = document.documentElement.scrollTop;
    else if (document.body) // all other Explorers
    y_scroll = document.body.scrollTop;
    // Gets the scroll position and positions the DIV 50 px below top
    if ((document.getElementById
    && (el = document.getElementById('autoDIV')))
    || (document.all
    && (el = document.all['autoDIV'])))
    {
    el.style.top = String(y_scroll + 55 + 'px');
    }
    }

    Might want to move that graphic into an 'alley' (clear left column) so
    it doesn't obstruct any links when it moves down.

    http://www.quirksmode.org/viewport/compatibility.html
    RobB, Apr 26, 2005
    #2
    1. Advertising

  3. François de Dardel

    RobB Guest

    RobB wrote:
    > François de Dardel wrote:
    > > The URL is:
    > > http://mapage.noos.fr/dardelf3/tintin/ListeAutos.html
    > > The JS is in the header
    > >
    > > This page behaves as follows:
    > > Safari (Mac) OK
    > > MSIE (Mac) OK
    > > MSIE 5.0 (PC) OK (on Virtual PC on the Mac)
    > > MSIE 5.1 (PC) No on my office PC (chgImg works, but MoveDIV

    doesn't)
    > > FireFox (Mac) No (chgImg works, but MoveDIV doesn't)
    > > iCab (Mac) No (chgImg works, but MoveDIV doesn't)
    > >
    > > The faulty function is:
    > >
    > > function moveDIV() {
    > > // moves the picture in a new position...
    > > mouseY=document.body.scrollTop+50;
    > > // Gets the scroll position and positions the DIV 50 px below top
    > > autoDIV.style.pixelTop = mouseY;
    > > }
    > >
    > > I've spent 3 days experimenting and searching examples on the web,

    > but
    > > I still found no solution.
    > >
    > > Can anyone give me a solution ?
    > >
    > > Many thanks in advance.
    > >
    > > --
    > > François de Dardel
    > > http:/mapage.noos.fr/dardelf/
    > > Faber est suae quisque fortunae
    > > Enlever le quatorze pour m'écrire
    > > Remove fourteen in the address to send mail


    (snip)

    Just a rough example...

    Paste in this HTML:

    <BODY BGCOLOR="#FFFFFF">
    <DIV ID="autoDIV"
    STYLE="position:absolute;left:2px;top:102px;width:120px;border:1px
    black solid;">
    <A HREF="#" onClick="chgImg('rien.gif')"><IMG SRC="5CV_s.jpg"
    NAME="slideshow" WIDTH=120 HEIGHT=80 BORDER=0></A></DIV>
    <A HREF="http://mapage.noos.fr/dardelf/index.html" TITLE="FD home"
    onMouseOver="changeIt('FD2', '../images/Blason7on.gif')"
    onMouseOut="changeIt('FD2', '../images/Blason7.gif')"><IMG
    SRC="../images/Blason7.gif" NAME="FD2" ALT="To
    Fran&ccedil;ois´ homepage" BORDER="0" ALIGN="left"></A>
    <TABLE SUMMARY="Liste" BORDER="0" CELLSPACING="0" CELLPADDING="2"
    ALIGN="center" WIDTH="80%">
    <TR>
    <TD ROWSPAN=999 WIDTH=1></TD>
    <TD COLSPAN=3 CLASS="grandbleu">Les autos de Tintin</TD>
    <TD ALIGN="right" CLASS="bleu" COLSPAN=2><B>A list of all Tintin
    cars</B></TD>
    </TR>
    ............
    ............
    ....and this JS (replaces Load_Image, chgImg, moveDIV):

    <script type="text/javascript">

    function chgImg(myImg)
    {
    document.slideshow.src = myImg;
    }

    function moveDIV(e)
    {
    var y_mouse, y_scroll, el, picHt = 80, adj = 2;
    if (e = e || window.event)
    {
    if ('undefined' != typeof e.clientY)
    y_mouse = e.clientY < picHt ? picHt : e.clientY;
    else if ('undefined' != typeof e.pageY)
    y_mouse = e.pageY < picHt ? picHt : e.pageY;
    if (y_mouse)
    {
    if (self.pageYOffset)
    y_scroll = self.pageYOffset;
    else if (document.documentElement &&
    document.documentElement.scrollTop)
    y_scroll = document.documentElement.scrollTop;
    else if (document.body)
    y_scroll = document.body.scrollTop;
    if ((document.getElementById
    && (el = document.getElementById('autoDIV')))
    || (document.all
    && (el = document.all['autoDIV'])))
    {
    el.style.top = y_mouse + y_scroll + adj - picHt + 'px';
    }
    }
    }
    }

    </script>

    And: change *all* of these -

    onMouseOver="moveDIV();

    ....to:

    onMouseOver="moveDIV(event);
    RobB, Apr 26, 2005
    #3
  4. On 2005-04-26 04:31:33 +0200, "RobB" <> said:

    >
    > Fran=E7ois de Dardel wrote:
    >> The URL is:
    >> http://mapage.noos.fr/dardelf3/tintin/ListeAutos.html
    >> The JS is in the header
    >>
    >> This page behaves as follows:
    >> Safari (Mac) OK
    >> MSIE (Mac) OK
    >> MSIE 5.0 (PC) OK (on Virtual PC on the Mac)
    >> MSIE 5.1 (PC) No on my office PC (chgImg works, but MoveDIV doesn't)
    >> FireFox (Mac) No (chgImg works, but MoveDIV doesn't)
    >> iCab (Mac) No (chgImg works, but MoveDIV doesn't)
    >>
    >> The faulty function is:
    >>
    >> function moveDIV() {
    >> // moves the picture in a new position...
    >> mouseY=3Ddocument.body.scrollTop+50;
    >> // Gets the scroll position and positions the DIV 50 px below top
    >> autoDIV.style.pixelTop =3D mouseY;
    >> }


    > With some help from ppk:
    >
    > function moveDIV()
    > {
    > // moves the picture in a new position...
    > var y_scroll, el;
    > if (self.pageYOffset)
    > // all except Explorer
    > y_scroll =3D self.pageYOffset;
    > else if (document.documentElement &&
    > document.documentElement.scrollTop)
    > // Explorer 6 Strict
    > y_scroll =3D document.documentElement.scrollTop;
    > else if (document.body) // all other Explorers
    > y_scroll =3D document.body.scrollTop;
    > // Gets the scroll position and positions the DIV 50 px below top
    > if ((document.getElementById
    > && (el =3D document.getElementById('autoDIV')))
    > || (document.all
    > && (el =3D document.all['autoDIV'])))
    > {
    > el.style.top =3D String(y_scroll + 55 + 'px');
    > }
    > }
    >
    > http://www.quirksmode.org/viewport/compatibility.html
    >

    Many thanks, will experiment will this. The reference is particularly useful.
    --
    François de Dardel
    http:/mapage.noos.fr/dardelf/
    Faber est suae quisque fortunae
    Enlever le quatorze pour m'écrire
    Remove fourteen in the address to send mail
    François de Dardel, Apr 26, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Marc

    Image magically moving

    Marc, Sep 23, 2003, in forum: HTML
    Replies:
    5
    Views:
    362
  2. linkswanted
    Replies:
    0
    Views:
    918
    linkswanted
    Dec 21, 2007
  3. linkswanted
    Replies:
    0
    Views:
    1,562
    linkswanted
    Jan 6, 2008
  4. linkswanted
    Replies:
    0
    Views:
    445
    linkswanted
    Jan 23, 2008
  5. linkswanted
    Replies:
    0
    Views:
    629
    linkswanted
    Jan 24, 2008
Loading...

Share This Page