Blank image replacements???

[Jon Glazer]

I have a small function that simply swaps image A with image B. The problem
is that in some situations (i don't know why yet) when A and B are swapped,
they simply vanish. Here is the function (with a transition):

<script>
var pictemp=new Image();
function replacemain(id) {
if (document.all){
document.images .MainImage.styl e.filter="blend Trans(duration= 2)"
document.images .MainImage.filt ers.blendTrans. Apply()
document.images['Image_'+id].style.filter=" blendTrans(dura tion=2)"
document.images['Image_'+id].filters.blendT rans.Apply()
}
pictemp.src=doc ument.images.Ma inImage.src;
document.images .MainImage.src = document.images['Image_'+id].src;
document.images['Image_'+id].src=pictemp.sr c;

if (document.all){
document.images .MainImage.filt ers.blendTrans. Play()
document.images['Image_'+id].filters.blendT rans.Play()
}

}
</script>

[Jon Glazer]

Re: Blank image replacements???

Actually here's the function (saw some slight mistakes). Do you have any
ideas why its "blanking" on some IEs?

<script>
function replacemain(id) {
var pictemp=new Image();
if (document.all){
document.images .MainImage.styl e.filter="blend Trans(duration= 2)"
document.images .MainImage.filt ers.blendTrans. Apply()

document.images['Image_'+id].style.filter=" blendTrans(dura tion=2)"
document.images['Image_'+id].filters.blendT rans.Apply()
}
pictemp.src=doc ument.images.Ma inImage.src;
document.images .MainImage.src = document.images['Image_'+id].src;
document.images['Image_'+id].src=pictemp.sr c;

if (document.all){
document.images .MainImage.filt ers.blendTrans. Play();
document.images['Image_'+id].filters.blendT rans.Play();
}

}
</script>






"Jon Glazer" <jglazer.delete .me@adconn.com> wrote in message
news:IQgFd.9325 2$mA3.52126@fe2 .columbus.rr.co m...[color=blue]
>I have a small function that simply swaps image A with image B. The
>problem is that in some situations (i don't know why yet) when A and B are
>swapped, they simply vanish. Here is the function (with a transition):
>
> <script>
> var pictemp=new Image();
> function replacemain(id) {
> if (document.all){
> document.images .MainImage.styl e.filter="blend Trans(duration= 2)"
> document.images .MainImage.filt ers.blendTrans. Apply()
> document.images['Image_'+id].style.filter=" blendTrans(dura tion=2)"
> document.images['Image_'+id].filters.blendT rans.Apply()
> }
> pictemp.src=doc ument.images.Ma inImage.src;
> document.images .MainImage.src = document.images['Image_'+id].src;
> document.images['Image_'+id].src=pictemp.sr c;
>
> if (document.all){
> document.images .MainImage.filt ers.blendTrans. Play()
> document.images['Image_'+id].filters.blendT rans.Play()
> }
>
> }
> </script>
>
>
>[/color]

[RobG]

Re: Blank image replacements???

Jon Glazer wrote:[color=blue]
> Actually here's the function (saw some slight mistakes). Do you have any
> ideas why its "blanking" on some IEs?
>
> <script>[/color]

<script type="text/javascript">
[color=blue]
> function replacemain(id) {[/color]

"id" is not a good choice for a variable name. I keep 'em simple:

function replacemain( s ) {
[color=blue]
> var pictemp=new Image();[/color]

Why create pictemp as an image, when you only need it as a string? You
can set its value at the same time and create a variable to hold the
reference to MainImage (keeps code neater...):

var x = document.images['MainImage'];
var y = document.images[s];
var pictemp = x.src;
[color=blue]
> if (document.all){[/color]

You repeatedly test for document.all, but don't use it. I guess the
presumption is that any browser that supports document.all also
supports filters - that's kinda risky. You want to use filters, so test
for them. Since you want to use it more than once, use a boolean:

var haveFilters = (x.filters);

if ( haveFilters ) {
[color=blue]
> document.images .MainImage.styl e.filter="blend Trans(duration= 2)"
> document.images .MainImage.filt ers.blendTrans. Apply()
>
> document.images['Image_'+id].style.filter=" blendTrans(dura tion=2)"
> document.images['Image_'+id].filters.blendT rans.Apply()[/color]

Because we've used simple variable names, this stuff now becomes:

x.style.filter = "blendTrans(dur ation=2)";
x.filters.blend Trans.Apply();

y.style.filter = "blendTrans(dur ation=2)";
y.filters.blend Trans.Apply();
[color=blue]
> }
> pictemp.src=doc ument.images.Ma inImage.src;
> document.images .MainImage.src = document.images['Image_'+id].src;
> document.images['Image_'+id].src=pictemp.sr c;[/color]

and swapping the images becomes:

x.src = document.images[s].src;
y.src = pictemp;

[...]

et cetera.

Now your function will happily work in IE and Firefox (at least it did
for me). I hope it also fixed your other issue! Sample code below:

<html>
<head><title>Sw ap Images</title>
<script>
function replacemain(s){

var x = document.images['MainImage'];
var y = document.images[s];
var haveFilters = (x.filters);

if ( haveFilters ) {
x.style.filter = "blendTrans(dur ation=2)";
x.filters.blend Trans.Apply();
y.style.filter = "blendTrans(dur ation=2)";
y.filters.blend Trans.Apply();
}

x.src = document.images[s].src;
y.src = pictemp;

if ( haveFilters ) {
x.filters.blend Trans.Play();
y.filters.blend Trans.Play();
}
}
</script>
</head><body>
<img src="a.gif" id="MainImage" width="200" height="50"
onclick="replac emain('notMainI mage');">
<br>
<img src="b.gif" id="notMainImag e" width="200" height="50">
</body></html>


--
Rob

[Jon Glazer]

Re: Blank image replacements???

I tried what you showed below and actually the results are not any
different. If you go to

http://callandermats.adconn.com/catalog.asp?action=showitem&id=21&subcat=14

and click on the Other Views area and then open swatches and back and forth
I think you'll eventually get blank replacements.

Any more ideas?

This is what I currently have:
function replacemain(s){
s='Image_'+s;
var x = document.images['MainImage'];
var y = document.images[s];
var haveFilters = (x.filters);

if ( haveFilters ) {
x.style.filter = "blendTrans(dur ation=2)";
x.filters.blend Trans.Apply();
y.style.filter = "blendTrans(dur ation=2)";
y.filters.blend Trans.Apply();
}

var pictemp = x.src;
x.src = y.src;
y.src = pictemp;

if ( haveFilters ) {
x.filters.blend Trans.Play();
y.filters.blend Trans.Play();
}
}



"RobG" <rgqld@iinet.ne t.auau> wrote in message
news:ArjFd.125$ Ud4.10818@news. optus.net.au...[color=blue]
> Jon Glazer wrote:[color=green]
>> Actually here's the function (saw some slight mistakes). Do you have any
>> ideas why its "blanking" on some IEs?
>>
>> <script>[/color]
>
> <script type="text/javascript">
>[color=green]
>> function replacemain(id) {[/color]
>
> "id" is not a good choice for a variable name. I keep 'em simple:
>
> function replacemain( s ) {
>[color=green]
>> var pictemp=new Image();[/color]
>
> Why create pictemp as an image, when you only need it as a string? You
> can set its value at the same time and create a variable to hold the
> reference to MainImage (keeps code neater...):
>
> var x = document.images['MainImage'];
> var y = document.images[s];
> var pictemp = x.src;
>[color=green]
>> if (document.all){[/color]
>
> You repeatedly test for document.all, but don't use it. I guess the
> presumption is that any browser that supports document.all also
> supports filters - that's kinda risky. You want to use filters, so test
> for them. Since you want to use it more than once, use a boolean:
>
> var haveFilters = (x.filters);
>
> if ( haveFilters ) {
>[color=green]
>> document.images .MainImage.styl e.filter="blend Trans(duration= 2)"
>> document.images .MainImage.filt ers.blendTrans. Apply()
>>
>> document.images['Image_'+id].style.filter=" blendTrans(dura tion=2)"
>> document.images['Image_'+id].filters.blendT rans.Apply()[/color]
>
> Because we've used simple variable names, this stuff now becomes:
>
> x.style.filter = "blendTrans(dur ation=2)";
> x.filters.blend Trans.Apply();
>
> y.style.filter = "blendTrans(dur ation=2)";
> y.filters.blend Trans.Apply();
>[color=green]
>> }
>> pictemp.src=doc ument.images.Ma inImage.src;
>> document.images .MainImage.src = document.images['Image_'+id].src;
>> document.images['Image_'+id].src=pictemp.sr c;[/color]
>
> and swapping the images becomes:
>
> x.src = document.images[s].src;
> y.src = pictemp;
>
> [...]
>
> et cetera.
>
> Now your function will happily work in IE and Firefox (at least it did
> for me). I hope it also fixed your other issue! Sample code below:
>
> <html>
> <head><title>Sw ap Images</title>
> <script>
> function replacemain(s){
>
> var x = document.images['MainImage'];
> var y = document.images[s];
> var haveFilters = (x.filters);
>
> if ( haveFilters ) {
> x.style.filter = "blendTrans(dur ation=2)";
> x.filters.blend Trans.Apply();
> y.style.filter = "blendTrans(dur ation=2)";
> y.filters.blend Trans.Apply();
> }
>
> x.src = document.images[s].src;
> y.src = pictemp;
>
> if ( haveFilters ) {
> x.filters.blend Trans.Play();
> y.filters.blend Trans.Play();
> }
> }
> </script>
> </head><body>
> <img src="a.gif" id="MainImage" width="200" height="50"
> onclick="replac emain('notMainI mage');">
> <br>
> <img src="b.gif" id="notMainImag e" width="200" height="50">
> </body></html>
>
>
> --
> Rob[/color]

[RobG]

Re: Blank image replacements???

Jon Glazer wrote:[color=blue]
> I tried what you showed below and actually the results are not any
> different. If you go to
>
> http://callandermats.adconn.com/cata...d=21&subcat=14
>
> and click on the Other Views area and then open swatches and back and forth
> I think you'll eventually get blank replacements.
>
> Any more ideas?[/color]

I tried your link with IE 6 on SP 1, it works fine (and also in
Firefox, just for the record). Since I can't reproduce the problem, I
can't provide any more assistance. :-(


--
Rob