I WANT TO SHOW IMAGE IN ANOTHER PAGE WITH DETAILS FROM MYSQL DATABASE... PLEASE HELP...I AM TRYING TO MAKE PROJECT....I AM ABLE TO SHOW DETAILS BUT NOT IMAGE ...HERE IS MY CODE HEADER.PHP <!doctype html> <html> <head> <style> div.container { width: 90%; padding: 50px; float: left; border: 1px solid black; } #header { color: white; text-align: center; padding-top: 10px; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; } #footer { background-color: black; color: white; clear: both; text-align: center; padding: 5px; } #images_hz { width: 960px; height: auto; overflow: hidden; } #images_hz img { display: inline; margin: 0 10px; } #container img { width: 100%; } .products { background-image: url("images/1.jpg"); background-position: center; background-repeat: no-repeat; width: 306px; height: 231px; border: 1px solid red; padding:2px; margin-right: 50px; margin-bottom: 50px; float: left; } .zoom { display: none; background-image: url("images/background.jpg"); background-position: center; background-repeat: no-repeat; width: 406px; height: 336px; border: 1px solid black; padding:2px; margin-right: 50px; margin-bottom: 50px; overflow:hidden; float: left; } .thumb { display: block; background-image: url("images/background.jpg"); background-position: center; background-repeat: no-repeat; width: 406px; height: 336px; border: 3px dashed black; padding:2px; margin-right: 50px; margin-bottom: 50px; float: left;} .text { float: left; padding-left: 20px;} </style> <script type="text/JavaScript"> function PicZoom(id) { pic = document.getElementById(id); thum = document.getElementById("T"+id); if ((pic.style.display == "") || (pic.style.display == "none")) { pic.style.display = "block"; thum.style.display = "none"; } else { pic.style.display = "none"; thum.style.display = "block"; } } </script> </head> <body> <div id="header" align="center"> <img src="images/banner.jpg" width="auto" height="224" alt=""/></div><br /> <?php require_once("db_connect.php"); $query="select * from `DETAILS` where ITEM_TYPE='Tshirt';"; $result=mysqli_query($link,$query)or die("Error: " . mysqli_error($link)); if($result) { echo '<div class="container">'; while($row=mysqli_fetch_assoc($result)) { $id=$row['ITEM_ID']; $idpic="T" . $id; echo "<form method=\"post\" action=\"sbmtbook.php\">"; echo "<div id=\"{$id}\" class='zoom' onMouseOut=\"PicZoom({$id});\"> <input type=\"image\" src=\"images/${id}.jpg\" width=\"500\" height=\"400\" /></div> <div id=\"{$idpic}\" class='thumb' onMouseOver=\"PicZoom({$id});\"> <input type=\"image\" src=\"images/${id}.jpg\" width=\"400\" height=\"300\" /></div> <input name=\"productID\" type=\"hidden\" id=\"productID\" value=\"{$id}\" > </form>"; } echo '</div>'; } ?> <br /> <div id="footer"> Copyright [USER=7501]@sandeep[/USER] </div> </body> </html> PHP: SBMTBOOK.PHP <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> container { width: 90%; padding: 50px; float: left; border: 1px solid black; } table { border-collapse: collapse; } table, td, th { border: 1px solid black; } th ,td { text-align: center; } </style> </head> <body><div id="container"></div> <table border="0px" align="center" backgroung bgcolor="" width="500px"> <tr> <th>NAME</th> <th>COLOUR</th> <th>SIZE</th> <th>FOR</th> <th>ABOUT THIS</th> <th>₹</th> <tr> <?php include 'banner.php'; $proid=$_POST['productID']; require_once("db_connect.php"); $query="select * from `DETAILS` where ITEM_ID='$proid';"; $result=mysqli_query($link,$query)or die("Error: " . mysqli_error($link)); if($result) { while($row=mysqli_fetch_assoc($result)) { echo"<img src='$proid' border=0px;>"; echo"<tr>"; echo "<td>".$row['ITEM_NAME']."</td>"; echo "<td>".$row['ITEM_COLOUR']."</td>"; echo "<td>".$row['ITEM_SIZE']."</td>"; echo "<td>".$row['ITEM_FOR']."</td>"; echo "<td>".$row['ITEM_DESCRIPTION']."</td>"; echo "<td>".$row['ITEM_PRICE']."</td>"; echo"</tr>"; } } ?> </tbody> </table> <?php include 'footer.php' ;?> </body> </html> PHP:
Well if the image is content, might help if you had a IMG tag, but really it's hard to say from that non-formatted mess that to be frank, is a laundry list of how NOT to write PHP. Variables for nothing, multiple echo doing single echo's job, string additions instead of delimits, double quotes and escapes doing single quote's job... endlessly opening and closing PHP for no good reason... (I still say they need to remove <?php and ?> from the language), get your blasted CSS out of the markup, have your scripting attach the markup instead of the stupid "onevent" attributes that have no business on any website written after 1998, etc, etc... Even your SQL is a bit banjaxed, since it's sloppy to use uppercase characters in table or field names since some backup software can mangle it to lower case breaking your program, hence why usually people make the SQL statements be uppercase and names/labels be lower. Though honestly, biggest thing I'm wondering is why in blazes you're using scripting for this, much less why you have the images inside a form when it's obviously not submitting anyplace?
OK, I'm confused lets start with code like this echo "<form method=\"post\" action=\"sbmtbook.php\">"; PHP: You don't need to use the double quotes unless you need PHP to do something inside the string - ie parse a variable so to make this readable and safe it should be either echo '<form method="post" action="sbmtbook.php">'; PHP: or echo "<form method='post' action='sbmtbook.php'>"; PHP: or you could even mess with @deathshadow and escape from PHP and then hop back in ?><form method="post" action="sbmtbook.php"><?php PHP: Now, from your code it appears that you aren't actually storing the image in the database, but you are storing the name. This bit makes no sense echo "<div id=\"{$id}\" class='zoom' onMouseOut=\"PicZoom({$id});\"> <input type=\"image\" src=\"images/${id}.jpg\" width=\"500\" height=\"400\" /></div> <div id=\"{$idpic}\" class='thumb' onMouseOver=\"PicZoom({$id});\"> <input type=\"image\" src=\"images/${id}.jpg\" width=\"400\" height=\"300\" /></div> <input name=\"productID\" type=\"hidden\" id=\"productID\" value=\"{$id}\" > PHP: an initial cleanup gives you echo "<div id='{$id}' class='zoom' onMouseOut='PicZoom({$id});'> <input type='image' src='images/{$id}.jpg' width='500' height='400' /></div> <div id='{$idpic}' class='thumb' onMouseOver='PicZoom({$id});'> <input type='image' src='images/{$id}.jpg' width='400' height='300' /></div> <input name='productID' type='hidden' id='productID' value='{$id}' > PHP: and important change is going from src='images/${id}.jpg' to src='images/{$id}.jpg' but the question remains about the use of input instead of img
I'm still trying to figure out what the **** it's using scripting for since both IMG tags are the same file, much less the form without a submit for.. uhm... Christmas only knows what. Seems like a lot of effort for: echo '<img src="images/', $id, '.jpg" alt="DESCRIBE THIS!!!" class="thumbHover">'; .thumbHover { width:400px; height:300px; } .thumbHover:hover { width:500px; height:400px; } Code (markup): NO form for nothing, no multiple images, no pointless wrapping elements, no goofy escaping of quotes... As I often say, 99.99% of the time people use the onevent attributes in the markup, they really shouldn't as it's either CSS' job or should be hooked from the script. Hence why I still say they should be removed from HTML entirely.