Forum Moderators: open
I have a website I am developing, which will be a resource site for digital musicians & computer recording.
Under the home page's header, I want a narrow graphic of a sound wave to scroll across the entire screen, from right to left...as a thin horizontal band...which will resemble an audio track as it plays in a PC digital audio workstation (multitrack recording application.)
Well...I have the graphic. I created a screen shot of a SONAR project; & cropped it down to one track's display width. I then saved the screen shot as a TIF file; & then assembled two copies side by side using layers in Photoshop (to make it twice as long.)
I now have the perfect graphic at a suitable length (which I can of course optimize it for the web as a JPG.)
All I need is a script to make it scroll (& I of course need to be able to place the graphic in a layer in Dreamweaver, for correct positioning.)
Is something like this obtainable...or writable? The only tickers or scrollers I've ever seen are for text.
Could someone please point me in the right direction?
Thanks,
mark4man
<script>
function moveBackground(x) {
var obj = document.getElementById('testy');
obj.style.backgroundPosition = ""+x+"px 0px";
setTimeout("moveBackground("+(x+1)+")",25);
}
</script><body onload="moveBackground(0);">
<div id="testy" style="background:url(graphic.jpg) repeat-x; height:XXpx; width:XXXpx;"> </div>
If you're using Dreamweaver, search the help files for "Timelines." It allows you to animate any div directly in the program.
That's fantastic, man!
Now...using your script, the image scrolls across the page all the way at the top.
I need it to scroll across at a height of "top:285px"
How is this accomplished?
JFTHOI, I placed the image in a layer & positioned that layer at the precise spot it needed to be; & the code read like this:
<div id="Layer4" style="position:absolute; left:-1px; top:285px; width:793px; height:58px; z-index:18"><img src="SoundWave3.jpg" width="792" height="58"></div>
Your layer's code is:
<div id="testy" style="background:url(SoundWave3.jpg) repeat-x; height:58px; width:1131px;"> </div>
I was going to try & figure out how to combine the two...to somehow work the absolute positioning of the layer into your code...but I thought it may be better to not to tread where I don't know the turf...
& so I thought I'd better ask again.
Thanks very much,
mark4man
BTW - rocknbill...thanks for your suggestion, too. I kept running into dead ends with timelines, tho. Not sure if it's implementable for what I want to do.
ChadCEO,
I think I fouled up. Figured it out myself (or so I thought.) I added the absolute positioning to your code, put it all together in Dreamweaver...previewed it; & it looked fantastic.
Uploaded the new page & graphic to my site, but it doesn't work there. In the internet bar at the bottom of the browser page...it continues to flash the message: "downloading SoundWave3.jpg"
If you wouldn’t mind visiting my site:
[mysite.verizon.net...]
...take a look at my source code; & tell me what I did wrong.
Again...thanks very much,
mark4man
Thanks (haven’t looked at it yet)...but, did you go to my site, to look at the existing code?
I'm having a hard time assimilating this, but...when I went to my site today...from my work PC...the waveform graphic was scrolling beautifully, but when I hovered the cursor over various links, there is a rapid-fire toggling between the cursor arrow & the hourglass. When you move the cursor over a link, the hand symbol flashes as well (which will really confuse visitors who want to select that link.)
And...as I said earlier, from my PC at home, the graphic continually tries to download (& the cursor works fine.)
Man...what is going on?
mark4man
