Swapping images causes blanks....

[Jon Glazer]

I know this is sorta reposting but I want to simplify the issue a bit. Take
the following script:

function replacemain(s){
var x = document.images['MainImage'];
var y = document.images[s];
var pictemp = x.src;
x.src = y.src;
y.src = pictemp;
}

All I want to do is replace the image specified as "s" with the MainImage.
Actually swap them so that each execution of the function will swapp and
reswap the images without loosing anything. This generally works, however,
on a couple IE6 browsers it causes blank images to swap in.

Visit

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

To see what I mean. It may not go blank for you but trust me, it does for
others. Any ideas why this might happen?

Jon

[Richard Cornford]

Re: Swapping images causes blanks....

Jon Glazer wrote:
<snip>[color=blue]
> ... . This generally works, however, on a
> couple IE6 browsers it causes blank
> images to swap in.[/color]
<snip>

You are describing one of the many know negative side-effects of the use
of the javascript pseudo-protocol in HREFs, and you are using
javascript: pseudo-protocols in the HREFs of the links that trigger the
function (and others).

Richard.

[Jon Glazer]

Re: Swapping images causes blanks....

Ahh.. ok an intelligent response ;-)

Can you suggest an alternative method to achieve the same results?

Thanks!!
Jon

"Richard Cornford" <Richard@litote s.demon.co.uk> wrote in message
news:cs6pde$ada $1$830fa17d@new s.demon.co.uk.. .[color=blue]
> Jon Glazer wrote:
> <snip>[color=green]
>> ... . This generally works, however, on a
>> couple IE6 browsers it causes blank
>> images to swap in.[/color]
> <snip>
>
> You are describing one of the many know negative side-effects of the use
> of the javascript pseudo-protocol in HREFs, and you are using
> javascript: pseudo-protocols in the HREFs of the links that trigger the
> function (and others).
>
> Richard.
>
>[/color]

[RobG]

Re: Swapping images causes blanks....

Jon Glazer wrote:[color=blue]
> Ahh.. ok an intelligent response ;-)
>
> Can you suggest an alternative method to achieve the same results?
>[/color]

Replace the href "link" with an onclick, as in the HTML
source posted in response to your question yesterday.

e.g.:

<a href="javascrip t:void replacemain('b' )"><img
alt="Waterhog™& nbsp;&nbsp;Clas sic" ID="Image_b"
width=80 border=0 src="catalogimg/items/23-b.jpg"></a>

Changes to:

<img
alt="Waterhog™& nbsp;&nbsp;Clas sic" ID="Image_b"
width=80 border=0 src="catalogimg/items/23-b.jpg"
onclick="replac emain('b');"[color=blue]
>[/color]

Note: remove the <a ...></a> tags completely.


--
Rob

[Richard Cornford]

Re: Swapping images causes blanks....

RobG wrote:
<snip>[color=blue]
> <img
> alt="WaterhogT& nbsp;&nbsp;Clas sic" ID="Image_b"
> width=80 border=0 src="catalogimg/items/23-b.jpg"
> onclick="replac emain('b');"[color=green]
> >[/color]
>
> Note: remove the <a ...></a> tags completely.[/color]

Among the many things that deserve some consideration in script design
is accessibility (in the WAI sense). An onclick handler on an IMG tag is
a very pointing device oriented piece of code (at least without a mass
of other code to reproduce what the browser could have done itself). At
least an IMG wrapped in a link can be navigated to with the keyboard,
and usually also activated with it.

But no code examples here as top-posting OPs don't warrant that.

Richard.

[RobG]

Re: Swapping images causes blanks....

Richard Cornford wrote:
[...][color=blue]
> Among the many things that deserve some consideration in script design
> is accessibility (in the WAI sense). An onclick handler on an IMG tag is
> a very pointing device oriented piece of code (at least without a mass
> of other code to reproduce what the browser could have done itself). At
> least an IMG wrapped in a link can be navigated to with the keyboard,
> and usually also activated with it.[/color]

A good point, for the sake of a bit of UI design discussion...

Consider if JavaScript is disabled. The image will appear to be a link
(cursor changes on hover), but if clicked on nothing will happen.
Similarly if the user has images turned off.

Also, although the image looks like a link, it just modifies the
current page, it doesn't actually load anything or go anywhere.

I would try to include in the site design visual cues on what is
going to happen when the image is clicked on. For example:

The alt text could be "Show a sample" and the current alt tag (which
seems to be the name of the carpet sample) moved to a title attribute

On-screen help text could be added just above the sample thumbnails
saying "Click to see a larger sample".

These may seem trivial points, but all should be considered in the
overall page design.
[color=blue]
> But no code examples here as top-posting OPs don't warrant that.[/color]

Hope the OP doesn't just top-read... :-)

--
Rob

[Richard Cornford]

Re: Swapping images causes blanks....

RobG wrote:[color=blue]
> Richard Cornford wrote:[/color]
<snip>[color=blue][color=green]
>> ... . At least an IMG wrapped in a link can be navigated
>> to with the keyboard, and usually also activated with it.[/color]
>
> A good point, for the sake of a bit of UI design discussion...
>
> Consider if JavaScript is disabled. The image will appear to
> be a link (cursor changes on hover), but if clicked on nothing
> will happen. Similarly if the user has images turned off.
>
> Also, although the image looks like a link, it just modifies the
> current page, it doesn't actually load anything or go anywhere.[/color]

Given a properly coded onclick handler on the A element the question
arises as to what should appear in the HREF attribute. The answer may be
the URL of the larger image that was to be swapped in (or the URL of a
static HTML page that would frame the image, or a server-side script
that would do the same, but also be potentially useable with other
images).

Thus you have a link that really is a link, and a design that will also
work (at least to the point of being fully functional) in the absence of
client-side scripting. It also provides the user with the additional
option of opening the larger image in another tab/window if they feel
they want to. And so javascript provides an enhancement to the
functionality of the page, when available, but the design degrades
cleanly to a functional system in its absence. The ability to operate
via the keyboard is a bonus.
[color=blue]
> I would try to include in the site design visual cues on what
> is going to happen when the image is clicked on. For example:
>
> The alt text could be "Show a sample" and the current alt tag
> (which seems to be the name of the carpet sample) moved to a
> title attribute[/color]

We could have a debate about what would constitute the 'correct' use of
ALT and TITLE under these circumstances, but they do need some thought
in this context.
[color=blue]
> On-screen help text could be added just above the sample
> thumbnails saying "Click to see a larger sample".[/color]

"Click to ..." is pointing device oriented terminology that is
discouraged in accessibility circles (and others), but written
instructions usually have considerable value.
[color=blue]
> These may seem trivial points, but all should be considered
> in the overall page design.[/color]
<snip>

In practice script design is as much of an issue (more of an issue
really) as error free, working execution. It deserves discussion,
probably more than it gets.

Richard.

[RobG]

Re: Swapping images causes blanks....

Richard Cornford wrote:
[...][color=blue]
> "Click to ..." is pointing device oriented terminology...[/color]

Not to me.
[color=blue]
> ... that is
> discouraged in accessibility circles (and others)...[/color]

Those who think that way have allowed political correctness to cloud
their logic.

Presumably the user, having navigated to the site, has an interface
that allows them to cause clicks to happen in web pages. Asking them
to click on an image implies only that they should cause a click event
to occur over the image.

Exactly how the user makes that happen is up to them. Presumably they
have chosen an interface that suits their circumstance - voice
activated, thought-controlled, servo-assisted or even a mouse.

I guess "Tell your slave to click here" is right out - I shouldn't
presume the user has the ability to speak or their slave to hear. ;-)

P.S. I must confess that I still say "tidal wave" from time to time
even though I learned what a tsunami is in primary school.

--
Rob