seanollett Posted April 23, 2006 Share Posted April 23, 2006 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 thanksSean Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.