
How can I display a moving line of images on my website?
I am developing a website on my own, without using any program, I want to have a photo stream that moves on top of my page, from right to left.
Just incase it matters, I am on mac.
Hi!
Good to see somebody hand-coding a website for themselves rather than relying on Dreamweaver or other such trash. Good on you! I'm assuming that you already know quite a bit about HTML, but JavaScript is the way forward for you, my friend! Including all the code in this post would take up way too much room. Here is a link to the code for a complete HTML page with a little black box which scrolls to the right in it (I wrote it myself and uploaded it to my server especially):
http://www.rubyriversolutions.co.uk/YahooAnswerDocument.html
Just follow the link and click "View Source" in your browser. I'll explain how and why this works.
When the "Start" button is clicked, the JavaScript function startScrolling() is called. In this function, the variable timerHolder is told to repeat the shiftRight() function every one millisecond.
When the stopScrolling() function is called, the variable is cleared and the repeating movement stops. In order to reverse the motion, change the "+ 1" in the shiftRight() function to "- 1" and the motion will be reversed. In case you are familiar with CSS, the "position" style sheet attribute has to be "absolute" or "relative" and the "top" and "left" (or "bottom" or "right") attributes must be included.To include an image inside this little black box, just add your image code inside the "DIV" tags and remove the "width" and "height" CSS code from the "STYLE" attribute.
My making more functions and boxes with different ID attributes, you could achieve a very simple image scroll widget, alternatively, if you want to take things to the next level, you can create a JavaScript array of IDs of different elements to scroll.
If you didn't follow any of that and don't have the faintest idea what I've been waffling on about, then search Google or Yahoo for "JavaScript Tutorials" and you'll get about a billion hits. I can particularly recommend The Code Project for any programming or web development questions:
http://www.codeproject.com/
You can also get pre-written JavaScript for this at various sites on the web, as you can for most JavaScript widgets.
Good luck and if you can't get the code to work or you have any questions, e-mail me and I'll be happy to help.
|