A new image swap?

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 391,902 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,604 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 4276 | Replies: 3

•

Join Date: May 2006

Posts: 1

Reputation: moody is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

moody

Offline

Newbie Poster

A new image swap?

May 19th, 2006

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

Help with Code Tags

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

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!

•

Join Date: Dec 2004

Location: Lincoln Park, Michigan

Posts: 1,744

Reputation: Comatose is an unknown quantity at this point

Rep Power: 7

Solved Threads: 107

Comatose

Offline

Moderator

Re: A new image swap?

May 19th, 2006

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:

Help with Code Tags

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

Let me know how that works for you.

•

Join Date: Jun 2007

Posts: 10

Reputation: schwarznavy is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

schwarznavy schwarznavy is offline

Offline

Newbie Poster

Re: A new image swap?

Jun 24th, 2007

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.

•

Join Date: Jun 2007

Posts: 10

Reputation: schwarznavy is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

schwarznavy schwarznavy is offline

Offline

Newbie Poster

Re: A new image swap?

Jun 25th, 2007

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!