PDA

View Full Version : various image swapping


ds67
05-26-2007, 06:23 PM
Hi everyone:

I'm very new at javascript so obviously confused on some issues. I'm trying to have various sections on one webpage to swap different photos. If I only use the code once it works. However, if I try to use it various times, it does not. Do I have variables mixed up? Here is the code...



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

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_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}

function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}


Here is the actual page the code is found on:

http://www.jordansautosalvage.com/javagallery.html

Also, is there a way to have a slight fade when the photos swap?

Thanks so much.
DS

Mr J
05-27-2007, 01:17 PM
There's probably a few ways this can be done, here's one to start with


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript">

function swapPic(obj){
obj.offsetParent.getElementsByTagName("IMG")[0].src=obj.src
}

function newWin(url){
myWin=window.open(url,'','scrollbars=1,width=450,height=375,left=420,top=225')
}

</script>

<style type="text/css">

.bigpic{
width:278px;
height:175px;
margin-bottom:5px
}

.thumb{
width:90px;
height:55px;
}

</style>

</HEAD>
<BODY>

<div style="border:1px solid black;width:280px;text-align:center">
<img class="bigpic" name="big1" src="pic01.jpg" onclick="newWin(this.src)"><BR>
<img class="thumb" src="pic01.jpg" onclick="swapPic(this)">
<img class="thumb" src="pic02.jpg" onclick="swapPic(this)">
<img class="thumb" src="pic03.jpg" onclick="swapPic(this)">
</div>

<BR>
Click small image to replace bigger image<BR>
Click big image to open in new window<BR>
<BR>

<div style="border:1px solid black;width:280px">
<img class="bigpic" name="big2" src="pic04.jpg" onclick="newWin(this.src)"><BR>
<img class="thumb" src="pic04.jpg" onclick="swapPic(this)">
<img class="thumb" src="pic05.jpg" onclick="swapPic(this)">
<img class="thumb" src="pic06.jpg" onclick="swapPic(this)">
</div>
</BODY>
</HTML>

ds67
05-28-2007, 10:00 PM
I tried the code below and it works great for one main photo. If I'd like to have 2 or more big photos, can I do this? The way it is now, if I click on any thumbnail, the first larger photo is the only photo that is swapped. You can see what I'm talking about at the following url...

http://www.jordansautosalvage.com/javagallery2.html

Is there a way I can make each auto do the same type of image swapping within that auto only?

Thanks,

Mr J
05-28-2007, 11:50 PM
Sorry I had IE open at the time and never thought to check it in Firefox


Change this line

obj.offsetParent.getElementsByTagName("IMG")[0].src=obj.src

to

obj.parentNode.getElementsByTagName("IMG")[0].src=obj.src


(and put the script in the head section)

I've checked it in Firefox, Opera, and IE, both bigger images now change independently in all three

ds67
05-29-2007, 04:01 AM
thank you MR. J.

The code works great! What a genius!

ds67
06-02-2007, 02:32 PM
Hello:

Using the above codes, is there a way I can swap images from 2 different cells..... For example 2 different <td> ???

Thanks,

Mr J
06-02-2007, 06:55 PM
Please excuse my confusion but can you give a bit more information on what you want to achieve

ds67
06-03-2007, 04:25 AM
Sorry, I have the following code (which works fine).

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

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_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}

function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->

To better see what I'm talking about, please see the following page...

http://caffreytree.com/gallery.html

I was wondering if I can either simplify it so that the thumbnails on the right (which is in one <td> cell) could swap with the larger image on the left (in another <td> cell). The problem is that the thumbnails are actually 'clickable' and reloads the page. If I could, I'd like to eliminate that.

Hope I've cleared up my dilema. Any help is greatly appreciated.

Mr J
06-03-2007, 10:06 AM
Remove that script and this
<BASE HREF="http://caffreytree.com/">

Add this script

<script type="text/JavaScript">
<!--

function swapImage(pic){
document.images["photo"].src=pic
}

//-->
</script>

Replace the table containing the thumbs with this

<table id="thumbs">
<tr>
<td><img src="images/gallery/f2.gif" alt="" onmouseover="swapImage('images/gallery/f2.gif')"></td>
<td><img src="images/gallery/foto10bna.gif" alt="" onmouseover="swapImage('images/gallery/foto10bna.gif')"></td>
<td><img src="images/gallery/f3bna.gif" alt="" onmouseover="swapImage('images/gallery/f3bna.gif')"></td>
<td><img src="images/gallery/foto19.gif" alt="" onmouseover="swapImage('images/gallery/foto19.gif')"></td>
<td><img src="images/gallery/stonewall_tu.jpg" alt="" onmouseover="swapImage('images/gallery/stonewall_tu.jpg')"></td>
</tr>
<tr>
<td><img src="images/gallery/foto15.gif" alt="" onmouseover="swapImage('images/gallery/foto15.gif')"></td>
<td><img src="images/gallery/foto12_bna.gif" alt="" onmouseover="swapImage('images/gallery/foto12_bna.gif')"></td>
<td><img src="images/gallery/landscape1.jpg" alt="" onmouseover="swapImage('images/gallery/landscape1.jpg')"></td>
<td><img src="images/gallery/004_22A.jpg" alt="" onmouseover="swapImage('images/gallery/004_22A.jpg')"></td>
<td><img src="images/gallery/005_21A.jpg" alt="" onmouseover="swapImage('images/gallery/005_21A.jpg')"></td>
</tr>
<tr>
<td><img src="images/gallery/010_16A.jpg" alt="" onmouseover="swapImage('images/gallery/010_16A.jpg')"></td>
<td><img src="images/gallery/014_12A.jpg" alt="" onmouseover="swapImage('images/gallery/014_12A.jpg')"></td>
<td><img src="images/gallery/018_08A.jpg" alt="" onmouseover="swapImage('images/gallery/018_08A.jpg')"></td>
<td><img src="images/gallery/019_07A.jpg" alt="" onmouseover="swapImage('images/gallery/019_07A.jpg')"></td>
<td><img src="images/gallery/022_04A.jpg" alt="" onmouseover="swapImage('images/gallery/022_04A.jpg')"></td>
</tr>
<tr>
<td><img src="images/gallery/027_00A.jpg" alt="" onmouseover="swapImage('images/gallery/027_00A.jpg')"></td>
<td><font color="#334c19"> CTS </font></td>
<td><font color="#334c19"> CTS </font></td>
<td><font color="#334c19"> CTS </font></td>
<td><font color="#334c19"> CTS </font></td>
</tr>
<tr>
<td bgcolor="#334c19" height="25" colspan="5"> </td>
</tr>
</table>


and add the css

<style type="text/css">

#thumbs img{
width:60px;
height:60px;
border:2px solid blue;
}

</style>

ds67
06-05-2007, 03:41 AM
Thanks again Mr. J. The code works supurb. It's incredible how you yield the same results with a lot less code.