ok, I had posted in the html forum and was told to look in javascript for what it was that I wanted. Yet, I happened to come across paul O'B's disjointed rollover. (CSS) where I happened to post my problem again, but after thinking about this issue...I thought it might deal with more of a php issue calling my images from the database and putting it together with the css code.

The question I have is...does anyone know how to incorporate that with my code (php calling images from my database)? Or do I need to look into the php forum for the answer to it?

The reason why Im looking to incorporate this is that I have many images and am not able to do multiple img src tags- its easier just to call the images from the database and have it limited to 4 images per my page.


here is the coding::
the coding can be found here

or here::


default.php::

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

Code:
<?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>';

?>
paul's rollover::
Code:
Quote:
<!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>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
span {
display:none;
}
a:hover {
color: #666666;
background: #FFFFCC;
text-decoration: none;
}
#imagecontainer {
position:absolute;
left:200px;
top:100px;
width:155px;
height:102px;
border:1px solid #000;
}
a:hover span {
display:block;
position:absolute;
left:200px;
top:100px;
width:155px;
height:102px;
border:1px solid #000;
text-align:center;
}

</style>
</head>
<body>
<p><a href="#"><img src="images/pmoblogoi.jpg" alt="thumbnail image" width="30" height="30" />
<span><img src="images/pmoblogoi.jpg" alt="thumbnail image" width="155" height="102" /></span></a></p>
<p><a href="#"><img src="images/pmoblogo8.jpg" alt="thumbnail image etc" width="30" height="30" />
<span><img src="images/pmoblogo8.jpg" alt="thumbnail image etc" width="155" height="102" /></span></a></p>
<p><a href="#"><img src="images/pmoblogoc.jpg" alt="Thumnail image" width="30" height="30" />
<span><img src="images/pmoblogoc.jpg" alt="Thumnail image" width="155" height="102" /></span></a></p>
<p>&nbsp;</p>

<div id="imagecontainer"></div>
</body>
</html>




also:: how can I keep the image up until the person rollsover the next image (rather than turning the image blank)?