Jump to content


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


JS problem with swap image

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:

function swap(targetId){

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

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


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

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;

and the relevant html code is:

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


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


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.