Making a single image scroll 1

[kliz0328]

I have a single very wide image that I am scrolling, it works fine in firefox, but in IE the hour glass keeps flashing next to the pointer. I was wondering if there was anyway to prevent this. Here is the site

http://www.carletonasptest.com/websitestatesearch/Contact.asp

Here is my javascript to make it scroll:

{
Form = document.forms.Contact.elements
document.getElementById('scroll').style.backgroundPosition= k +'px 50%'
if(k == -521)
{
  rev='no'
}
if (k == 0)
{
  rev='yes'
}
 if (rev == 'yes')
  {
    k-=0.5
  }
  else
  {
    k+=0.5
  }
if ((k==-21) || (k==-187) || (k==-354) || (k==-521))
  {
  setTimeout('Scroll()', 4000)
  }
else
  {
  setTimeout('Scroll()', 1)
  }
}

 

[theniteowl]

IE has problems manipulating images defined in style sheets.
It tries to download the image from the server again each time it tries to work with it.

Try setting the image directly in your HTML rather than through the stylesheet and then adjusting it's position.

It's hard to think outside the box when I'm trapped in a cubicle.

 

[kliz0328]

Do you mean with the basic HTML <img> tag, and if so is there a way that it only displays a section of the image? The image that is scrolling is one very wide image and when I try to put it directly into the HTML it strectches my div out way too wide.

 

[theniteowl]

Try creating a div with the height/width settings you need and loading the image inside that. Then from your code you can manipulate the position of the image inside the div.


It's hard to think outside the box when I'm trapped in a cubicle.

 

[kliz0328]

Here is what I tried, but it still strectched my div way out, am I doing this right?

  <div id="scroll" style="width:170px;">
    <img src="imagesss/scroll.gif" style="margin:0;padding:0;">
  </div>

 

[kliz0328]

Is there an alternate way of doing this with a single image like this?

 

[theniteowl]

I have tried a few things here without success.
I believe it has to do with moving the background image.

You might be able to set the overflow property of the DIV so it will not expand in size or show scrollbars and then position the image inside of the DIV as a regular image instead of as a background. It would require using the left and top or scrollLeft scrollTop properties depending on the browser. When I get some time I can try it out but in the meantime take a look on Dynamic Drive for scrolling slideshow scripts and see if something there might work.



It's hard to think outside the box when I'm trapped in a cubicle.

 

[kliz0328]

the overflow combined with manipulating the margin worked great, thanks for sticking with me niteowl.

 

[theniteowl]

Glad it worked for you. It was something I had never tried before but good to know for the future.


It's hard to think outside the box when I'm trapped in a cubicle.