Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

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

Status
Not open for further replies.

timothy1982

Technical User
Jul 22, 2008
1
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>
 
First create a .JS file with code like this and reference it in the head of your page.

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

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
Code:
<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
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top