is there a certain order when using onmouseover and onclick?

fatalbertiv

07-14-2011, 04:59 AM

Hello all,

I am just starting out trying to learn javascript and I am looking for a good forum to help me get through all the roadblocks I'm sure to hit. This looks like a very active place so hopefully I'll find some good help!

Right now I'm going through a tutorial series at webmonkey. Here is the lesson I am currently working on: http://www.webmonkey.com/2010/02/JavaScript_Tutorial_-_Lesson_3/#Getting_Framed (http://www.webmonkey.com/2010/02/JavaScript_Tutorial_-_Lesson_3/#Getting_Framed)

At the bottom of the page they give you a homework assignment which is to re-create this page (http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3.html) using html and javascript.

This page has 2 row frames. I re-created these frames and the top frame initially has a page called "navigation" loaded and the bottom page initially has a page called "explorer" loaded. If you click the monkey image at the right in the "navigation" frame, it opens a new page called "brand" in the bottom frame. This "brand" page has the same monkey image as the "navigation" page but unlike the other monkey image, this one changes when you mouseover it. If you mouseover it again, it changes to another image, and a third mouseover brings you back to the original monkey image. If you click on one of the images, it swaps the monkey image in the "navigation" frame with that image. The idea is that you have 3 images to chose from in the "brand" page that you can designate as the logo in the "navigation" page. I have no problem re-creating this effect. Here is the code I used to re-create this:

I initialized these variables in the <head> of my page:

<script language="JavaScript">

var temp = "";

var img1 = 'http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/monkey.gif';

var img2 = 'http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/thau.gif';

var img3 = 'http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/sky.gif';

</script>

Then I wrote this in the body of my page:

<a onclick="parent.navigation.document.logo.src=img1;" onmouseover=" temp=img1; img1=img2; img2=img3; img3=temp; document.the_image.src=img1;" href="#">
<img src="http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/monkey.gif" name="the_image"></a>

Out of curiosity, I switched the order of onmoseover and onclick so that onmouseover came first like this:

<a onmouseover=" temp=img1; img1=img2; img2=img3; img3=temp; document.the_image.src=img1;" onclick="parent.navigation.document.logo.src=img1;" href="#">
<img src="http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/monkey.gif" name="the_image"></a>

The page still worked in Firefox, but when I viewed the source (using firebug), onclick was still first and then onmouseover. I deleted my history and refreshed the page and still onclick was coming up first when I viewed the source. Does Firefox have an auto-correct feature that is forcing onclick to be first? Is there an order when using event handlers? Does onclick always have to come before onmouseover?

Also, this code worked in Firefox and Safari, but it did not work in Chrome. Both with onclick and onmouseover first, I was able to mouseover and rotate through the images in Chrome, but whenever I clicked on an image the image was not swapped in the "navigation" page. Why?

The "navigation" page also has a green button and a yellow button that change the background of the bottom frame to their respective color when clicked using the bgColor property. This effect also works in Firefox and Safari, but not in Chrome. Why? Do I have a setting in Chrome activated that is preventing this or does Chrome not recognize this code?

I know this was long-winded but I'm a beginner so don't go too hard on me! Thanks in advance!

Old Pedant

07-14-2011, 07:49 AM

When you use onclick with an <a> tag, you must *CANCEL* the normal effect of the <a> tag (which is to reload the page if you have href="#"!).

You do that by adding return false; to the end of your onclick code.

Thus:

<a onclick="parent.navigation.document.logo.src=img1; return false;"
onmouseover=" temp=img1; img1=img2; img2=img3; img3=temp; document.the_image.src=img1;"
href="#">

Without the return false, your onclick was, essentially, doing nothing but reloading the page and starting it all over.

Old Pedant

07-14-2011, 07:55 AM

when I viewed the source (using firebug), onclick was still first and then onmouseover.
With most HTML implementations, your source code is translated into an internal form that is then rendered as needed. And since the browser "knows" that the order of the various onXXX handlers is not important, it simply puts them into whatever its own preferred internal order is.

When you see the rendered source code in Firebug, you are actually seeing the internal format being reconstituted as HTML code for your poor little human brain. <grin/>

As for bgColor property: That's an obsolete property. It could well be that Chrome chooses to ignore the obsolete code where the other browser allow you to use it. You should be changing element.style.backgroundColor=... instead.

fatalbertiv

07-14-2011, 03:11 PM

Without the return false, your onclick was, essentially, doing nothing but reloading the page and starting it all over.

This makes sense. However, I have added return false and it has not solved the problem.

With most HTML implementations, your source code is translated into an internal form that is then rendered as needed. And since the browser "knows" that the order of the various onXXX handlers is not important, it simply puts them into whatever its own preferred internal order is.

OK that is good to know. So the problem with Chrome not recognizing my onclick directions does not have to do with the order of my event handlers.

As for bgColor property: That's an obsolete property. It could well be that Chrome chooses to ignore the obsolete code where the other browser allow you to use it. You should be changing element.style.backgroundColor=... instead.

I thought this was the case but when I was trying to figure out what was wrong I changed my code to reflect exactly what was in the tutorial. I think the tutorial was written some years ago. However, when I use style.backgroundColor it does not solve the problem in Chrome and the desired effect no longer happens in Firefox or Safari either. To recap: When using bgColor, the background does change in Firefox and Safari but not Chrome. When using style.backgroundColor the background does not change in any browser.

My two pieces of code now look like this:

<a onclick="parent.navigation.document.logo.src=img1; return false;" onmouseover=" temp=img1; img1=img2; img2=img3; img3=temp; document.the_image.src=img1;" href="#>
<img src="http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/monkey.gif" name="the_image"></a>

<a onclick="parent.explorer.document.bgColor='#00FF00'; return false;" href="#">
<img src="http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/homework_controls_data/green.gif"></a>
<a onclick="parent.explorer.document.bgColor='yellow'; return false;" href"#">
<img src="http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/homework_controls_data/yellow.gif"></a>

I have images that use <a> tags without onclick to link to other pages and they work fine in Chrome. It seems that the problem is isolated specifically to my a <tags> that use onclick. Any ideas?

fatalbertiv

07-14-2011, 03:48 PM

Upon further inspection, I have got rid of the frames and put everything into one document. When I do this, the image swap effect works in Chrome but the background color still cannot be modified.

This is what my code looks like when I get rid of the frames:

Image swap:

<a onclick="document.logo.src=img1; return false" onmouseover="temp=img1; img1=img2; img2=img3; img3=temp; document.the_image.src=img1; " href="#"><img border="0" name="the_image" src="http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/images/monkey.gif"></a>

Because this works, there must have been something wrong with the way I was trying to use DOM to access the image named "logo" when I had frames. I was trying to access it like this:

parent.navigation.document.logo.src=img1;

I'm trying to tell it to go to the parent, then find the frame named navigation, then find the document in that frame, then find the image named logo in that document, then swap img1 into its source. Is this wrong? This works in Firefox and Safari - is this not compatible with Chrome?

Background Color:

<a onclick="document.style.bgColor='#00FF00'; return false;" href="#">
<img src="http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/homework_controls_data/green.gif"></a>
<a onclick="document.style.bgColor='yellow'; return false;" href="#">
<img src="http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/homework_controls_data/yellow.gif"></a>

I have no clue why this color piece is not working even when I get rid of frames...