Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 6734

May 19th, 2006

A new image swap?

Expand Post »

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
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];}
}
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]
<a
href="what.html"
title="What We Do"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('whatwedo','','/images/nav_whatwedo_on.gif','top_whatwedo','','/images/top_whatwedo_on.gif',1)"
class="toplevel-nav">
<img
src="/images/top_whatwedo_off.gif"
name="top_whatwedo"
width="139"
height="117"
border="0"
id="top_whatwedo"
alt="What We Do">
</a>
<a
href="What.html"
title="What We Do"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('whatwedo','','/images/nav_whatwedo_on.gif','top_whatwedo','','/images/top_whatwedo_on.gif',1)"
class="mainlevel-nav">
<img
src="/images/nav_whatwedo_off.gif"
name="whatwedo"
alt="whatwedo"
name="whatwedo"
border="0">
</a>
[/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!

Similar Threads

Image Swap Problems in JavaScript / DHTML / AJAX
Help with SWAP IMAGE in Site Layout and Usability
Image Swap help in HTML and CSS
Image swap behaviour from Dreamweaver no longer works once uploaded in Site Layout and Usability

moody

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

1 posts
since May 2006

Permalink

May 19th, 2006

Re: A new image swap?

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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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>
<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

Team Colleague

Reputation Points: 361

Solved Threads: 214

Taboo Programmer

Offline

2,413 posts
since Dec 2004

Permalink

Jun 24th, 2007

Re: A new image swap?

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

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

22 posts
since Jun 2007

Permalink

Jun 25th, 2007

Re: A new image swap?

Well...I figured it out.

function replace(Bigpic, Lilpic1)
{
var Bigpic = document.getElementById("Bigpic");
var Lilpic1 = document.getElementById("Lilpic1");
var Bigpicsrc = Bigpic.src;
var Lilpic1src = Lilpic1.src;
Bigpic.src = Lilpic1src;
}

function replace1(Bigpic, Lilpic2)
{
var Bigpic = document.getElementById("Bigpic");
var Lilpic2 = document.getElementById("Lilpic2");
var Bigpicsrc = Bigpic.src;
var Lilpic2src = Lilpic2.src;
Bigpic.src = Lilpic2src;
}

function replace2(Bigpic, Lilpic3)
{
var Bigpic = document.getElementById("Bigpic");
var Lilpic3 = document.getElementById("Lilpic3");
var Bigpicsrc = Bigpic.src;
var Lilpic3src = Lilpic3.src;
Bigpic.src = Lilpic3src;
}

and

<p>
<IMG SRC="news/imagery/070611-N-4124C-029-l.jpg" ID="Bigpic" width="325" />
</p>
<HR /><BR />
<IMG SRC="news/imagery/070611-N-4124C-029-l.jpg" ID="Lilpic1" onclick="replace('Lilpic1', 'Bigpic');" width="105" />
<IMG SRC="news/imagery/070611-N-4124C-052-l.jpg" ID="Lilpic2" onclick="replace1('Lilpic2', 'Bigpic');" width="105" />
<IMG SRC="news/Imagery/070612-N-4124C-024-l.jpg" ID="Lilpic3" onclick="replace2('Lilpic3', 'Bigpic');" width="105" />

Essentially, it puts a small image into the bigger image's place, and resizes it.

Now, I'm just wondering how could I fade the replacement.

Also, let's say the Big Image has a caption and when I click on a small image I want to replace the caption with the text that goes along with it.

Any suggestions? Thank you!

schwarznavy

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

22 posts
since Jun 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: kalah african game problem...

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Java or Flash/Other?

DaniWeb Message

Cancel Changes

User Name
Password