...

View Full Version : Case/Switch image-- is it possible?



ajwart
08-28-2006, 05:21 AM
I'm trying to do what I THOUGHT would be a simple procedure: When a user clicks on a thumbnail image in div#2 (cats) I want it to load full-sized in div#1 (dogs)

I tried using a method similar to what I had done for the pages of my navigational menu, which was to case/switch for each link. It works perfectly in that situation, but when I apply the same principle to my images, nothing happens. I'll click a link and the page will reload, but that's about it.

I'm desperate at this point, because I'll be heading back to college shortly and since this is going to be my gallery site I want it nice and functional so I can reference it on business cards, emails, etc. If anyone has any idea on how to fix this problem, I'd be forever in your debt. And yes, I did search the forum and the only poster I could find with a similar problem was a girl from years ago who never managed to get it solved. Hopefully I'll be luckier than her. ^_^

Here's the code for my main page with the div and include code on it. Also, a link to my test page so you can see the problem in action: http://angwat.freehostia.com


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Art of Ashlee J. Williams</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src='java.js' type='text/javascript'></script>
</head>

<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">

<div id="dogs">
<?php
if (!isset($_GET['page'])) $page= 'default'; else $page= $_GET['page'];
switch($page)
{
case 'resume':include ('resume.html');break;
case 'contact':include ('contact.html');break;
case 'main':include ('main.php');break;
default:
echo
"<p>Welcome to AJWart.com! My name is Ashlee; I'm a Savannah College of Art and Design sophomore who is seeking freelance work in illustration. I'm also open for commisions, so feel free to contact me in regards to that. Thank you for stopping by.</p>";break;
}
?>

<?php switch($_GET['$id'])
{
case "nakedlady1":
echo ('images/nakedlady1.png');
echo "My final for Figure Drawing I.";
break;
case "theodin":
echo ('images/theodin.png');
echo "Done for Conceptart.org's CH.O.W. #23";
break;
case "mwar":
echo ('images/mwar.png');
echo "Portfolio piece.";
break;
case "lifedrawing":
echo ('images/figure1.png');
echo "Done for Figure Drawing.";
break;
case "chickgirl":
echo ('images/chickgirl.png');
echo "Inspired by a dress at our school fashion show.";
;break;
}
?>

</div>


<div id="cats">

<?php
if (!isset($_GET['page'])) $page= 'illustration'; else $page= $_GET['page'];
switch($page)
{
case 'illustration':include ('illustration.html');break;
case 'sketches':include ('sketches.html');break;
default:
echo
"Navigate for thumbnails.";break;
}
?>

</div>


<?php
include("footer.html");
?>
</body>
</html>

Here's the code for the illustration page, the only one coded to work at the moment. I wasn't going to waste time coding the sketches page when the first one wasn't working.


<a href="?id=nakedlady1"><img src="images/nakedladythumb.gif" width="34" height="34" alt="Life Drawing Final" border="0" /></a>

<a href="?id=theodin"><img src="images/theodinthumb.gif" width="34" height="34" alt="C.O.W. #23" border="0" /></a>

<a href="?id=mwar"><img src="images/mwarthumb.gif" alt="The Morrigan at War" width="34" height="34" border="0" /></a>

chump2877
08-28-2006, 07:59 AM
I'm trying to do what I THOUGHT would be a simple procedure: When a user clicks on a thumbnail image in div#2 (cats) I want it to load full-sized in div#1 (dogs)

To do this, just use a little bit of javascript...here's a segment of the revised source code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Art of Ashlee J. Williams</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link rel="stylesheet" href="http://angwat.freehostia.com/style.css" type="text/css" />
<script src='java.js' type='text/javascript'></script>
<script type="text/javascript">
<!--

function showPic(image)
{
document.getElementById('pic').innerHTML = "<img src='http://angwat.freehostia.com/images/"+image+"' />";
}

-->
</script>
</head>

<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">

<div id="dogs">
<div id="pic"></div>
<p>Welcome to AJWart.com! My name is Ashlee; I'm a Savannah College of Art and Design sophomore who is seeking freelance work in illustration. I'm also open for commisions, so feel free to contact me in regards to that. Thank you for stopping by.</p>
</div>

<div id="cats">
<a href="javascript: showPic('nakedlady1.png');"><img src="http://angwat.freehostia.com/images/nakedladythumb.gif" width="34" height="34" alt="Life Drawing Pose" border="0" /></a>

<a href="javascript: showPic('theodin.png');"><img src="http://angwat.freehostia.com/images/theodinthumb.gif" width="34" height="34" alt="C.O.W. #23" border="0" /></a>

<a href="javascript: showPic('mwar.png');"><img src="http://angwat.freehostia.com/images/mwarthumb.gif" alt="The Morrigan at War" width="34" height="34" border="0" /></a>

</div>

The thumbnail on the far left doesn;t work right, but I assume that has to do with the image I am trying to load...

ajwart
08-28-2006, 08:17 PM
It works like a dream! Thanks a lot, this problem was really driving me nuts!

Yeah, I think the first image is too big for the div, hence the reason it's not appearing. Though that would be peculiar, since I have my main div set to scroll. Hm...*goes to fiddle with it.*

Now I just have to figure out a way to load decriptions for each image at the same time the image loads. That'll be another good week of frustration, I'm sure.

ajwart
08-28-2006, 08:20 PM
It works like a dream! Thanks a lot, this problem was really driving me nuts!

I think the image linked to the first thumbnail might be too big for the div, hence the reason it won't appear. Although it's still a bit peculiar, considering I have the div layer set to scroll...hm...*goes to fiddle with it.*

Now I just have to figure out a way to get descriptions for each image to load at the same time the image does. I think I'm supposed to use arrays or some such thing, but this site has been my first time using php ever, not to mention my first time using HTML in years, so I'm sure that trick will lead me to another week of frustration.

chump2877
08-29-2006, 02:53 AM
Now I just have to figure out a way to get descriptions for each image to load at the same time the image does. I think I'm supposed to use arrays or some such thing, but this site has been my first time using php ever, not to mention my first time using HTML in years, so I'm sure that trick will lead me to another week of frustration.

Adding descriptions is just one extra (small) step...you'll need to straighten out your CSS though, there's too much space in there...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Art of Ashlee J. Williams</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link rel="stylesheet" href="http://angwat.freehostia.com/style.css" type="text/css" />
<style type="text/css">
<!--

#dogs
{
width:700px;
overflow:scroll;
}

-->
</style>
<script src='java.js' type='text/javascript'></script>
<script type="text/javascript">
<!--

var description = new Array();
description[0] = 'This is the first description.';
description[1] = 'This is the second description.';
description[2] = 'This is the third description.';

function showPic(image,num)
{
document.getElementById('pic').innerHTML = "<img src='http://angwat.freehostia.com/images/"+image+"' /><p style='text-align:center;margin:0'>"+description[num]+"</p>";
}

-->
</script>
</head>

<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">


<div id="dogs">
<div id="pic"></div>
<p>Welcome to AJWart.com! My name is Ashlee; I'm a Savannah College of Art and Design sophomore who is seeking freelance work in illustration. I'm also open for commisions, so feel free to contact me in regards to that. Thank you for stopping by.</p>
</div>

<div id="cats">
<a href="javascript: showPic('nakedlady1.png',0);"><img src="http://angwat.freehostia.com/images/nakedladythumb.gif" width="34" height="34" alt="Life Drawing Pose" border="0" /></a>

<a href="javascript: showPic('theodin.png',1);"><img src="http://angwat.freehostia.com/images/theodinthumb.gif" width="34" height="34" alt="C.O.W. #23" border="0" /></a>

<a href="javascript: showPic('mwar.png',2);"><img src="http://angwat.freehostia.com/images/mwarthumb.gif" alt="The Morrigan at War" width="34" height="34" border="0" /></a>

</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum