seanollett

I am trying a disjointed rollover tutorial I came across. It opens a css picture frame in the same window in a hidden div. I decided to try and adapt to a client site where the thumbnails are loaded using php. I had great problems. So, i took out the Javascript that came with the tutorial and did a straight dreamweaver swap image and the browser opened a new window with the correct image. So far, so good. However, it did not show the picture frame in the new div. So I put back the js and added swap('frameBorder') to the onclick and the picture frame appeared just before a new page opened with the correct image. Now, I can get it to work with 'onmouseover' but, ideally, i need it to work with 'onclick'. Close but no cigar! Now, i figure that the problem is in the js and I confess to be absolutely useless at javascript and usually rely on Dreamweaver to handle that part. I hope that someone can spot what is going wrong. The js i now have is: CODE <script> function swap(targetId){ if (document.getElementById) { target = document.getElementById(targetId); if (target.style.display == "none") { target.style.display = "block"; } 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> <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); function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } //--> </script> and the relevant html code is: CODE <div id="rightcol"> <?php do { ?> <a href="<?php echo $row_rsBuscapThumbs['location_buscapimg_large']; ?>?id_buscapimg=<?php echo $row_rsBuscapThumbs['id_buscapimg']; ?>"><img src="<?php echo $row_rsBuscapThumbs['location_buscapimg_thumb']; ?>" alt="images" name="thumb" width="125" border="0" id="thumb" onclick="swap('frameBorder'); MM_swapImage('framed','','<?php echo $row_rsBuscapThumbs['location_buscapimg_large']; ?>',1)" /></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_rsBuscapThumbs['location_buscapimg_large']; ?>" name="framed"/> <p id="closeWidget"><a href="#" title="Toggle pop-up window" onclick="swap('frameBorder');return false;">close</a> <a href="#" title="Close 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> The css for the picture frame is: #frameBorder,#frameBackground,#displayArea { left: 50%; top: 50%; position: absolute; } #frameBorder { width: 660px; margin-left: -300px; height: 500px; margin-top: -210px; background-color: #000000; z-index: 1; } #frameBackground { width: 630px; margin-left: -320px; height: 470px; margin-top: -240px; background-color: #f5f0e1; border-left: 5px solid #e5e2d3; border-top: 5px solid #e5e2d3; border-right: 5px solid #f5f0e1; border-bottom: 5px solid #f5f0e1; } #displayArea { width: 400px; height: 300px; margin-left: -280px; margin-top: -190px; } #displayArea img { border-top: 2px solid #e5e2d3; border-left: 2px solid #e5e2d3; border-bottom: 2px solid #ffffff; border-right: 2px solid #ffffff; margin-bottom: 1em; } Many thanks Sean

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); ?>