PHP Disjointed rollover problem

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['id_buscapimg'])) {
$colname_rsBuscapLarge = (get_magic_quotes_gpc())? $_GET['id_buscapimg'] : addslashes($_GET['id_buscapimg']);
}
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 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">

</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> </p>
<div id="nav">
<div id="navlist">
<ul>
<li><a href="index.php">Home</a></li><p> </p>
<li id="uberlink"><a href="business_capabilities.php">Business Capabilities</a></li><p> </p>
<li><a href="dryform_building_system.php">Dryform Building System</a></li><p> </p>
<li><a href="projects.php">Projects</a><p> </p>
<li><a href="inspirations.php">Inspirations</a></li><p> </p>
<li><a href="technical_approval.php">Technical Approval</a></li><p> </p>
<li><a href="school_of_excellence.php">Dryform School of Excellence</a></li><p> </p>
<li><a href="contact.php">Contact</a></li><p> </p>
</ul>
</div></div>
<p> </p>
<p> </p>
<p> </p>
<p> </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.example.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['buscap_text'];?> <p></p></div>
<div id="rightcol">
<?php do {?>
<a href="<?php echo $row_rsBuscapLarge['location_buscapimg_large'];?>"onclick="swap('frameBorder');swapPhoto('<?php echo $row_rsBuscapLarge['location_buscapimg_large'];?>');return false;"><img src="<?php echo $row_rsBuscapThumbs['location_buscapimg_thumb'];?>" alt="images" name="thumb" width="125" border="0" id="thumb" /></a>
<?php } while ($row_rsBuscapThumbs = mysql_fetch_assoc($rsBuscapThumbs));?><p></div>

<div id="frameBorder" style="display: none;">
<div id="frameBackground">
<div id="displayArea"><img src="<?php echo $row_rsBuscapLarge['location_buscapimg_large'];?>" 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);
?>

[edited by: coopster at 7:33 pm (utc) on April 21, 2006]
[edit reason] generalized url [/edit]

PHP Disjointed rollover problem

seanollett

jatar_k

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week