I am trying to do a disjointed rollover on a website. The idea is that when
you click on a thumb that is generated in php and mysql, the css loads the
large image in another div that is initially hidden.

Now I can get the picture frame to appear but am having trouble with the
image. I am using 2 recordsets, one just to show the thumbs and the other for
the swap image acivity. If in the second case i set the parameter to be
id_buscapimg=url parameter=id_buscapimg, I get no image.

I hope somebody can help because I really do not want to do pop_ups on this
site.

Many thanks

Sean Ollett

The relevant code is below including the javascript that goes with this idea:

<?php require_once('Connections/connDryform.php'); ?>
<?php
mysql_select_db($database_connDryform, $connDryform);
$query_rsBuscapThumbs = "SELECT * FROM buscap_images ORDER BY id_buscapimg
ASC";
$rsBuscapThumbs = mysql_query($query_rsBuscapThumbs, $connDryform) or
die(mysql_error());
$row_rsBuscapThumbs = mysql_fetch_assoc($rsBuscapThumbs);
$totalRows_rsBuscapThumbs = mysql_num_rows($rsBuscapThumbs);

$colname_rsBuscapLarge = "-1";
if (isset($_GET)) {
$colname_rsBuscapLarge = (get_magic_quotes_gpc()) ? $_GET :
addslashes($_GET);
}
mysql_select_db($database_connDryform, $connDryform);
$query_rsBuscapLarge = sprintf("SELECT * FROM buscap_images WHERE id_buscapimg
= %s", $colname_rsBuscapLarge);
$rsBuscapLarge = mysql_query($query_rsBuscapLarge, $connDryform) or
die(mysql_error());
$row_rsBuscapLarge = mysql_fetch_assoc($rsBuscapLarge);
$totalRows_rsBuscapLarge = mysql_num_rows($rsBuscapLarge);

mysql_select_db($database_connDryform, $connDryform);
$query_rsBusCapText = "SELECT * FROM buscap_text";
$rsBusCapText = mysql_query($query_rsBusCapText, $connDryform) or
die(mysql_error());
$row_rsBusCapText = mysql_fetch_assoc($rsBusCapText);
$totalRows_rsBusCapText = mysql_num_rows($rsBusCapText);
?><!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=iso-8859-1" />
<title>Rollover Test</title>
<script type="text/JavaScript">
<!--

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length;
i++)
if (a.indexOf("#")!=0){ d.MM_p=new Image; d.MM_p.src=a;}}
}
//-->
</script>
<script type="text/javascript">

function swap(targetId){

if (document.getElementById)
{
target = document.getElementById(targetId);

if (target.style.display == "none")
{
target.style.display = "";
}
else
{
target.style.display = "none";
}

}
}


function swapPhoto(photoSRC,theCaption,theCredit) {

if (document.getElementById("caption")) {

var theImage = document.getElementById("mainPhoto");
var displayedCaption = document.getElementById("caption");
var displayedCredit = document.getElementById("credit");
var imgFolder = "assets/jpeg/";
displayedCaption.firstChild.nodeValue = theCaption;
displayedCredit.firstChild.nodeValue = theCredit;
theImage.setAttribute("src", imgFolder+photoSRC);

}
}
</script>
<script type="text/javascript" src="p7_eqCols2_10.js"></script>
<link href="css/dryform_main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if
((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body onLoad="P7_equalCols2(1,'leftcol','P', 'centrecol' , 'P'
,'rightcol','P')">
<div id="wrapper">
<div id="leftcol"><p><img src="assets/dryform_logo.gif" alt="Dryform Logo"
width="155" height="96" /></p>
<p>&nbsp;</p>
<div id="nav">
<div id="navlist">
<ul>
<li><a href="index.php">Home</a></li><p>&nbsp;</p>
<li id="uberlink"><a href="business_capabilities.php">Business
Capabilities</a></li><p>&nbsp;</p>
<li><a href="dryform_building_system.php">Dryform Building
System</a></li><p>&nbsp;</p>
<li><a href="projects.php">Projects</a><p>&nbsp;</p>
<li><a href="inspirations.php">Inspirations</a></li><p>&nbsp;</p>
<li><a href="technical_approval.php">Technical
Approval</a></li><p>&nbsp;</p>
<li><a href="school_of_excellence.php">Dryform School of
Excellence</a></li><p>&nbsp;</p>
<li><a href="contact.php">Contact</a></li><p>&nbsp;</p>
</ul>
</div></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img src="assets/shg_logo.png" alt="SHG Logo" width="65" height="30"
/></p>
<p><img src="assets/premier_logo.png" alt="Premier Logo" width="90"
height="26" /></p>
<p><a href="http://www.bre.com"><img src="assets/bre_logo.png" alt="BRE
Logo" width="40" height="38" border="0" /></a></p>
</div>


<div id="centrecol">
<?php echo $row_rsBusCapText; ?> <p></p></div>
<div id="rightcol">
<?php do { ?>
<a href="<?php echo $row_rsBuscapLarge;
?>"onclick="swap('frameBorder');swapPhoto('<?php echo $row_rsBuscapLarge;
?>');return false;"><img src="<?php echo $row_rsBuscapThumbs; ?>" alt="images"
name="thumb" width="125" border="0" id="thumb" /></a>
<?php } while ($row_rsBuscapThumbs = mysql_fetch_assoc($rsBuscapThumbs));
?><p></div>


<div id="clearit"></div>
<div id="footer"><?
function display_footer($site_name) {
function display_copyright($site_name) {
print "Copyright &copy ". date("Y"). " $site_name. All Rights Reserved.";
}
print display_copyright($site_name);
}
$site_name = "Dryform Ltd";
display_footer($site_name);
?></div>
</div>


<div id="frameBorder" style="display: none;">
<div id="frameBackground">
<div id="displayArea"><img src="<?php echo $row_rsBuscapLarge; ?>"
alt="Image"/>

<p id="closeWidget"><a href="#" title="Toggle pop-up window"
onclick="swap('frameBorder');return false;">close</a> <a href="#" title="Toggle
pop-up window" onclick="swap('frameBorder');return false;"><img
src="assets/close_button.gif" alt="close image" width="9" height="9" border="0"
/></a></p>

</div>
</div>
</div>

</body>
</html>
<?php
mysql_free_result($rsBuscapThumbs);

mysql_free_result($rsBuscapLarge);

mysql_free_result($rsBusCapText);
?>