Javascript rollovers

[alexanderdring]

Hi,

I have a problem with some javascript rollovers. I'm using the following function:

function titlechange(html){
javatitle.innerHTML=html
}

I then change the information using "javascript:change" on mouseover and mouseout.

The problem is that this does not work under Firefox. Is there a solution?

Thanks everyone!

 

[theniteowl]

Yes, there is a solution but we cannot tell you what it is without seeing your code.
What you posted is completely useless code as javatitle has not been declared as an object so you cannot possibly alter it's innerHTML. And your call "javascript:change" will not do anything because change is not a function. If it were change() it could be a function call but your function is shown as titlechange and requires a value for HTML.

While it is nice to have pared down code so we do not have to sift through tons of information for the little bit needed for the specific question it is impossible to help if the code shown is not accurate of the actual code in use.

Changing the innerHTML is not an effective rollover anyway as you are replacing the entire content of some object causing the page to have to reload the images which can cause a delay and a lot of flicker. Instead you want to change the src of the image tag.


It's hard to think outside the box when I'm trapped in a cubicle.

 

[alexanderdring]

Hi,

The address for the page is

http://www.espacefoot.fr/boutiques-espace-foot-france.php

It uses a database to call the data that is entered in the box when rolling over one of the footballs.

I would appreciate any help; I understand there is a simple way of keeping the information but changing the javascript.

Thanks!

 

[theniteowl]

Use the Firefox javascript console to show you errors on the page. It can be accessed under the Tools menu.
If you do not have it installed you can add it in.

Javascript Console reports that descript is not defined, meaning it does not know what description refers to in the line:
function change(html){
description.innerHTML=html
}

Instead try using:

function change(html){
  document.getElementById('description').innerHTML=html;
}

This ensures you have the reference to the object description so that you can work with it's properties.
The same goes for your titlechange and subtitlechange functions.


It's hard to think outside the box when I'm trapped in a cubicle.

 

[alexanderdring]

Thank you very much theniteowl! I'll try that now.

 

[alexanderdring]

Unfortunately this code now does not work under IE. Is there a fix for both browsers?

Thanks!

 

[theniteowl]

It works for me.

First you should not need to a detection for document.getElementById or document.all.
getElementById is a DOM method and is supported in IE and in Firefox and pretty much any reasonably newer browser as far as I know.
Simply using this:

function change(html){
  document.getElementById("description").innerHTML=html;
}

Should work in Firefox and IE without a problem.

I just loaded your page in both IE and in Firefox and both are working for me. You ARE getting some errors related to your CSS, apparently have a missing closing brace in your MMValidateForm function (or possibly one of the others but at a quick glance it looks like near the bottom there is no opening brace for the else statment but there IS a closing brace), and the titlechange function is not currently in the code so calls to it are causing javascript errors though those would not prevent it from working.

As a test I downloaded your page to try it locally.
I made it into a .htm as I do not have PHP support here at work.
I removed all of the javascript functions except for change() and I removed all of the object and embed tags since I did not have support for those.
The page tested fine locally in IE6 and in Firefox 1.5.0.3 both with and without your document.all and document.getElementById tests.

Again, getElmentById should already work cross-browser for you. You might be dealing with a cache issue where the non-working page is still displaying in your browser rather than the newly modified code.

If all else fails, simplify your code removing anything unnecessary during your tests then add them back in to see where it fails. It might be that the missing brace in a function is causing all of your javascript to fail on your end. You can narrow that down by removing the functions and seeing when it begins working again.


It's hard to think outside the box when I'm trapped in a cubicle.

 

[BillyRayPreachersSon]

Perhaps if you actually read theniteowl's posts, and acted on all of the information he gave you instead of selectively, you'd have working code.

The Firefox console still shows a whole load of errors that he has already explained how to fix.

- You are calling a function called "titlechange" when you do not have one. Your function is called "change". You should remedy this, as it causes numerous errors.

- You do not need the "javascript:" prefix in any onmouseout, onmouseover, or other "on" events. I suggest you remove this.

- You do not need to do IE detection in your change function. You simply need the code you were given above.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[alexanderdring]

Hello again everyone,

I appreciate your help but I'm still really struggling with this one for some reason. After some failed tests, I have reinstated niteowl's code for the main link and have totally dismantled the site on this test page:

http://www.espacefoot.fr/boutiques-espace-foot-france-test.php

I have removed all other javascript and everything that does not directly affect the rollover. In the error console, I see very little to suggest a problem and yet on my PC, running IE6, I keep getting a pop error saying that there is an unknown runtime error. On the other hand, Firefox and Safari are having no such trouble.

Am I missing something obvious?

Thanks again.

 

[theniteowl]

In your second Meta tag you have name=Description and that seems to be conflicting with the id=description for the div you write the data to.
Alter that Meta tags name to something unique and it works.


It's hard to think outside the box when I'm trapped in a cubicle.

 

[alexanderdring]

I think that solved it! Thanks so much for all your help. It's always the tiniest little thing that can cause so much trouble!

 

[theniteowl]

I was a bit surprised. I knew names and IDs had to be kept unique but did not think a name tag with an uppercase first letter would interfere with an ID tag with a lowercase first letter but...

Glad it worked.

It's hard to think outside the box when I'm trapped in a cubicle.

 

[BillyRayPreachersSon]

From the HTML 4.0 Specs (

http://www.w3.org/TR/html4/struct/links.html):

The id and name attributes share the same name space. This means that they cannot both define an anchor with the same name in the same document.

Presumably this goes for the use of both over all element types, given they share the same name space. Funny - I only found this a few days ago wihle browsing for something else!

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]