Swap images if Javascript is disabled

[Helmut Giese]

Hello out there,
I know that I can replace an image with another using e.g.
onMouseOver="swapIn(...)"
and
onMouseOut="swapOut(...)"

Is there anything I can do if Javascript is disabled?
- I guess I could use 'noscript' to provide a link which opens an
external window to display the second image'
- any other possibilty?

On a related note: Is it possible (without Javascript) to open a new
window giving its dimension and omitting the usual "decorations" - it
is for displaying a small image which looks ridiculous if a "normal"
window would open.
Any info will be greatly appreciated.
Best regards
Helmut Giese

[Steve Pugh]

hg****@ratiosoft.com (Helmut Giese) wrote:

Hello out there,
I know that I can replace an image with another using e.g.
onMouseOver="swapIn(...)"
and
onMouseOut="swapOut(...)"

Is there anything I can do if Javascript is disabled?
If it's a background images then you can change it via :hover in CSS.
- I guess I could use 'noscript' to provide a link which opens an
external window to display the second image'
- any other possibilty?
Just link to it normnally as the standard, then add JavaScript on top
of that. Starting with the JS gizmos and then adding the basics is
almost always the wrong way round.
On a related note: Is it possible (without Javascript) to open a new
window giving its dimension and omitting the usual "decorations"
No.
it is for displaying a small image which looks ridiculous if a "normal"
window would open.

Then don't open it in a new window. Leave it up to the user to decide
how to display the image.

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Lachlan Hunt]

Helmut Giese wrote:

Hello out there,
I know that I can replace an image with another using e.g.
onMouseOver="swapIn(...)"
and
onMouseOut="swapOut(...)"

Is there anything I can do if Javascript is disabled?

- I guess I could use 'noscript' to provide a link which opens an
external window to display the second image'

What's the purpose of the rollover when JS is enabled? Is it just a
presentational enhancement or is the rollover image really meaningful
content? If it's just presentational, it doesn't matter if it's not
shown to some users and it's certainly not worth linking to separately.

--
Lachlan Hunt
http://lachy.id.au/
http://GetFirefox.com/ Rediscover the Web
http://GetThunderbird.com/ Reclaim your Inbox

[Helmut Giese]

On Tue, 27 Jun 2006 22:09:55 +0100, Steve Pugh <st***@pugh.net> wrote:

Hi Steve,

I know that I can replace an image with another using e.g.
onMouseOver="swapIn(...)"
and
onMouseOut="swapOut(...)"

Is there anything I can do if Javascript is disabled?

If it's a background images then you can change it via :hover in CSS.

No, it's part of the presentation. Hm, could a table have a background
image which would then change via :hover in CSS? Probably not.

- I guess I could use 'noscript' to provide a link which opens an
external window to display the second image'
- any other possibilty?

Just link to it normnally as the standard, then add JavaScript on top
of that. Starting with the JS gizmos and then adding the basics is
almost always the wrong way round.

Well, the assumption here is that Javascript is disabled.

On a related note: Is it possible (without Javascript) to open a new
window giving its dimension and omitting the usual "decorations"

No.

Too bad.

it is for displaying a small image which looks ridiculous if a "normal"
window would open.

Then don't open it in a new window. Leave it up to the user to decide
how to display the image.

It's a relatively small window (350 x 350) being part of a rather
large page. Displaying the second image in the same window would
completely lose the context, while showing it in a separate (smaller)
window would retain it.
But, well, if the technology doesn't allow it, then so be it.
Thanks for the info and best regards
Helmut Giese

[Helmut Giese]

On Wed, 28 Jun 2006 11:54:46 +1000, Lachlan Hunt
<sp***********@gmail.com> wrote:

Hi Lachlan,

What's the purpose of the rollover when JS is enabled? Is it just a
presentational enhancement or is the rollover image really meaningful
content? If it's just presentational, it doesn't matter if it's not
shown to some users and it's certainly not worth linking to separately.

No, it's the central part of the message. Something like
This is how things are now.
Move the mouse over the image to see
how it could be like. :)
So I would like to find a way to present it in a meaningful way even
if Javascript is disabled.
Best regards
Helmut Giese

[Steve Pugh]

Helmut Giese wrote:

On Tue, 27 Jun 2006 22:09:55 +0100, Steve Pugh <st***@pugh.net> wrote:

Hi Steve,

I know that I can replace an image with another using e.g.
onMouseOver="swapIn(...)"
and
onMouseOut="swapOut(...)"

Is there anything I can do if Javascript is disabled?
If it's a background images then you can change it via :hover in CSS.>

No, it's part of the presentation.

But in your reply to Lachlan you said "No, it's the central part of the
message." Which is it? Presentation or content? If its content then
keep it in the HTML and don't make it a background image.

Based on what you say there "This is how things are now.
Move the mouse over the image to see
how it could be like. :)"
I would suggest putting both images in the page as normal content and
letting the user see them side by side rather than only having one
visible at a time. Especially for users without a mouse...
Hm, could a table have a background
image which would then change via :hover in CSS? Probably not.

Of course.

Shame about IE which only supports :hover on links.

- I guess I could use 'noscript' to provide a link which opens an
external window to display the second image'
- any other possibilty?

Just link to it normally as the standard, then add JavaScript on top
of that. Starting with the JS gizmos and then adding the basics is
almost always the wrong way round.

Well, the assumption here is that Javascript is disabled.

If that's the assumption then don't use JavaScript at all.

My advice was based on the assumption that some people would have
JavaScript and some people wouldn't.

it is for displaying a small image which looks ridiculous if a "normal"
window would open.

Then don't open it in a new window. Leave it up to the user to decide
how to display the image.

It's a relatively small window (350 x 350) being part of a rather
large page. Displaying the second image in the same window would
completely lose the context, while showing it in a separate (smaller)
window would retain it.

One click to close popup.
One click to go back to previous page.

No difference in getting back to the "context".

Steve

[Lachlan Hunt]

Helmut Giese wrote:

On Wed, 28 Jun 2006 11:54:46 +1000, Lachlan Hunt
<sp***********@gmail.com> wrote:

What's the purpose of the rollover when JS is enabled? Is it just a
presentational enhancement or is the rollover image really meaningful
content? If it's just presentational, it doesn't matter if it's not
shown to some users and it's certainly not worth linking to separately.

No, it's the central part of the message. Something like
This is how things are now.
Move the mouse over the image to see
how it could be like. :)
So I would like to find a way to present it in a meaningful way even
if Javascript is disabled.
Best regards
Helmut Giese

You could try something like this:

<a href="more-info" class="before-after">
<img src="before.jpg" class="before" alt="...">
<img src="after.jpg" class="after" alt="...">
</a>

a.before-after img.after { position: absolute; left: -2000px; }

a.before-after:hover img.before,
a.before-after:focus img.before { position: absolute; left: -2000px; }

a.before-after:hover img.after,
a.before-after:focus img.after { position: static; }

You could use display: none; instead of positioning them off screen, but
then, unfortunately, broken screen readers wouldn't read the alt text.

That way, no javascript is required at all. It should work in IE and
users with CSS disabled still get both images.

--
Lachlan Hunt
http://lachy.id.au/
http://GetFirefox.com/ Rediscover the Web
http://GetThunderbird.com/ Reclaim your Inbox

[Helmut Giese]

Hi Steve and Lachlan,
I want to thank you both for your suggestions, but more urgent things
have come up :(
Actually I am a software developer helping out on the HTML front line,
but currently one of my programs gives us or rather a customer some
headaches, so I have to concentrate on this issue.
I'll be back as soon as this will be resolved.
Best regards
Helmut Giese