Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Case/Switch image-- is it possible?

    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

    PHP 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="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.

    Code:
    <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>

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,744
    Thanks
    18
    Thanked 155 Times in 146 Posts
    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:
    PHP 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 JWilliams</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...
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #3
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,744
    Thanks
    18
    Thanked 155 Times in 146 Posts
    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...

    PHP 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 JWilliams</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> 
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •