A new image swap?

I'm using this JavaScript from Dreamweaver that looks like this:

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
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];}
}

My HTML markup looks like this: [html] [/html] Together they do this: Changes two images at the same time in two different locations of the document whilst only hovering over one or the other image.

I want to take the images out of the HTML and put them into the CSS. That's not the hard part. What is difficult for me to figure out is how I can emulate that same behavior using getElementbyID or something like that.

Has this been achieved somewhere? Is there a newer better cleaner meaner way of doing this?

Thanks!

moody

Newbie Poster

1 post since May 2006

Reputation Points: 10

Solved Threads: 0

6 Years Ago

I just threw this code together, and it works in FireFox 1.5.0.3. and I just tested it with IE 6.0.2800.1106..... eah, it's long. Anyway, you should be able to extract the function from the HTML page, and use it as you will. I've attached the HTML so you can see how to call it:

<HTML>
<HEAD>
	<TITLE>Image Swapper</TITLE>
	<SCRIPT LANGUAGE="Javascript">
	function swap(pic1, pic2)
	{
		var pic1 = document.getElementById("pic1");
		var pic2 = document.getElementById("pic2");
		var pic1src = pic1.src;
		var pic2src = pic2.src;
		pic2.src = pic1src;
		pic1.src = pic2src;
	}
	</SCRIPT>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFFFF">
<FORM NAME="testfrm">
	<IMG SRC="http://www.aftermath.net/~coma/tools/pingres.gif" ID="pic1" onMouseOver="swap('pic1', 'pic2');" />
	<HR /><BR />
	<IMG SRC="http://www.aftermath.net/~coma/tools/calc.gif" ID="pic2" onMouseOver="swap('pic2', 'pic1');" />
</FORM>
</BODY>
</HTML>

Let me know how that works for you.

Comatose

Taboo Programmer

Team Colleague

2,910 posts since Dec 2004

Reputation Points: 361

Solved Threads: 215

4 Years Ago

Hello. I know this thread is old...but hopefully will see this response.
The above script was very informative. I don't know jack about scripting.

I'm working on a web page that is going to have one primary photo (about 500 pixels wide). Down its right side I'm going to have three thumbnail images.

I'd like to have some code similar to the one above that will let me click on a smaller thumbnail, and have it replace with the big photo. Now when it swaps, I don't want the thumbnail to appear where the big photo was, I want a higher-resolution version of it to appear.

To illustrate:

BigPhoto1 LilPhoto1 LilPhoto2 LilPhoto3

When I click on Lilphoto2, BigPhoto1 is changed to BigPhoto2. All the lilphotos can stay the same....only the BigPhoto need change.

schwarznavy

Light Poster

25 posts since Jun 2007

Reputation Points: 10

Solved Threads: 0

4 Years Ago

Well...I figured it out.