JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

A new image swap?

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: May 2006
Posts: 1
Reputation: moody is an unknown quantity at this point 
Solved Threads: 0
moody moody is offline Offline
Newbie Poster

A new image swap?

 
0
  #1
May 19th, 2006
I'm using this JavaScript from Dreamweaver that looks like this:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. function MM_preloadImages() { //v3.0
  2.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  3.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  4.     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  5. }
  6. function MM_swapImgRestore() { //v3.0
  7.   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  8. }
  9. function MM_findObj(n, d) { //v4.01
  10.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  11.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  12.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  13.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  14.   if(!x && d.getElementById) x=d.getElementById(n); return x;
  15. }
  16. function MM_swapImage() { //v3.0
  17.   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  18.    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  19. }
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!
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2004
Posts: 2,413
Reputation: Comatose is a jewel in the rough Comatose is a jewel in the rough Comatose is a jewel in the rough Comatose is a jewel in the rough 
Solved Threads: 211
Team Colleague
Comatose's Avatar
Comatose Comatose is offline Offline
Taboo Programmer

Re: A new image swap?

 
0
  #2
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:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <HTML>
  2. <HEAD>
  3. 	<TITLE>Image Swapper</TITLE>
  4. 	<SCRIPT LANGUAGE="Javascript">
  5. 	function swap(pic1, pic2)
  6. 	{
  7. 		var pic1 = document.getElementById("pic1");
  8. 		var pic2 = document.getElementById("pic2");
  9. 		var pic1src = pic1.src;
  10. 		var pic2src = pic2.src;
  11. 		pic2.src = pic1src;
  12. 		pic1.src = pic2src;
  13. 	}
  14. 	</SCRIPT>
  15. </HEAD>
  16. <BODY BGCOLOR="#000000" TEXT="#FFFFFF">
  17. <FORM NAME="testfrm">
  18. 	<IMG SRC="http://www.aftermath.net/~coma/tools/pingres.gif" ID="pic1" onMouseOver="swap('pic1', 'pic2');" />
  19. 	<HR /><BR />
  20. 	<IMG SRC="http://www.aftermath.net/~coma/tools/calc.gif" ID="pic2" onMouseOver="swap('pic2', 'pic1');" />
  21. </FORM>
  22. </BODY>
  23. </HTML>
Let me know how that works for you.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2007
Posts: 13
Reputation: schwarznavy is an unknown quantity at this point 
Solved Threads: 0
schwarznavy schwarznavy is offline Offline
Newbie Poster

Re: A new image swap?

 
0
  #3
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2007
Posts: 13
Reputation: schwarznavy is an unknown quantity at this point 
Solved Threads: 0
schwarznavy schwarznavy is offline Offline
Newbie Poster

Re: A new image swap?

 
0
  #4
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!
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxcode ajaxhelp animate array automatically beta box bug calendar captchaformproblem cart checkbox child class codes column cookies createrange() css cursor decimal design disablefirebug dom download dropdown editor element engine enter error events explorer ext file firefox focus forms frameworks google gwt html htmlform ie8 iframe image() images index internet java javascript jawascriptruntimeerror jquery jsf jsfile jsp jump listbox masterpage math menu microsoft mimic mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent pdf php player post problem progressbar prototype redirect regex runtime scale scroll search select session shopping size sql text textarea toggle w3c web website window windowofwords windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC