swap image and link change help (javascript)

[Karl]

Hi,

Ok so on a given page I have 4 text links:

see it in black
see it in blue
see it in red
see it in green

using the standard swap image behavior, clicking on one of the above links
changes a displayed image to:

black.jpg
blue.jpg
red.jpg
green.jpg

So far no problem.

Now, I also have a set of images called:

blackL.jpg
blueL.jpg
redL.jpg
greenL.jpg

These are larger versions of the 4 images being swapped.

What I am trying to do is have a text link that says "Click to enlarge"
underneath the image on the page that when clicked will popup a window with
the corresponding "L" (large) image (I already know how to launch a popup).

So, someone clicks the text link for "see it in black", the default image
on the page swaps to "black.jpg" and the text link underneath would launch
a popup containing "blackL.jpg"

Same for see it in blue, see it in red, see it in green

I can't figure out how to make the "Click to enlarge" text link change the
popup it will call whenever someone clicks the corresponding text link
elsewhere on the page.

IOW, clicking "see it in black" makes this text link on the page:

<a href="javascript:;" Onclick="popupwindow(blackL.jpg)"Click to enlarge
</a>

clicking "see it in red" makes this:

<a href="javascript:;" Onclick="popupwindow(redL.jpg)"Click to enlarge</a>

That's pseudocode shorthand of course for an actual popup window behavior.

Did this make sense? Can someone help me?

I'm thinking I need to use an array somehow?

 

[Lee]

Karl said:

Did this make sense? Can someone help me?

I'm thinking I need to use an array somehow?

Did the instructor hint that you should use an array?
That's not how I would do it.


--

 

[Nomen Nescio]

Karl said:


Did the instructor hint that you should use an array?
That's not how I would do it.

No that was just a guess,

Can you tell me what you think I should do?

 

[Karl]

Anyone? Please, I'm out of ideas on how to do this after 8 hours of
googling. Nothing works right.

 

[RobG]

Karl said on 29/03/2006 6:33 AM AEST:

Hi,

Ok so on a given page I have 4 text links:

see it in black
see it in blue
see it in red
see it in green

using the standard swap image behavior, clicking on one of the above links
changes a displayed image to:

black.jpg
blue.jpg
red.jpg
green.jpg

So far no problem.

Now, I also have a set of images called:

blackL.jpg
blueL.jpg
redL.jpg
greenL.jpg

These are larger versions of the 4 images being swapped.

What I am trying to do is have a text link that says "Click to enlarge"
underneath the image on the page that when clicked will popup a window with
the corresponding "L" (large) image (I already know how to launch a popup).

So, someone clicks the text link for "see it in black", the default image
on the page swaps to "black.jpg" and the text link underneath would launch
a popup containing "blackL.jpg"

Same for see it in blue, see it in red, see it in green

I can't figure out how to make the "Click to enlarge" text link change the
popup it will call whenever someone clicks the corresponding text link
elsewhere on the page.

IOW, clicking "see it in black" makes this text link on the page:

<a href="javascript:;" Onclick="popupwindow(blackL.jpg)"Click to enlarge
</a>

The href should point to the actual image, not junk. But why use an A
element at all? You want to work with an image:

<img src="black.jpg" onclick="popupwindow(this);" ... >Click to enlarge


In popupwindow:

function popupwindow(img)
{
var imgSrc = img.src.replace(/\.jpg/,'L.jpg');
...
}

[...]

I'm thinking I need to use an array somehow?

If you like to complicate things, sure.

 

[Karl]

(e-mail address removed) (RobG) wrote in

Karl said on 29/03/2006 6:33 AM AEST:

The href should point to the actual image, not junk. But why use an A
element at all? You want to work with an image:

No. I am not trying to make the image itself a link. I need the link that
opens the popup window to be a text link. Maybe I didn't explain that
part? I thought I did.

<img src="black.jpg" onclick="popupwindow(this);" ... >Click to enlarge


In popupwindow:

function popupwindow(img)
{
var imgSrc = img.src.replace(/\.jpg/,'L.jpg');
...
}

[...]

This makes no sense to me. I can't believe in all my searching I havn't
found a clear answer to what seems like a common thing to want to do...

 

[RobG]

Karl said on 29/03/2006 4:03 PM AEST:

(e-mail address removed) (RobG) wrote in

Karl said on 29/03/2006 6:33 AM AEST: [...]

<a href="javascript:;" Onclick="popupwindow(blackL.jpg)"Click to
<enlarge /a>

The href should point to the actual image, not junk. But why use an A
element at all? You want to work with an image:

No. I am not trying to make the image itself a link. I need the link that
opens the popup window to be a text link. Maybe I didn't explain that
part? I thought I did.

The general idea is to only suggest clicking on something if something
useful will happen. Links that are dependent on script should only be
made available by script. An A element provides the opportunity to
deliver functionality without script.

If an A element is used, the href should point to something useful.
Putting an empty script statement in there is no better than an empty
string. Why not have the href at least point to the default image so
that if JavaScript isn't available at least they get to see something.
And since they don't have scripting, they can't see the alternative
thumbnails anyway.

Oh, and you shouldn't only consider fail-over if scripting is
disabled/not supported, you should also consider it where the features
of your script are not fully supported.

e.g.

<a href="blackL.jpg" onclick="return popupwindow(...);"> ... </a>


So if popupwindow() detects some feature that isn't supported, it tidies
up and returns true so the link is followed. Otherwise it does its
thing (pops up the required image) and returns false so the link
navigation is canceled.

<img src="black.jpg" onclick="popupwindow(this);" ... >Click to enlarge


In popupwindow:

function popupwindow(img)
{
var imgSrc = img.src.replace(/\.jpg/,'L.jpg');
...
}

[...]

This makes no sense to me. I can't believe in all my searching I havn't
found a clear answer to what seems like a common thing to want to do...

A better version is:

var imgSrc = img.src.replace(/\.jpg$/,'L.jpg');


to match .jpg only at the end of the string. Now you can have the
string '.jpg' elsewhere in the path, e.g.

/images/all.jpgs/black.jpg


or similar.

 

[Karl]

Maybe this will make more sense with an example:

http://www.rei.com/product/47985505.htm

This is almost EXACTLY what I am trying to do. Click one of the available
colors thumbnails (sprout Steel). Then Click for larger View below the
swapped image. I want exactly this effect except using text links instead
of little thumbnails and the larger view photo appears in a popup instead
of in the same window.

I'm looking through their code but it's mostly going over my head (as did
your explanations below).

The general idea is to only suggest clicking on something if something
useful will happen. Links that are dependent on script should only be
made available by script. An A element provides the opportunity to
deliver functionality without script.

If an A element is used, the href should point to something useful.
Putting an empty script statement in there is no better than an empty
string. Why not have the href at least point to the default image so
that if JavaScript isn't available at least they get to see something.
And since they don't have scripting, they can't see the alternative
thumbnails anyway.

Oh, and you shouldn't only consider fail-over if scripting is
disabled/not supported, you should also consider it where the features
of your script are not fully supported.

e.g.

<a href="blackL.jpg" onclick="return popupwindow(...);"> ... </a>


So if popupwindow() detects some feature that isn't supported, it tidies
up and returns true so the link is followed. Otherwise it does its
thing (pops up the required image) and returns false so the link
navigation is canceled.

<img src="black.jpg" onclick="popupwindow(this);" ... >Click to
<enlarge


In popupwindow:

function popupwindow(img)
{
var imgSrc = img.src.replace(/\.jpg/,'L.jpg');
...
}

[...]

This makes no sense to me. I can't believe in all my searching I
havn't found a clear answer to what seems like a common thing to want
to do...

A better version is:

var imgSrc = img.src.replace(/\.jpg$/,'L.jpg');


to match .jpg only at the end of the string. Now you can have the
string '.jpg' elsewhere in the path, e.g.

/images/all.jpgs/black.jpg


or similar.