PDA

Click to See Complete Forum and Search --> : image banner

Domos
10-09-2003, 05:36 AM
hey all,

i'm looking for a javascript that can do the folowing:

let's say i have 50 pictures of 50*50 pixels all next to eachother (so u kinda see a picture banner)
that banner aint fully shown on the site, only eg the first 6 pictures are seen.

Now, i would like this:
when the user moves his mouse to the right side of the banner the image-banner should start going left so more pictures can be seen.
when the user again goes to the left side of the image-banner the banner moves to the right so pictures at the left side can be seen.

i know it's possible in flash but i think updating the pictures will be more easy in javascript

if u wanna see what i mean check this flash example:
http://www.flashkit.com/movies/Scripting/Scrolling/horizont-matt_rob-6157/index.php

one difference, the flash example is already moving, i would like to keep it static until the user mouse over it.

Thx in advance

Domos
Gollum
10-09-2003, 07:13 AM
something like this should do the trick...

<html>
<head>
<title>Untitled</title>
<script>
var imgWidth=50;
var aImg = [
"bear1.jpg","bear2.jpg",
"bear1.jpg","bear2.jpg",
"bear1.jpg","bear2.jpg",
"bear1.jpg","bear2.jpg",
"bear1.jpg","bear2.jpg",
"bear1.jpg","bear2.jpg",
"bear1.jpg","bear2.jpg",
"bear1.jpg","bear2.jpg"
];
var bandWidth = imgWidth * aImg.length;

var velocity = 0;
var l = -bandWidth;
var ctxt = null;
function setVelocity()
{
velocity = (150 - event.clientX) / 50;
}
function stop()
{
velocity = 0;
if ( ctxt != null ) clearTimeout(ctxt);
}
function animate()
{
var oSpan = document.getElementById('inner');
l += velocity;
if ( l < -bandWidth ) l += bandWidth;
if ( l > 0 ) l -= bandWidth;
oSpan.style.left = l + 'px';
ctxt = setTimeout("animate();",25);
}
</script>
</head>
<body>
<div id=banner style="position:absolute;overflow:hidden;width:300px;height:50px" onmousemove="setVelocity();" onmouseout="stop();" onmouseover="animate();">
<script>
document.write('<div id=inner nowrap style="position:relative;overflow:visible;left:-' + bandWidth + 'px">');
for ( var i = 0; i < aImg.length; i++ ) document.write('<img src="' + aImg[i] + '">');
for ( var i = 0; i < aImg.length; i++ ) document.write('<img src="' + aImg[i] + '">');
document.write('</div>');
</script>
</div>
</body>
</html>


just enter the image sources into the array and it should start working...

it assumes the width of the 'banner' is 300px.
Domos
10-09-2003, 07:39 AM
well thx, taht script surely does what i want :)
one more question though, how can i make the pictures clickable, everyone with a different link behind em?

Also, there seems to be a gap in the pictures, i mean when it scrolls all the way to the right it suddenly jumps to the start again.
Is there a way to just make it stop when the last image of the banner is shown (left side or right side) i mean when the most right picture has just entered the container, the movement stops, like that no white spaces are possible and there's an end and a beginning to the banner.

The banner can start with the first picture at the most left border of the container.

Thx again
Gollum
10-09-2003, 08:20 AM
you'll want to make the following changes...


var velocity = 0;
var l = 0;

function animate()
{
var oSpan = document.getElementById('inner');
l += velocity;
if ( l > 0 ) l = 0;
if ( l < 300 - bandWidth ) l = 300 - bandWidth;
oSpan.style.left = l + 'px';
ctxt = setTimeout("animate();",25);
}

...

<script>
document.write('<div id=inner nowrap style="position:relative;overflow:visible;left:0px">');
for ( var i = 0; i < aImg.length; i++ ) document.write('<img src="' + aImg[i] + '">');
document.write('</div>');
</script>