Switch/case how to use it correctly

[Richard]

I've been looking at implementing switch/case on my photo gallery.
Most of the sites I've seen so far, only show the bare basics.
With no real practical examples.
As brucie does with his butterlies and bugs, he uses switch/case, but in
php.

Visitor clicks on a thumbnail selection and the thumbs appear.
Selection of a thumb shows the larger pic AND description.

Since the selection is basically making a choice as within a form, how does
one go about applying what has been chosen, to appear in the proper place?
In the examples, they all favor using simple alert messages as examples.

What I need, is an example of how to manipulate the cases and direct the
coding to the proper areas.

If anyone has a site that would explain this better, please post it.

[Michael Winter]

On Sat, 29 Jan 2005 09:45:17 -0600, Richard <An*******@127. 001> wrote:

I've been looking at implementing switch/case on my photo gallery.

Why? Do you really want to write a case clause for every single image in
the gallery?

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Richard]

On Sat, 29 Jan 2005 16:27:54 GMT Michael Winter wrote:

On Sat, 29 Jan 2005 09:45:17 -0600, Richard <An*******@127. 001> wrote:

I've been looking at implementing switch/case on my photo gallery.

Why? Do you really want to write a case clause for every single image
in
the gallery? [snip]

Would it not be easier than writing a swap routine for each and every image?
As I see it, that's the purpose of switch/case.
A simpler way of writing if/then.
I would much rather write onclick="dothis ()" then
onclick="docume nt.image.src="b lah blah" for each and every item.

[Mick White]

Richard wrote:

I've been looking at implementing switch/case on my photo gallery.
Most of the sites I've seen so far, only show the bare basics.
With no real practical examples.
As brucie does with his butterlies and bugs, he uses switch/case, but in
php.
The "switch/case" construct is the method of last resort, imho.
Mick

Visitor clicks on a thumbnail selection and the thumbs appear.
Selection of a thumb shows the larger pic AND description.

Since the selection is basically making a choice as within a form, how does
one go about applying what has been chosen, to appear in the proper place?
In the examples, they all favor using simple alert messages as examples.

What I need, is an example of how to manipulate the cases and direct the
coding to the proper areas.

If anyone has a site that would explain this better, please post it.

[Michael Winter]

On Sat, 29 Jan 2005 10:48:08 -0600, Richard <An*******@127. 001> wrote:

On Sat, 29 Jan 2005 16:27:54 GMT Michael Winter wrote:
[snip]

Do you really want to write a case clause for every single image in the
gallery?

[snip]

Would it not be easier than writing a swap routine for each and every
image?

What on Earth gives you the impression that that's necessary? Good grief!
As I see it, that's the purpose of switch/case.
A simpler way of writing if/then.
The purpose of the switch statement is to compare many values to a single
expression. In general, if statements evaluate different expressions.
I would much rather write onclick="dothis ()" then
onclick="docume nt.image.src="b lah blah" for each and every item.

Both are excessive.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Randy Webb]

Richard wrote:

On Sat, 29 Jan 2005 16:27:54 GMT Michael Winter wrote:

On Sat, 29 Jan 2005 09:45:17 -0600, Richard <An*******@127. 001> wrote:

I've been looking at implementing switch/case on my photo gallery.

Why? Do you really want to write a case clause for every single image
in
the gallery?

[snip]

Would it not be easier than writing a swap routine for each and every image?

No. The easiest way would be a function that accepts generic parameters
and acts upon those parameters. Of course, to write such a function
requires at least a minimum understanding of scripting.
As I see it, that's the purpose of switch/case.
No, the above mentioned use is not the purpose of switch/case
A simpler way of writing if/then.
Yes.
I would much rather write onclick="dothis ()" then
onclick="docume nt.image.src="b lah blah" for each and every item.

onclick="doThis ('imageName','d iv Text');return false"

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq

[Richard]

On Sat, 29 Jan 2005 18:09:53 GMT Mick White wrote:

Richard wrote:

I've been looking at implementing switch/case on my photo gallery.
Most of the sites I've seen so far, only show the bare basics.
With no real practical examples.
As brucie does with his butterlies and bugs, he uses switch/case, but
in
php.

The "switch/case" construct is the method of last resort, imho.
Mick

I feel that in my situation, I may have to.
It beats writing out a long string of "if" statements.
Which it is actually designed for as an alternative to "if".
Besides, I can follow the "case" elements easier.

[McKirahan]

"Richard" <An*******@127. 001> wrote in message
news:ct******** *@news2.newsguy .com...

On Sat, 29 Jan 2005 18:09:53 GMT Mick White wrote:

Richard wrote:

I've been looking at implementing switch/case on my photo gallery.
Most of the sites I've seen so far, only show the bare basics.
With no real practical examples.
As brucie does with his butterlies and bugs, he uses switch/case, but
in
php.

The "switch/case" construct is the method of last resort, imho.
Mick

I feel that in my situation, I may have to.
It beats writing out a long string of "if" statements.
Which it is actually designed for as an alternative to "if".
Besides, I can follow the "case" elements easier.

Tell us what you're working with so we can be of more help.

Do you have a list of URLs for the thumbnail images and corresponding URLs
for the enlarged versions plus a description of each?

For example,

http://www.google.com/images/google_sm.gif
http://www.google.com/images/logo.gif
Google.Logo

[Richard]

On Sat, 29 Jan 2005 13:13:25 -0600 McKirahan wrote:

"Richard" <An*******@127. 001> wrote in message
news:ct******** *@news2.newsguy .com...

On Sat, 29 Jan 2005 18:09:53 GMT Mick White wrote:

> Richard wrote: >> I've been looking at implementing switch/case on my photo gallery.
>> Most of the sites I've seen so far, only show the bare basics.
>> With no real practical examples.
>> As brucie does with his butterlies and bugs, he uses switch/case, but

>> in
>> php.

> The "switch/case" construct is the method of last resort, imho.
> Mick

I feel that in my situation, I may have to.
It beats writing out a long string of "if" statements.
Which it is actually designed for as an alternative to "if".
Besides, I can follow the "case" elements easier.

Tell us what you're working with so we can be of more help. Do you have a list of URLs for the thumbnail images and corresponding
URLs
for the enlarged versions plus a description of each? For example, http://www.google.com/images/google_sm.gif
http://www.google.com/images/logo.gif
Google.Logo

www.somestuff.batcave.net/menu1.html

[Robert]

In article <ct*********@ne ws2.newsguy.com >,
"Richard" <An*******@127. 001> wrote:

www.somestuff.batcave.net/menu1.html
Here is a possibility.

The code may be a little hard to follow because it uses document.write
to generate the html. I did this because I got tired of typing out all
the long web addresses. To see the generated html, look for the term
one liner in this forum. The one line javascript program will show you
the generated html.

Some of the url's are long. Hope they come out.

Robert

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Swap images</title>
<style type="text/css">

#footer{
clear: both;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
background: #eee;
}

..hide { display: none }

</style>

<script type="text/javascript">
var nasaPath = "http://spaceplace.nasa .gov" +
"/en/educators/images/solarsystem/";

var imageCount = 0;

/* I am using NASA images.
The thumbs have the suffix _T
The full size image has the suffix _L

I pass the image name without the path and the suffix.

To indicate the first call, I pass three arguements. In
the first call, I do not generate the tr tags.

*/

function genImage(link,r ollover,msg)
{
// The first row has the full size image, so the
// tr tag is coded below.

// For the second image and all further images, code
// the tr tags.
if (arguments.leng th == 3)
{ document.writel n("<tr>");}

var data = "<td width='110' valign='top'>" +
"<a href='" + nasaPath + link + "_L.jpg'>\n " +
"<img id='image" + imageCount + "'" +
"src='" + nasaPath + link + "_T.jpg'\n" +
"onclick='retur n changeImg(\"" +
nasaPath + link + "_L.jpg\",\ "" + msg + "\");'\n" +
"onmouseover='s etThumb(\"image " + imageCount +
"\",\"" + nasaPath + rollover + "_T.jpg\")' \n" +
"onmouseout='se tThumb(\"image" + imageCount +
"\",\"" + nasaPath + link + "_T.jpg\")' \n" +
">\n" +
"<\/a></td>";
imageCount++
document.writel n(data);

// End tr tag
if (arguments.leng ht == 3)
{ document.writel n("<\/tr>");}

}

function changeImg(name, msg)
{

document.images["big_image"].src =

"http://spaceplace.jpl. nasa.gov/en/_images/common/nasa_header/logo_nasa.g
if";
document.images["big_image"].src = name;
changeText('tex t',msg);
return false;
}

function setThumb(id,nam e)
{
document.images[id].src = name;
}

function changeText(labe l,text)
{

var node;
if (document.getEl ementById)
{
var node = document.getEle mentById(label) ;
if (node)
{

node.innerHTML = text;
return; /*See if we already inserted a node. */

}
else
{
alert("You need to create a span tag with " +

"the id of " + label + ".");
return;
}
}
else
{
alert(" document.getEle mentByID failed. " +
"You need to use a newer browser.");
return;
}

}

</script>
</head>
<body>
<h1 style="text-align: center;">Solar System</h1>
<table>
<tr>
<script type="text/javascript">
genImage("Mercu ryglobe1","Merc uryglobe2","Pla net Mercury","first ");

</script> <td width="600" height="800" align="center" valign="top"
rowspan="7">
<img id="big_image"
src="
http://spaceplace.jpl.nasa.gov/en/_i...r/logo_nasa.gi
f"

<br><span id='text'>Repla cement text here...</span>
</td>
</tr>

<script type="text/javascript">
genImage("Venus ","venusglobe", "Planet Venus");
genImage("clem_ full_moon","Ear th_moon","Earth 's moon");
</script> </table>
<div id="footer">
<p>These image are from NASA. See:<br>
http://spaceplace.jpl.nasa.gov/en/ed...s_images.shtml
</p>
</div>

<script type="text/javascript">
// Preload the rollover images.
var selimage = new Image();
selimage.src = nasaPath + "Mercuryglobe2_ T.jpg";
var selimage = new Image();
selimage.src = nasaPath + "venusglobe_T.j pg";
var selimage = new Image();
selimage.src = nasaPath + "Earth_moon_T.j pg";
var selimage = new Image();
selimage.src = nasaPath + "marsglobe3_T.j pg";

</script>

</body>
</html>