[JavaScript] Scrolling image on header

Wed Aug 18 08:10:41 CDT 2004

Hi Scott

The thing you need to add is the id in the element you want the background
to scroll.
If you look closely on your first examples with the DIV there is an id
called layer0 and after the function rollBackground you do call this same
function with the id of the specifique div if you reproduce this logic with
any other element this should work.

Laurent

<head>
<script language="JavaScript"  type="text/JavaScript"
src="CSSHScroller.js"></script>

<script language="JavaScript"  type="text/JavaScript">
rollBackground('myh5element',-5,0,50)
</script>

<style>
<!--
h5 {background:url('toptest_files/scroller.jpg') repeat-x;}
-->
</style>
</head>
<body>
<h5 id="myh5element">Some Text</h5>
</body>

ps : if you declare your css this way remember that all h5 will have the
same background image but only the on with id will then scroll

I will recommend you to do this 

<style>
<!--
#myh5element {background:url('toptest_files/scroller.jpg') repeat-x;}
-->
</style>

-----Original Message-----
From: Scott Hamm [mailto:ScottHam at clientlogic.com]
Sent: 18 August 2004 13:42
To: [JavaScript List] (E-mail)
Subject: [Javascript] Scrolling image on header

Using the existing code in my html:

<div id=layer0 style="background:url('toptest_files/scroller.jpg')
repeat-x;"></div>
<script language="JavaScript"  type="text/javascript"
src="CSSHScroller.js"></script>

And in CSSHScroller.js:

function rollBackground(id, x, y, t)
{
  obj = document.getElementById(id)
  if (obj.style)
  { bgPos = obj.style.backgroundPosition.split(' ');
    X     = parseInt(bgPos[0]);
    Y     = parseInt(bgPos[1]);
    obj.style.backgroundPosition = (X+x)+"px "+(Y+y)+"px";
  }

  setTimeout("rollBackground('"+id+"', "+x+", "+y+", "+t+")", t);
}
rollBackground('layer0',-5,0,50)

I've been trying to figure out a way to change javascript to run scrolling
image on h1, h2, h3 and so on like so:

<h5style="background:url('toptest_files/scroller.jpg') repeat-x;">Text</h5>
<script language="JavaScript"  type="text/javascript"
src="CSSHScroller.js"></script>

Or if anyone have better idea, I would love to hear them! If possible use
only this in html:

<head>
<script language="JavaScript"  type="text/javascript"
src="CSSHScroller.js"></script>
<style>
<!--
h5 {background:url('toptest_files/scroller.jpg') repeat-x;}
-->
</style>
</head>
<body>
<h5>Some Text</h5>
</body>

Would be appreciated! :)

_______________________________________________
Javascript mailing list
Javascript at LaTech.edu
https://lists.LaTech.edu/mailman/listinfo/javascript

This E-mail and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed.  If you have received this E-mail in error please notify the system manager.  This message contains confidential information and is intended only for the individual named.  If you are not the named addressee you should not disseminate, distribute or copy this E-mail.