Jump to content


This topic is now archived and is closed to further replies.


Disjointed Rollover

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'); ?>
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">
<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 type="text/javascript">

function swap(targetId){

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

if (target.style.display == "none")
target.style.display = "";
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 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();

<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>
<div id="nav">
<div id="navlist">
<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>
<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 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";

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





Share this post

Link to post
Share on other sites
I wish I could help but this is a little too deep for me, but I can bump it for you by saying this.

Share this post

Link to post
Share on other sites


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.