ok, I know that the title didnt quite make much sense. But this is what I am trying to do::
on my website I have a column of pictures to the left hand side (thumbnails) and I am interested in them being either clicked or being a rollover. The rollover of this image or clicking onto the image should go into the center column. I just can't seem to figure out how to accomplish this.
here is my code as it stands::
default.php::
<?php
include ('menu-head.inc.php');
include ('includes/connect.php');
?>
</head>
<body>
<div id="outer">
<div id="logo" style="position:absolute; left:15px; top:10px; width:125px; height:75px; z-index:6">
<img src="<?php echo 'http://' . $_SERVER['HTTP_HOST'] . '/images/draft-tools.jpg';?>" alt="logo"></img>
</div>
<div id="banner" style="position:absolute; left:150px; top:25px; width:590px; height:75px; z-index:1">
<center>
<a href="<?php echo 'http://' . $_SERVER['HTTP_HOST'] ;?>">
<img src="./images/banner.gif" width="325" height="60" border="0" alt="banner"></img>
</a>
</center>
</div>
<div id="search" style="position:absolute; left:750px; top:25px; width:200px; height:75px; z-index:8">
<?php
include('searchsite.php');
?>
</div>
<div id="menu" style="position:absolute; left:150px; top:95px; width:590px; height:60px; z-index:10">
<?php
include('menu-body.inc.php');
?>
</div>
<div id="page" style="position:absolute; left:150px; top:165px; width:590px; height:55px; z-index:5">
<?php
include('page.inc.php');
?>
</div>
<div id="left" style="position:absolute; left:15px; top:165px; width:125px; height:420px; z-index:4">
<?php
if($namepage == "Home")
{
include_once('leftlinks.php');
}
else
{
include_once('leftcontent.php');
}
?>
</div>
<div id="right" style="position:absolute; left:750px; top:165px; width:200px; height:420px; z-index:3">
<?php
if($namepage == "Home")
{
include_once('updates.php');
}
else
{
include_once('quotes.php');
}
?>
</div>
<div id="cr" style="position:absolute; left:750px; top:575px; width:200px; height:10px; z-index:7">
<?php
echo '© 2004-' . date('Y') . ' domain.com';
?>
</div>
<div id="site" style="position:absolute; left:15px; top:575px; width:100px; height:10px; z-index:9">
<a href="site">Site Map</a>
</div>
</div>
</body>
</html>
leftcontent.php:
<?php
$picd = "'%image%'";
include('connect.php');
echo '<table border="0" cellspacing="0" cellpadding="10" align="center">';
// Database Connection
// If current page number, use it
// if not, set one!
if(!isset($_GET['page'])){
$page = 1;
} else {
$page = $_GET['page'];
}
// Define the number of results per page
$max_results = 4;
// Figure out the limit for the query based
// on the current page number.
$from = (($page * $max_results) - $max_results);
// Perform MySQL query on only the current page number's results
$numcols = 1;
$numcolsprinted = 0;
function imageResize($width, $height, $target) {
if ($width > $height) {
$percentage = ($target / $width);
} else {
$percentage = ($target / $height);
}
//gets the new value and applies the percentage, then rounds the value
$width = round($width * $percentage);
$height = round($height * $percentage);
return "width=\"$width\" height=\"$height\"";
}
$sql = mysql_query("SELECT picurl, picname, pictitle, picdescription FROM portpics WHERE picdescription LIKE $picd LIMIT $from, $max_results");
while($row = mysql_fetch_array($sql)) {
if ($numcolsprinted == $numcols) {
echo "</tr><tr>";
$numcolsprinted = 0;
}
$mysock = getimagesize($row['picurl']);
echo '<td><font face="tahoma" size="2"><a href="'.$row['picurl'].'" border="0" title="Click to get an enlarged image">
<img src="'.$row['picurl'].'" '.imageResize($mysock[0], $mysock[1], 75).' border="0"></a>'.$row['pictitle'].'<br></font></td>';
$numcolsprinted++;
}
$colstobalance = $numcols - $numcolsprinted;
for ($i=1; $i<=$colstobalance; $i++) {
}
echo '</table>';
?>
Im looking at trying to get the leftcontent.php images to be shown full size in the div="page". As it is, the image just goes to full size on a new page (I do not want my users to have to use the back button or have a popup) I would like to have them see the thumbnail from the left side of the page to a full size image in the center of the page with everything left the same on the page.
Bookmarks