vmicchia Posted June 9, 2010 Share Posted June 9, 2010 Hey there I'm putting together this page to make furniture selections. At the moment I'm trying to get it so that when you click on an Image from the selections it appears in the larger box. It's done in php and js and I think my problem is with the js. here's the code I have. <?php session_start(); include("includes/openDbConn.php"); $sql = "SELECT cushionName FROM cushions LIMIT 1"; $result = mysql_query($sql); $numRows = mysql_fetch_array($result); $record = trim($numRows["cushionName"]); //echo $record; if(empty($_SESSION["selectedCushion"])){ $_SESSION["selectedCushion"] = $record; } include("includes/closeDbConn.php"); ?> <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- .style1 {color: #F0F0F0} --> </style> <script type="text/javascript"></script> </head> <body> <div id="outerContainer" style="border:thick; border-color:#000000"> <div id="imageContainer" style="width:500px; border:dashed; float:left;"> <?php include("includes/openDbConn.php"); $sql = "SELECT cushionName, cushionDescription, cushionPrice, cushionImagePath, imageHeight, imageWidth FROM cushions WHERE cushionName = '".$_SESSION["selectedCushion"]."'"; $result = mysql_query($sql); $pic = mysql_fetch_array($result); //echo trim($pic["cushionName"]); echo "<img src='".trim($pic["cushionImagePath"])."' height='200' width='300' alt='".trim($pic["cushionDescription"])."' id='largeImage' />"; //"<img src='".trim($pic["cushionImagePath"])."' height='".trim($pic["imageHeight"])."' width='".trim($pic["imageWidth"])."' alt='".trim($pic["cushionDescription"])."' />"; include("includes/closeDbConn.php"); ?> <!-- <img src="images/glassbox.gif" alt="glassbox" width="445" height="480" /> --> </div> <div id="formContainer" style="float:left; width:500px;position:relative; overflow:auto; border:dotted;"> <?php include("includes/openDbConn.php"); $sql="SELECT cushionName, cushionDescription, cushionPrice, cushionImagePath FROM cushions"; //echo $sql; $result = mysql_query($sql); //echo $result; //echo "This works"; if($result == 0){ $num_results = 0; //echo "Past If"; }else{ //echo "Past else"; //echo $num_results; $num_results = mysql_num_rows($result); } for($i = 0; $i < $num_results; $i++){ $row = mysql_fetch_array($result); ?> <script type="text/javascript"><a href='javascript:void(0)' target='_blank' onclick="document.getElementById('largeImage').src='img1.j pg'" ></script><img src="<?php echo trim($row["cushionImagePath"]); ?>" height="" width="" alt="<?php echo trim($row["cushionDescription"]); ?>"/></a> <br /> <h3> <?php echo trim($row["cushionName"]); } include("includes/closeDbConn.php"); ?> </h3> </div> <div id="selection" style="float:left; width:200px; border:double;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet elit enim, vitae vestibulum elit. Aliquam at dolor elit. Donec pharetra augue id quam hendrerit et viverra eros porttitor. Aliquam consectetur augue et risus vulputate sit amet rutrum elit consequat. Nunc nibh sem, mattis auctor malesuada a, ullamcorper at mi. Donec quis tortor justo, vitae tristique metus. Cras eu urna tellus. Sed a massa nec dui sodales laoreet. Quisque nec nulla id felis iaculis dictum. Suspendisse ullamcorper volutpat pharetra. Phasellus semper orci non lorem tempus feugiat sollicitudin dui commodo. Vestibulum at dui nec sem tincidunt convallis. Pellentesque elit nisl, rutrum a mollis eu, volutpat ac nisl. Phasellus imperdiet porttitor laoreet. Cras massa elit, consectetur adipiscing ornare nec, euismod eget ipsum. Sed non leo enim. Donec faucibus justo et risus vehicula pellentesque. Vestibulum ipsum mi, adipiscing at feugiat sit amet, luctus vel neque. </p> </div> </div> </body> </html> This is the html that code generates. <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- .style1 {color: #F0F0F0} --> </style> <script type="text/javascript"></script> </head> <body> <div id="outerContainer" style="border:thick; border-color:#000000"> <div id="imageContainer" style="width:500px; border:dashed; float:left;"> <img src='images/BBC2039.gif' height='200' width='300' alt='This is a cushion with 2 sections and buttons' id='largeImage' /><!-- <img src="images/glassbox.gif" alt="glassbox" width="445" height="480" /> --> </div> <div id="formContainer" style="float:left; width:500px;position:relative; overflow:auto; border:dotted;"> <script type="text/javascript"><a href='javascript:void(0)' target='_blank' onclick="document.getElementById('largeImage').src='img1.j pg'" ></script><img src="images/BBC2039.gif" height="" width="" alt="This is a cushion with 2 sections and buttons"/></a> <br /> <h3> Boxed Chair Cushion <script type="text/javascript"><a href='javascript:void(0)' target='_blank' onclick="document.getElementById('largeImage').src='img1.j pg'" ></script><img src="images/BBC2244.gif" height="" width="" alt="Chaise Lounge cushion with buttons"/></a> <br /> <h3> Boxed Chaise Lounge Cushion <script type="text/javascript"><a href='javascript:void(0)' target='_blank' onclick="document.getElementById('largeImage').src='img1.j pg'" ></script><img src="images/BBC2248.gif" height="" width="" alt="Dining Chair Cushion with buttons"/></a> <br /> <h3> Boxed Dining Chair Cushion <script type="text/javascript"><a href='javascript:void(0)' target='_blank' onclick="document.getElementById('largeImage').src='img1.j pg'" ></script><img src="images/BBL2373.gif" height="" width="" alt="Lounge Chair cushion with buttons"/></a> <br /> <h3> Boxed Highback Lounge Chair Cushion</h3> </div> <div id="selection" style="float:left; width:200px; border:double;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet elit enim, vitae vestibulum elit. Aliquam at dolor elit. Donec pharetra augue id quam hendrerit et viverra eros porttitor. Aliquam consectetur augue et risus vulputate sit amet rutrum elit consequat. Nunc nibh sem, mattis auctor malesuada a, ullamcorper at mi. Donec quis tortor justo, vitae tristique metus. Cras eu urna tellus. Sed a massa nec dui sodales laoreet. Quisque nec nulla id felis iaculis dictum. Suspendisse ullamcorper volutpat pharetra. Phasellus semper orci non lorem tempus feugiat sollicitudin dui commodo. Vestibulum at dui nec sem tincidunt convallis. Pellentesque elit nisl, rutrum a mollis eu, volutpat ac nisl. Phasellus imperdiet porttitor laoreet. Cras massa elit, consectetur adipiscing ornare nec, euismod eget ipsum. Sed non leo enim. Donec faucibus justo et risus vehicula pellentesque. Vestibulum ipsum mi, adipiscing at feugiat sit amet, luctus vel neque. </p> </div> </div> </body> </html> Any help would be much appreciated. Also any suggestions on how to make the larger image part of a form to submit a value to the next page would be great as well with that being my next step. Thanks. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.