Progress Bar with Images

I found the probress bar on this site that uses xp_progress.js http://www.dynamicdrive.com/dynamici...rogressbar.htm
which is really cool and I think will help me. However I really want to take it a step further and instead of having a gradient progress I would like to be able to have an image(s) progress across the bar. Say like have chili peppers progress across the bar like the gradient does.

Is there something on this site like that? Is it possible to modify xp_progress.js to do something like that? Is there something around like that so I don't have to re-invent the wheel?

Forgive me, I am not very fulent in JS.

Thanks for any input.

Wes

Here is where the blocks for the bar are created in xp_progress.js:

Code:

---

function createBar(w,h,bgc,brdW,brdC,blkC,speed,blocks,count,action){
if(ie||w3c){
var t='<div id="_xpbar'+(++N)+'" style="visibility:visible; position:relative; overflow:hidden; width:'+w+'px; height:'+h+'px; background-color:'+bgc+'; border-color:'+brdC+'; border-width:'+brdW+'px; border-style:solid; font-size:1px;">';
t+='<span id="blocks'+N+'" style="left:-'+(h*2+1)+'px; position:absolute; font-size:1px">';
for(i=0;i<blocks;i++){
t+='<span style="background-color:'+blkC+'; left:-'+((h*i)+i)+'px; font-size:1px; position:absolute; width:'+h+'px; height:'+h+'px; '
t+=(ie)?'filter:alpha(opacity='+(100-i*(100/blocks))+')':'-Moz-opacity:'+((100-i*(100/blocks))/100);
t+='"></span>';
}
t+='</span></div>';
document.write(t);
var bA=(ie)?document.all['blocks'+N]:docume . . .

---

Let's zoom in and make changes (add/change the green, get rid of the red):

Code:

---

for(i=0;i<blocks;i++){
t+='<img src="mygif.gif" style="background-color:'+blkC+'; left:-'+((h*i)+i)+'px; font-size:1px; position:absolute; width:'+h+'px; height:'+h+'px; '
t+=(ie)?'filter:alpha(opacity='+(100-i*(100/blocks))+')':'-Moz-opacity:'+((100-i*(100/blocks))/100);
t+='"></span>';
}

---

The mygif.gif can be any image you like, the path can be included if desired, just like in a normal HTML image ( <img src="images/whatever.gif"> ) tag.

John,

Wow, thanks! I haven't had a chance to try tyhis out yet but I'll get back here as soon as I plug it all together here in the next few days.

Thanks again!

Wes

That was neat. I was able to get an image to progress across the bar.

I looked but didn't see anything apparent that would give me any "width" adjustment of the scroll blocks. They are square, but can I make them rectangle to accept an image say, that is "40 X 20" and not "20 X 20" for example?

Thanks.

Two ways to go here that I see. The first requires a little image editing skill and is the one I prefer here due to how small the image is or should be and the posibility of unexpected results with the second method. It goes like so:

Edit your image in an image editing program so that it is a square. To maintain the aspect ratio of the image itself, you can add transparent borders or borders that are the same color as the background of the image or of the progress bar's or whatever color you like. Many image editing programs can do this easily via an increase canvas size option.

The second requires editing the script and the results may be different than I expect, at least with some image sizes. The script assumed square blocks with each side equal to the height of the bar so, our added image had to be square. We could add a parameter here for the width of the image (this time all additions and changes are red):

Code:

---

<script type="text/javascript">
var bar1= createBar(300,15,'white',1,'black','blue',85,7,3,"",20);
</script>

---

and use it by adding it to the function like so:

Code:

---

function createBar(w,h,bgc,brdW,brdC,blkC,speed,blocks,count,action,iw){
if(ie||w3c){
var t='<div id="_xpbar'+(++N)+'" style="visibility:visible; position:relative; overflow:hidden; width:'+w+'px; height:'+h+'px; background-color:'+bgc+'; border-color:'+brdC+'; border-width:'+brdW+'px; border-style:solid; font-size:1px;">';
t+='<span id="blocks'+N+'" style="left:-'+(h*2+1)+'px; position:absolute; font-size:1px">';
for(i=0;i<blocks;i++){
t+='<img src="mygif.gif" style="background-color:'+blkC+'; left:-'+((h*i)+i)+'px; font-size:1px; position:absolute; width:'+iw+'px; height:'+h+'px; '
t+=(ie)?'filter:alpha(opacity='+(100-i*(100/blocks))+')':'-Moz-opacity:'+((100-i*(100/blocks))/100);
t+='">';
}
t+='</span></div>';
document.write(t);
var bA=(ie)?document.all['blocks'+N]:docume . . .

---

Notes: Be sure to scroll far enough to the right to see both changes in the above code block. The height of the image will still be the height of the bar. The bar's width must be set wide enough to accommodate all the image blocks' widths added together and then some. The wider your image relative to its height, the more likely this is to cause problems, though any dimensions may be fine. OR, it might be that any image that is not square will mess up another part of the script.