Swiss Army Image Slideshow, parts of the previous image appear

[yediburun]

1) Script Title: Swiss Army Image Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...army/index.htm

3) Describe problem: I have a few png's (smaller than others in pixels) in my slideshow. I added slides3.fadecolor='none' to get rid of the white background added to the png. It worked.
But now I have a problem. When I skip to a png in the slideshow, parts of the previous image appear, instead transparent background of the png.
I don't know how to solve this.
Thanks!

[jscheuer1]

It's the fadecolor that prevents bleed through in cases like that. Instead of transparent or none (none will in some browsers make it green), set it to the background color of your page or of the element underneath the slide show.

If due to a background image there is no background color there, that can often be worked out, but it's complicated and depending upon your layout, won't always work. So let's see if using a solid color for fadecolor will work for you first before we go into that.

[yediburun]

Thanks John! A solid color does work, but since the page background is an image pattern (kind of little squares), I haven't been able to assign it here.

Actually, I can add this pattern to the pngs and make them jpegs with the same size as others; but when I do that, everytime I scale the browser window page background moves, so the patterns don't match.
I hope I explained myself clearly, I'm very new to web design

Deniz

[jscheuer1]

Right, that's what I meant about it not always working - it depends upon the layout. If your background image shifts and the slide show doesn't shift with it, there's no way unless the background pattern is so nondescript as to appear to blend in anyway. From what you, say yours is not.

If both the slide show and the background image are left aligned, it can work out. But from what you say, I assume at least one of them is not.

Perhaps if the background and the slide show were both centered . . . But I believe a one pixel discrepancy can still creep in under that situation.

[yediburun]

I'm not sure how to put the background image here; slides3.fadecolor='none'

Should it be slides3.fadecolor='img src="backgroundimage.jpg"'
But no, doesn't work that way.
Sorry, but like I said I'm very new : )

[jscheuer1]

No, that's only the background-color. You cannot enter an image there. The best bet is to use css. I've done it with css for several folks in the past. Are you at all familiar with css?

Anyways, if you don't already have one, put this stylesheet in the head of your page, otherwise add its rule to your existing stylesheet:

<style type="text/css">
#master0 div {
	background: white url(yourimage.jpg) 50px 25px;
}
</style>

Replace yourimage.jpg with the filename of the background image. If it's not in the same folder as the page, include its path. The 50px is the left coordinate and the 25px is the top coordinate. Adjust these as necessary to get it to line up with the 'real' background. The white is a throwaway. It will be replaced by the fadecolor. Use a solid fadecolor though, it will be used if the browser cannot load the background image.

As I say though, it depends upon the layout. If you couldn't get it to work with making the images themselves have background, this might not be any better. It will allow you to tweak it more easily though than having to keep making new images up via trial and error would.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.