Yet another works in Firefox but not IE Prolem

Investment Articles Directory - Christmas Ecards - Debt Consolidation - Debt - Find jobs

View Full Version : Yet another works in Firefox but not IE Prolem

blumjay74

Apr 9th 2007, 12:54 pm

Hello, I'm new to this forum and to JavaScript as well. A friend of mine wrote this code for me as an alternative to an Animated GIF. It's an image swap setup to swap 4 images based on the position of the mouse. In the code he wrote, the program used the entire width of the screen divided by 4 to trigger the image swaps. But since the image changes only very slightly, I thought it would be better to have the image change only while the mouse is over it.

The best way I could figure how to do that was to store the image width as a variable in an external script in the root directory so if I want to re-size the images I only have
to change one file. All the images will be the same size, so this will get me by. Now I know there's a better was to do that but I'll figure that out once I get better with JavaScript.

The reason for my post is that once I got all that hammered out, and working fine in Firefox, I ran it on IE as an afterthought and it won't work!

I'm sure that the problem stems from the script's use of pageX. My friend won't allow a Windows machine in his house, he's strictly Linux so I can hardly blame him for the oversight.

My question is, what is the best was for this script to work in both FireFox and IE? This my first JavaScript program, so perhaps I don't understand IE's use of the clientX equivalent

http://members.cox.net/blumjay/testpage/bridge/imageSwap4.html

<html>

<head>

<title>image swap demo</title>

<script src="../338.js" type="text/javascript">
// The external script assigns two variables, imagewidth=338 and quarter=imagewidth/4
</script>

<script type="text/javascript">
// this is where the images get pre-loaded
preload1 = new Image();
//preload1.src = "frame1.jpg";
preload1.src = "1.jpg";
preload2 = new Image();
//preload2.src = "frame2.jpg";
preload2.src = "2.jpg";
preload3 = new Image();
//preload3.src = "frame3.jpg";
preload3.src = "3.jpg";
preload4 = new Image();
//preload4.src = "frame4.jpg";
preload4.src = "4.jpg";

</script>

</head>
<body>
<center>
<table border="0" width="100%">

<tr>
<td valign="middle" align="center">

<script type="text/javascript">

// Look out! This is case-sensitive.

document.onmousemove = getMouseX;
function getMouseX(e)
{
mouseX = e.pageX;

if (mouseX < 0) { mouseX = 0; }
if (mouseX > screen.width) { mouseX = screen.width; }

// comment out the below line when not debugging
document.demoForm.MouseX.value = mouseX;

if ( mouseX < 1 * ((document.body.clientWidth - imagewidth) / 2 ) + (1 * quarter))
{
document["the_image"].src = preload1.src;
// comment out the below line when not debugging
document.demoForm.which_image.value = "1";
}
else if ( mouseX < 1 * ((document.body.clientWidth - imagewidth) / 2 ) + (2 * quarter))
{
document["the_image"].src = preload2.src;
// comment out the below line when not debugging
document.demoForm.which_image.value = "2";
}
else if ( mouseX < 1 * ((document.body.clientWidth - imagewidth) / 2 ) + (3 * quarter))
{
document["the_image"].src = preload3.src;
// comment out the below line when not debugging
document.demoForm.which_image.value = "3";
}
else if ( mouseX < 1 * ((document.body.clientWidth - imagewidth) / 2 ) + (4 * quarter))
{
document["the_image"].src = preload4.src;
// comment out the below line when not debugging
document.demoForm.which_image.value = "4";
}
}
</script>
<img src="1.jpg" width="338" height="418" name="the_image" id="the_image">

<form name="demoForm">
debugging info:<br>
x-coordinate: <input type="text" name="MouseX" value="?" size="4"><br>

frame number: <input type="text" name="which_image" value="0" size="1"><br>

</form>

<script type="text/javascript">
// Just more de-bugging info, just ignore this script

document.write(imagewidth + "<br>");
document.write(quarter + "<br>");

document.write((document.body.clientWidth - imagewidth) + "<br>");

</script>
</td>
</tr>
</table>
</center>
</body>

</html>

Thanks for looking!

Jay Blum

giraph

Apr 9th 2007, 1:38 pm

yes pageX is not valid in IE, so you'll need to use a script like:

if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}

blumjay74

Apr 10th 2007, 10:40 am

I used your code in place of 'mouseX = e.pageX;'

I was trying that kind of thing, but I was getting nowhere. Your code will work in Firefox, but still not in IE. It looks like very solid code, so I suspect the problem is with the original code I dropped it into.

I altered your code by changing "posx" to "mouseX" as that's the variable the rest of the code uses.

Firefox acts like nothing has changed, but IE returns an error of "PageX is null or not an object" for line 55. I thought the IF statement would prevent IE from even reading that line? What's interesting is that when I reverse the if statements so that IE finds the clientX if statement first, it returns the same "null / not an object" error for clientX.

Why didn't anybody tell me I was retarded? There must have been a polite way for people to mention this while I was growing up, but nobody did.

I haven't posted to code again, even though it has changed. the link to the new code is below.

http://members.cox.net/blumjay/testpage/bridge/imageSwap3.html

If anybody wants me to post the new code just let me know and I will, it just seems like it makes the messages longer than they need to be, but maybe that's how these forums work.

Thanks!

blumjay74

Apr 10th 2007, 12:17 pm

I'm not retarded, Internet Explorer is! I'm so relieved. I was going to have to declare that at my next job interview. Now I don't have to. Apparently,
IE needs this line of code:

if (!e) var e = window.event
// e refers to the event

where Firefox doesn't. I was wondering why I had a function that had a parameter (e) that never seemed to be defined anywhere. I guess Firefox already knows what that is.

Well, I thank you for your help, I would not have got it working without your reply.

Jay Blum

http://members.cox.net/blumjay/testpage/bridge/imageSwap5.html
New Code works in both!