Member Avatar for moody

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:

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

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!

  • 3 Contributors
  • 3 Replies
  • 122 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by schwarznavy
Member Avatar for Comatose

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.

Member Avatar for schwarznavy

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.

Member Avatar for schwarznavy

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!

Edited by mike_2000_17 because: Fixed formatting
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.