Jump to content

Disjointed Rollover


seanollett

Recommended Posts

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 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>&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['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);
?>
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.