How do you make images that scroll?

[overload]

I apologize in advance if this is a "beginner" question. I'm pretty fluent in a lot of scripting, but there are still those simple things out there that get me.

Anyways, I've been wanting to know how to do this for a long time. I need to know how to make a page scroll using images (you know, images that look like an up arrow and a down arrow). I've seen many people with this, but I've never quite been able to figure out how it works. Also, I'm curious to know if it's possibe to do this with an internal frame, or, more specifically, to scroll an internal frame with the "scrolling images" outside of it.

Thank you all very much in advance. I've been looking all over for a resource to help me with this, and decided this forum might be of some pretty good assistance.

Thanks again.

[quantum]

I can't say this is really a beginner question. Creating a custom scroll is somewhat tough with DHTML. Can you post some sample websites where you saw such kind of scrolling with image scrollbar? I don't see them anymore. Nowadays only full flash websites use such image scrol bars. I used to see them a lot when DHTML just got popular. So I dug up this website that I remembered from 3 years back. It uses a custom image scroll bar and fortunately also has a short tutorial on that. It is pretty old as you can see. But I guess it will give you some ideas. It is somewhat hard to get to the tutorial, because there is no direct url to it (one of the strong reasons, you should avoid such abnormal things). So I am copy- pasting the custom image scrolling tutorial part here:

Quote:

The function in Listing 9.1 is responsible for toggling on the visibility attribute of a selected layer and turning off the visibility attribute of a previously selected layer. Listing 9.1 - Page Selection -------------------------------------------------------------------------------- var menu_selection = "overview"; function menuToggle(selection) { var old_page = eval(menu_selection + "Obj"); old_page.visibility = "hidden"; var new_page = eval(selection + "Obj"); new_page.visibility = "visible"; menu_selection = selection; } -------------------------------------------------------------------------------- When a menu item is clicked, it passes the name of the layer it represents to the menuToggle(selection) function. The first step of this function is to build the old_page object variable using the name stored in the menu_selection variable. The old_page visibility attribute is then made "hidden" with the old_page.visibility = "hidden"; statement. The next step is to build the new_page object variable which will store the name of the selected layer. The new_page visibility attribute is then made "visible" with the new_page.visibility = "visible"; statement. The menu_selection variable is then updated with the name of the selected page, so the next time around, the currently displayed layer will be hidden. Capturing Image Map Events Image maps take on a new life in DHTML documents by providing an easy way to capture mouse events in a defined area. Listing 9.2 shows one of seven hotspots used for the scrolling arrow interface. Listing 9.2 - Image Map Events -------------------------------------------------------------------------------- <MAP NAME="arrows_map"> <AREA SHAPE=RECT COORDS="0,0,36,28" HREF="JavaScript://" onMouseOver="loop=true;scroll('up',1)"; onMouseOut="loop=false;clearTimeout(timer1)" ALT="Slow Scroll"> </MAP> -------------------------------------------------------------------------------- To achieve multiple scrolling speeds, each hotspot defined in the image map passes direction, speed, and loop control information to the page scrolling function using the onClick, onMouseOver and onMouseOut events. An image map can be extended by linking to a blank GIF image that has been sized in a layer to fit over the entire screen or just a small part. Page Scrolling: Standard window scrollbars become useless when developing a DHTML site with independent layers. For this reason it becomes necessary to create your own scrolling mechanism. Listing 9.1 shows the code for scrolling the content layer using the onMouseOver image map events defined earlier. Listing 9.3 - Scrolling Pages -------------------------------------------------------------------------------- var loop = true; var direction = "up"; var speed = 10; var timer1 = null; function scroll(dir,spd) { direction = dir; speed = spd; var page = eval(menu_selection + "Obj"); var y_pos = parseInt(page.top); if(loop == true) { if(direction == "dn") { page.top = (y_pos-(speed)); } else if(direction == "up" && y_pos < 10) { page.top = (y_pos+(speed)); } else if(direction == "top") { page.top = 10; } timer1 = setTimeout("scroll(direction,speed)", 2); } } -------------------------------------------------------------------------------- A simple form of the scrolling function could be limited to just moving the layer every time a button is clicked. A slicker method is to add animation methods to automate the scrolling of the layer. The scroll(dir,spd) function is initiated by one of seven onMouseOver image map events which passes two variables containing direction and speed information to the function. This information is stored into global variables direction and speed which are used repeatedly when the animation function is put through a loop. The next step in the function is to build the name of the layer object using the name stored in the menu_selection global variable set earlier. Once the name of the object is known, the parseInt(page.top); statement is used to capture the layer's current position and store it in the y_pos variable. The idea behind the scrolling mechanism is to keep the page scrolling as long as the mouse is over an arrow. To do this, it is necessary to track of the status of the loop variable. As long as the loop variable is true, the page will scroll. The loop variable is toggled between true and false with the onMouseOver and onMouseOut image map events. The next step is to use a series of if...else statements to test the direction variable for which direction the page should be traveling. As in the layer animation methods discussed earlier, the currently selected layer is then moved by adding or subtracting the speed variable from the layer's current position and then assigned to the layer's .top position attribute. The layer is continuously repositioned at the same speed with a looping function until a new speed and direction command is initiated. A timing loop conflict exists when you call a looping function repeatedly before allowing the timed event to expire. To prevent this, the setTimeout() function is stored in the timer1 variable. The timer can then be canceled with the clearTimeout(timer1) method when the mouse moves from one image map hotspot to another.

It is taken from [http://www.htmlguru.com/] 's old version. I say again, avoid such unnecessary effects unless there is any special reason. They don't really add value to your website. Hope that helps.
_________________

Dust fills my eyes / Clouds roll by / and I roll with them / Centuries cry / Orders fly / and I fall again
Afford best design, implement best solution. Outsource your web design.

[emm]

That htmlguru website looks good. Very good javascript and DHTML effects.
_________________
“You might say reality is the result of complex negotiations between the observer and the observed. But that is simply a point of view…”
Digital Bangladesh