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.

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