Jump to content

JS problem with swap image


seanollett

Recommended Posts

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