1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Horizntal Image scrolling

Discussion in 'Web Design & Development' started by ashras99, Jan 28, 2005.

Thread Status:
Not open for further replies.
Advertisement
  1. ashras99

    ashras99 Thread Starter

    Joined:
    Jul 13, 2002
    Messages:
    1,044
    Anyone can tell me what's the script of scoll the images horizontally like on www.3d.sk

    Is it possible to load the images dynamically from the folder of images.

    By doing the View source i watch the coding....

    <script language="JavaScript">
    function smove(){
    pics1.style.pixelLeft -= 1;
    pics2.style.pixelLeft -= 1;
    temp = pics2.clientWidth + pics2.style.pixelLeft;
    if (pics1.style.pixelLeft < -pics1.clientWidth) pics1.style.pixelLeft = temp;
    temp = pics1.clientWidth + pics1.style.pixelLeft;
    if (pics2.style.pixelLeft < -pics2.clientWidth) pics2.style.pixelLeft = temp;
    }
    function setup(){
    main.style.width = document.body.clientWidth - main.style.pixelLeft;
    pics2.style.pixelLeft = pics1.clientWidth + pics1.clientLeft;
    }
    function scrollImgs() {
    Gtimer = setInterval("smove()", 50);
    }
    function stopScroll() {
    clearInterval(Gtimer);

    }
    </script>

    But dont able to understand how to set the images or load the images. Please explain little in detail.
     
  2. Toddles18

    Toddles18

    Joined:
    Jul 18, 2001
    Messages:
    2,910
    There has to be code farther down the page that is calling the javascript functions that you have posted above. You need to find those.
     
  3. ashras99

    ashras99 Thread Starter

    Joined:
    Jul 13, 2002
    Messages:
    1,044
    Ya, I already watch it but not able to understand fully, can you tell me in detail or just post whole coding here (with little description under which tag will be come)
     
  4. Toddles18

    Toddles18

    Joined:
    Jul 18, 2001
    Messages:
    2,910
    Each picture is individually referenced. The functions are started with the "body onLoad" tag.

    Hope that helps! :)

    Code:
    <body onLoad="setup(); scrollImgs();" bgcolor="#FFFFFF" text="#333333" link="#666666" vlink="#666666" alink="#666666">
    <div id="main" style="position:absolute; left:0px; top:70; width:748px; height:150px; z-index:1; overflow: hidden;; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000"> 
      <div id="pics1" style="position:absolute; left:0px; top:10px; width:685px; height:70px; z-index:2; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000"> 
        <table width="100%" border="0" cellpadding="1" cellspacing="0">
          <tr> 
            <td> <a href="sitemap.htm">
            <img src="obr1.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="101" height="150"></a> 
            </td>
            <td> <a href="sitemap.htm">
            <img src="obr2.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="112" height="150"></a> 
            </td>
            <td> <a href="sitemap.htm">
            <img src="obr3.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="226" height="150"></a> 
            </td>
            <td> <a href="sitemap.htm">
            <img src="obr4.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="111" height="150"></a> 
            </td>
            <td> <a href="sitemap.htm"> 
            <img src="obr6.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="112" height="150"></a> 
            </td>
            <td> <a href="sitemap.htm">
            <img src="obr5.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="105" height="150"></a> 
            </td>
            <td> <a href="sitemap.htm">
            <img src="obr7.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="112" height="150"></a> 
            </td>
            <td> <a href="sitemap.htm">
            <img src="obr8.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="105" height="150"></a> 
            </td>
            <td> <a href="sitemap.htm">
            <img src="obr9.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="112" height="150"></a> 
            </td>
          </tr>
        </table>
    </div>
    <div id="pics2" style="position:absolute; left:675px; top:10px; width:685px; height:70px; z-index:2; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000"> 
        <table width="100%" border="0" cellpadding="1" cellspacing="0">
    <tr> 
            <td> <a href="sitemap.htm">
            <img src="obr1.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="101" height="150"></a> 
            </td>
            <td> <a href="sitemap.htm">
            <img src="obr2.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="112" height="150"></a> 
            </td>
            <td> <a href="sitemap.htm">
            <img src="obr3.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="226" height="150"></a> 
            </td>
            <td> <a href="sitemap.htm">
            <img src="obr4.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="111" height="150"></a> 
            </td>
            <td> <a href="sitemap.htm"> 
            <img src="obr6.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="112" height="150"></a> 
            </td>
            <td> <a href="sitemap.htm">
            <img src="obr5.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="105" height="150"></a> 
            </td>
            <td> <a href="sitemap.htm">
            <img src="obr7.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="112" height="150"></a> 
            </td>
            <td> <a href="sitemap.htm">
            <img src="obr8.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="105" height="150"></a> 
            </td>
            <td> <a href="sitemap.htm">
            <img src="obr9.jpg" onmouseover="stopScroll();" onMouseOut="scrollImgs();" align="top" border="0" width="112" height="150"></a> 
            </td>
          </tr>
        </table>
    </div>
    </div>
    
     
  5. ashras99

    ashras99 Thread Starter

    Joined:
    Jul 13, 2002
    Messages:
    1,044
    Guys please tell me how to load the images in the horizontal scroller from the external folder. May be in javascript or flash.
     
  6. Sequal7

    Sequal7

    Joined:
    Apr 14, 2001
    Messages:
    2,382
  7. ashras99

    ashras99 Thread Starter

    Joined:
    Jul 13, 2002
    Messages:
    1,044
    But the files not loaded from external file, they are mentioned in the html file.
     
  8. Gazornenplat

    Gazornenplat

    Joined:
    Dec 30, 2004
    Messages:
    106
    You can't load the files dynamically for the simple reason that when you view the page the program (HTML and JavaScript) is running on your m/c and the pictures come from the server. You will need some kind of server-side scripting.

    It would help if you could explain a simple scenario which would fit your needs. It is not easy to provide an answer if you don't tell us what the problem is :)

    Gaz
     
  9. ashras99

    ashras99 Thread Starter

    Joined:
    Jul 13, 2002
    Messages:
    1,044
    I am designing this for my friend personal website. In future he wants easily updatebility due to less knowledge of computers. So, i am looking for a solution, he just upload the files in the folder on the server and on webpage this automatically updates.
     
  10. Rockn

    Rockn

    Joined:
    Jul 29, 2001
    Messages:
    21,334
    Like was mentioned above, you need some sort of server side scripting to accomplish what you want.
     
  11. Gazornenplat

    Gazornenplat

    Joined:
    Dec 30, 2004
    Messages:
    106
    OK, I see the problem.

    If you have a fixed number of pictures, then simply get your friend to overwrite the existing pictures.

    If you have a variable number, then there are a number of ways, depending on how complicated you want to get and what you have available to you on the server. You could create the page on the fly and add in all the images found in the relevant directory for example.

    Gaz
     
  12. ashras99

    ashras99 Thread Starter

    Joined:
    Jul 13, 2002
    Messages:
    1,044
    Have a look top most script on this post. In this script scoller going "right to left" but i want to change the movement to "left to right" please tell me what i change..

    For better look of code have a look the scroller in live action here...

    http://cgshowcase.netfirms.com/scroller.html
     
  13. Rockn

    Rockn

    Joined:
    Jul 29, 2001
    Messages:
    21,334
    It doesn't scroll at all if this is your example of a working script.
     
  14. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/324369

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice