image change when rollover link

snappy · #1 (**permalink**) Apr 22nd, 2007, 11:21

I have a web page with a graph on it. I want the user to be able to rollover(or click) on three text links beneath that will change the original graph to another with information specific to the relevant text link. I guess its like a javascript image rollover except I want the image to change when I rollover a seperate link rather than the image itself. Any pointers?

ukgeoff · #2 (**permalink**) Apr 23rd, 2007, 11:18

Use JavaScript to dynamically change the scr='... part of your img tag in the area where you are displaying the graphics.

Have a go at working it out and then come back if you get stuck.

Hint: Look at using document.getElementById(id)...

snappy · #3 (**permalink**) Apr 23rd, 2007, 19:27

Well, this is what I would have used, in the olden days.

HTML: Select all

<html>
<head>
<script language="JavaScript">
<!--
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.0
  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 && document.getElementById) x=document.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];}
}


//-->
</script>
</head>
<img name="Image1" border="0" src="untitled%20folder/one.gif"><br /><br />
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','untitled%20folder/two.gif',1)">two</a><br /><br />
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','untitled%20folder/three.gif',1)">three</a><br /><br />
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','untitled%20folder/four.gif',1)">four</a><br /><br />
</body>
</html>

There's a "document.getElementById" in there somewhere.
And of course, now I'm stuck!! because I'm certain the way you're going to tell me is one helluva lot slicker and less clumsy.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] multiple image rollover not restoring image	snappy	JavaScript Forum	4	Nov 5th, 2007 14:38
Flash image link with rollover and sound on click	markmod1	Flash & Multimedia Forum	5	Jun 17th, 2007 19:53
Rollover image with links on new image	stoob	JavaScript Forum	2	Feb 8th, 2007 22:05
image rollover	renren	Web Page Design	3	Feb 13th, 2006 12:54
Rollover Image Problem!	edejo	JavaScript Forum	2	Dec 16th, 2005 01:44

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
image change when rollover link