Disjointed Rollover

seanollett · April 21, 2006

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">

</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">

</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.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['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="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['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);
?>

Ninjakreborn · April 22, 2006

I wish I could help but this is a little too deep for me, but I can bump it for you by saying this.

Sign In

Disjointed Rollover

Recommended Posts

seanollett

Link to comment

Share on other sites

Ninjakreborn

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information