Trying to duplicate mouseover script. Can't get it....

[timothy1982]

Hello,

I mainly use Php, but I am trying to learn some Javascript. I am tinkering with this simple mouse over script that takes a small picture within a div, and enlarges it (Actually, swaps it, 2 separate pics) on mouse over. I have installed the script below once, and it worked great. The problem is, I don't know how to duplicate it on the same page. I tried just duplicating the code, changing just the unique images, but couldn't get that to work...

It keeps telling me "document.getElementById is null". I assume thats because the second script is overwriting the first.

Can anyone lend me a hand....?



I put this in the heading:

Code:
<script language="javascript" type="text/javascript">
function into_image () {
document.getElementById ( "img1" ).outerHTML = '<img id="img2" onmouseout="outof_image()" src="solar_hands_l.png" >' ;
}

function outof_image () {
document.getElementById ( "img2" ).outerHTML = '<img id="img1" onmouseover="into_image()" src="solar_hands_s.png" >' ;
}
</script>
Then I put this where I want the smaller image to go:

Code:
<p>
<img id="img1" onmouseover="into_image()" src="solar_hands_s.png" >
</p>

 

[Bandenjamin]

First create a .JS file with code like this and reference it in the head of your page.

if (document.images) {
image0 = new Image;
image1 = new Image;
image2 = new Image;
image3 = new Image; 
image0.src = 'mypic1.jpg';
image1.src = 'mypic2.jpg';
image2.src = 'mypic3.jpg';
image3.src = 'mypic4.jpg';
} else {
image0 = '';
image1 = '';
image2 = '';
image3 = '';
document.rollimg = '';
}

Then in your page put this code

<script type="text/javascript">

var maxwidth = 200;
var maxheight = 200;
var imgfolder = 'images/';

var imgname = new Array(), ii = 0;
imgname[ii++] = 'mypic1.jpg';
imgname[ii++] = 'mypic2.jpg';
//etc

var imgs = new Array();

for (ii = 0; ii < imgname.length; ii++)
  {
  var oneimage = new Image();
  oneimage.src = imgfolder + imgname[ii];
  if (oneimage.height > oneimage.width)
    {
    oneimage.height = maxheight;
    }
  else
    {
    oneimage.width = maxwidth;
    }
  imgs[ii] = oneimage;
  }
document.getElementById('rollimg').src = imgs[0].src;
</script>

Finally set up your shots like this

<p align="center">
	<span onmouseover="document.rollimg.src=image0.src;">
		<img src="mypic1.jpg" width="32" height="32" border="0" alt="1" />
	</span> 
	<span onclick="document.rollimg.src=image1.src;">
		<img src="mypic1.jpg" width="32" height="32" border="0" alt="2" />
	</span> 
	<span onclick="document.rollimg.src=image2.src;">
		<img src="mypic2.jpg" width="32" height="32" border="0" alt="3" />
	</span>
	<span onclick="document.rollimg.src=image3.src;">
		<img src="mypic3.jpg" width="32" height="32" border="0" alt="4" />
	</span>
</p>
<p align="center"><img src="mypic1.jpg" width="800" height="800" border="0" alt="Larger version of one of the smaller images above" name="rollimg" /></p>

Hope that helps

--Dan
Whenever you find yourself on the side of the majority, it is time to pause and reflect.
Mark Twain