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]

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

 

[Richard]

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="document.image.src="blah blah" for each and every item.

 

[Mick White]

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

 

[Michael Winter]

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="document.image.src="blah blah" for each and every item.

Both are excessive.

Mike

 

[Richard]

Richard wrote:


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.

 

[Randy Webb]

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="document.image.src="blah blah" for each and every item.

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

 

[McKirahan]

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]

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]

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,rollover,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.length == 3)
{ document.writeln("<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='return changeImg(\"" +
nasaPath + link + "_L.jpg\",\"" + msg + "\");'\n" +
"onmouseover='setThumb(\"image" + imageCount +
"\",\"" + nasaPath + rollover + "_T.jpg\")'\n" +
"onmouseout='setThumb(\"image" + imageCount +
"\",\"" + nasaPath + link + "_T.jpg\")'\n" +
">\n" +
"<\/a></td>";
imageCount++
document.writeln(data);

// End tr tag
if (arguments.lenght == 3)
{ document.writeln("<\/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('text',msg);
return false;
}

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

function changeText(label,text)
{

var node;
if (document.getElementById)
{
var node = document.getElementById(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.getElementByID 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("Mercuryglobe1","Mercuryglobe2","Planet 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/_images/common/nasa_header/logo_nasa.gi
f"<br><span id='text'>Replacement text here...</span>
</td>
</tr>

<script type="text/javascript">
genImage("Venus","venusglobe","Planet Venus");
genImage("clem_full_moon","Earth_moon","Earth's moon");
</script> </table>
<div id="footer">
<p>These image are from NASA. See:<br>
http://spaceplace.jpl.nasa.gov/en/educators/teachers_ss_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.jpg";
var selimage = new Image();
selimage.src = nasaPath + "Earth_moon_T.jpg";
var selimage = new Image();
selimage.src = nasaPath + "marsglobe3_T.jpg";

</script>

</body>
</html>

 

[Richard]

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.

Thanks. Precisely what I do not want.
That's a bunch of needless work for what there is to do.
Why have a script write a table to begin with?
Use the script for what's inside the table.
IMNSHO, all of that work for the nasa site was wasted.
With JS off, it works just the same.

In my case, I need the image and description appearing below the thumbnails.
Outisde of an array probability, switch/case should be the answer.

 

[Randy Webb]

Thanks. Precisely what I do not want.
That's a bunch of needless work for what there is to do.
Why have a script write a table to begin with?
Use the script for what's inside the table.
IMNSHO, all of that work for the nasa site was wasted.
With JS off, it works just the same.

In my case, I need the image and description appearing below the thumbnails.
Outisde of an array probability, switch/case should be the answer.

Neither is the answer. Not an array (unless the images/thumbnails are
not named coordinatedly). Read my other replies, it might come to you.

But to use a switch/case for what you want is like using a sledgehammer
to put a screw in the wall.

 

[Robert]

You seem reluctant to go with people suggestions.

I used the table for formating reasons. I do not know the size of the
big picture. The table control acted the best when I had large and
small images, and when I resized the window. I tried using CSS and I
didn't like the results. When I resized the window to a small one, the
big image appeared below the small thumbs. I didn't like this. I have
another version with frames.

With JS off, it works just the same.

You sure you turned off javascript?

Mine is an example that should provide some clues how to do what you
want.

We need some more information on why you think a switch statement is
best.

Robert

 

[Robert]

Well, my web addresses got wrapped by my news reader program. I
usually use google, but it would have destroyed the formatting.

Robert