...

View Full Version : Works in Mozilla 1.7, not in IE 6.0



ASP
08-11-2004, 08:38 PM
<a href="#"
onmouseover="changeImages('Disp48pcHolder',
'Assets/Images/display48_over.jpg');
return true;"
onmouseout="changeImages('Disp48pcHolder',
'Assets/Images/display48.jpg');
return true;">
<img src="Assets/Images/display48.jpg" name="Disp48pcHolder" width="109"
height="63" border="0" id="Disp48pcHolder">
</a>

...and in an external javascript document...

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

Works in Mozilla 1.7 but not in IE 6.0. Thanks for your feedback.


Respectfully,

ASP

hemebond
08-11-2004, 10:07 PM
Thanks for your feedback.There are much better ways of creating rollovers. CSS rollovers that preload all required images.

jamescover
08-12-2004, 12:30 AM
<a href="#"
onmouseover="changeImages('Disp48pcHolder',
'Assets/Images/display48_over.jpg');
return true;"
onmouseout="changeImages('Disp48pcHolder',
'Assets/Images/display48.jpg');
return true;">
<img src="Assets/Images/display48.jpg" name="Disp48pcHolder" width="109"
height="63" border="0" id="Disp48pcHolder">
</a>




<a href="javascript:void(0);"
onMouseOver="javascript:Disp48pcHolder.src='Assets/Images/display48_over.jpg';" onMouseOut="javascript:Disp48pcHolder.src='Assets/Images/display48.jpg';"><img src="Assets/Images/display48.jpg" name="Disp48pcHolder" width="109"
height="63" border="0" id="Disp48pcHolder"></a>


-james

ASP
08-12-2004, 03:26 AM
Thanks for the reply.

I'm still curious. Is there a specific reason why the "changeImages()" function works in Mozilla 1.7 but not with IE 6.0?

Thanks again.

glenngv
08-12-2004, 03:30 AM
<a href="javascript:void(0);"
onMouseOver="javascript:Disp48pcHolder.src='Assets/Images/display48_over.jpg';" onMouseOut="javascript:Disp48pcHolder.src='Assets/Images/display48.jpg';"><img src="Assets/Images/display48.jpg" name="Disp48pcHolder" width="109"
height="63" border="0" id="Disp48pcHolder"></a>
-james
That will work in IE but won't in Mozilla.

ASP, your code seems to be fine. Are you sure there are no other error causing the onmouseover/onmouseout not to work? Or maybe preloadFlag is not set to true when browser is IE?

jamescover
08-12-2004, 04:42 AM
That will work in IE but won't in Mozilla


I wouldn't know, I don't own the beast. But ya gotta love the irony of it though...considering the thread title :eek:


-james

ASP
08-12-2004, 09:08 PM
> Or maybe preloadFlag is not set to true when browser is IE?
I'm not using any browser sniffing code.

> There are much better ways of creating rollovers. CSS rollovers that
> preload all required images.
How is that done?


Thanks for your replies.

Willy Duitt
08-12-2004, 09:23 PM
What is that rollover suppose to do???
All I see is swaping one image for another onmouseover, onmouseout???

There is no link...
Why not just place the event handlers on the image using style.cursor so that you have an indication that something should happen???

As for preloaded images....
I'm sure a search of this forum would return hundreds of preload scripts. In fact, there is one that has been active within the last week if you look...

But, the entire premise of that script makes no sense to me whatsoever....

Regards;
.....Willy

ASP
08-12-2004, 09:32 PM
Willy,

> As for preloaded images.... I'm sure a search of this forum would return
> hundreds of preload scripts. In fact, there is one that has been active
> within the last week if you look...
I sense your frustration. However, my visits to this forum have been highly infrequent. Also, I'm not interested in loading scripts and using them as a matter of convenience. Rather, I would prefer to understand the reasons for the errors and learn from them.

> But, the entire premise of that script makes no sense to me whatsoever....
How so? It's really quite simple. The "onMouseOver()" and "onMouseOut()" method handlers have been around a long time. Besides, it works in Mozilla 1.7, but not in IE 6.0. I'm inclined to think that the problem lies elsewhere, as was mentioned by another respondent to this thread.

> Why not just place the event handlers on the image using style.cursor...
I'll look into this.

Again, I understand your frustration, but you may want to tone it down a notch or two.

ASP
08-12-2004, 09:57 PM
glenngv,

> Are you sure there are no other error causing the onmouseover/onmouseout
> not to work?
You may be right.

From Dreamweaver MX 2004, I previewed the web page in IE6.0. After it loaded, an "Error on page" message appeared in the status bar. So, I did a validiation check from the Results Panel. No errors or warnings were returned.

Next, I decided to comment out the <style> and <link> tags in order to disassociate this page with the respective external Javascript and CSS documents.

I previewed in IE6.0 again and received the same "Error on page" message in the status bar.

I don't get it. What am I missing here?

Thanks again.

Willy Duitt
08-12-2004, 10:32 PM
I'm not frustrated nor is it that I do not want to help you....
I simply do not understand what it is you are trying to do...

There is no link to follow...
That rollover could simply be done with an:
<img src="oldSrc.gif"
onmouseover="this.src='newSrc.gif'"
onmouseout="this.src='oldSrc.gif'"
style="cursor:pointer".....>

And, as I said, if you look...
There is an image preload script which is active on this board as we speak. But, still, I'm confused exactly what it is you are trying to do and what the problem is....

Good luck;
.....Willy

ASP
08-12-2004, 11:33 PM
Willy,

That's cool, and I do appreciate your responses.

In my original post I included the <a> tag which invokes the "changeImages()" function, through the "onMouseOver()" and "onMouseOut()" event handlers, and the "changeImages()" function, which is located in an external Javascript document.

In any event, one of glenngv's replies prompted me to further scrutinize the web page containing the aforementioned <a> tag and the external Javascript document.

As it turns out, glenngv was correct. The problem is not the "changeImages()" function. I have not yet pinpointed the cause, but I'm working on it.

If I arrive at a solution, I'll gladly post it here. Thanks again for your response and, in fact, to all who responded.

glenngv
08-13-2004, 02:57 AM
After it loaded, an "Error on page" message appeared in the status bar. So, I did a validiation check from the Results Panel. No errors or warnings were returned.

Double-click the exclamation icon in the status bar to see the details of the error.

ASP
08-15-2004, 06:08 AM
I believe I found the cause of this problem, and I would appreciate your feedback. I traced it down to statements within a specific function. For purposes of this discussion I left in one of the problem statements, but commented it out.

// Javascript document code
var preloadFlag = false;

function preloadImages(webPage) {
if (document.images) {
function loadIndexPics() {
// The problem statement commented out below
// imgMlnLogo = newImage("Assets/Images/mln_logo.jpg");
mlnLogo = newImage("Assets/Images/mln_logo.jpg");
topLevelMenu = newImage("Assets/Images/mln_toplevelmenu.gif");
sideMenu = newImage("Assets/Images/mln_sidement.gif");
redBottle = newImage("Assets/Images/3dbottle_with_shadow.jpg");
preloadFlag = true;
}

function loadDisplayPics() {
display48 = newImage("Assets/Images/display48.jpg");
display48_over = newImage("Assets/Images/display48_over.jpg");
display42 = newImage("Assets/Images/display42.jpg");
display42_over = newImage("Assests/Images/display42_over.jpg");
preloadFlag = true;
}

switch(webPage) {
case "index":
loadIndexPics();
break;
case "displays":
loadIndexPics();
loadDisplayPics();
break;
}
}
}
// ** End Javascript document code **

As it now stands, the problem is resolved. However, I'd appreciate clarification as to why the problem existed. Here's my theory. The commented statement in the loadIndexPics() function - namely,

imgMlnLogo = newImage("Assets/Images/mln_logo.jpg");

- uses "imgMlnLogo" as an object reference to the Image object created by the "newImage()" function. The web page that utilizes the loadIndexPics() function contains an <img> tag, which name attribute is "imgMlnLogo". The error message I received indicated the object in question did not support the property or method. It sounds like an attempt was made to assign the <img> tag to the return value of the "newImage()" function call. I can why this would generate an error. However, if this is the case, I'm confused as to how the "imgMlnLogo" object reference in the external Javascript document equates to the "imgMlnLogo" <img> tag in the web page. I can understand if we had the following, for example.

// In the Javascript document
imgMlnLogo = document.getElementById("logo_id")

, where the <img> tag utilized the "name" and "id" attributes, with "name" being "imgMlnLogo" and "id" being "logo_id".

Otherwise, if the problem is as I suspect, I can't see how the object reference "imgMlnLogo" in the external Javascript document is in the same scope as that for the "imgMlnLogo" <img> tag. Perhaps it is by default, since all document images are maintained in the "images" collection for that page?

Your feedback is greatly appreciated.

jamescover
08-15-2004, 07:07 AM
topLevelMenu = newImage("Assets/Images/mln_toplevelmenu.gif");


I'm surprised that works at all. There should be a space between the new operator and the object type.

var topLevelMenu = new Image();


Instead of writing a new image object statement for each image, try putting them in a loop for preloading:




<script>
<!--

var Imgs = []
Imgs[0] = "image1.gif";
Imgs[1] = "image2.gif";

function preImg(){

if (document.images){
for (var i=0;i<Imgs.length;i++){
var img = new Image();
img.src = "images/" +Imgs[i];
}
}
}
preImg();

//-->
</script>



-james

ASP
08-15-2004, 07:36 AM
James,

Thanks for your reply.

Buried in my absurdly lengthy post :), I stated the following.

"It sounds like an attempt was made to assign the <img> tag to the return value of the "newImage()" function call."

While I did not include the code, as it wasn't directly relevant, there is a "newImage()" function which does indeed instantiate Image objects.

Willy Duitt
08-15-2004, 07:56 AM
A name is a name and you can not have more than one element sharing the same name regardless if it is an image, function, variable (local you may get away with)....

I suppose you could think of it as naming both your son and your dog Bob...
You call Bob, both are going to come running (theoreticly).... ;)

.....Willy

ASP
08-15-2004, 08:26 AM
Let me see if I have this straight.

Originally, I had the following Javascript statement.

imgMlnLogo = newImage("Assets/Images/mln_logo.jpg");

The "imgMlnLogo" variable is an object reference which points to an Image object on the web page. Since the page already has an <img> tag (ie, an Image object) named "imgMlnLogo",

<img src="Assets/Images/mln_logo.jpg" name="imgMlnLogo" id="logoImg">

, we have a conflict.

I have two questions.

1. If the <img> tag's the value "imgMlnLogo" was assigned to the "id" attribute and not the "name" attribute, would this pose the same conflict?

2. If neither the "name" nor the "id" attributes were assigned "imgMlnLogo", would the Javascript statement,

imgMlnLogo = newImage("Assets/Images/mln_logo.jpg");

, create another Image object which had its own copy of the same image source?

Thanks again.

glenngv
08-16-2004, 03:39 AM
In IE, all name and id attributes of all elements in the document are automatically treated as global variables. That's why if you have an <img> tag with an id or name of myImage, you can reference that image directly as myImage, even without using document.getElementById or document.all statements. So you should avoid having variables, function names, element ids/names with the same identifier.

ASP
08-17-2004, 12:07 AM
glenngv,

Thanks for the info.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum