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 Code:
<?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);
?>
HTML Code:
<!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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</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> </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 © ". 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 Code:
<?php
mysql_free_result($rsBuscapThumbs);
mysql_free_result($rsBuscapLarge);
mysql_free_result($rsBusCapText);
?>
21-Apr-2006, 13:10
Last Week of IA Training by crystalattice
Similar Threads
