View Full Version : javascript image hover problems

06-03-2009, 06:48 PM
hi everyone,

i'm trying to design my own site and so far i don't think i've done too bad, lol.

My problem is that i'm trying to create an image swap effect when i hover mouse on the services menu and as a test, i tried to create the swap effect just on "computer repair", but nothing happens.

Also w3c validator reports a few problems which i don't have a clue on how to fix.

Any advice or help would be most appreciated as i'm desperate to get this site up and running to replace the old one.

What have i done wrong?????

pls take a look here:-

06-03-2009, 07:15 PM
First of all, I cannot fathom how you are able not to have 'a clue on how to fix' those validation errors:

Line 9, Column 14: Attribute "onLoad" is not a valid attribute. Did you mean "onload"?

Hm, what could that tell us? Maybe rename "onLoad" to "onload"?

Line 10, Column 18: Attribute "language" exists, but can not be used for this element.

Very cryptic. Delete the language attribute, as it's deprecated.

Now to the Javascript:

1.) You have a call to gradualFader.init() in the end, which is nowhere to be found in your scripts.

2.) Don't use those Macromedia functions. Nobody likes them.

3.) If you really want to use them, call them correctly. First parameter has to be the id of the <img> to be swapped. You call them with an id of 'home', which is nowhere to be found in your html.

06-03-2009, 07:28 PM
ahh thanks v.much...sorry for being slow but i'm trying to learn as quick as possible.....

so the letters are case-sensitive or lower case?

i have removed the "language", but do i need to replace it with anything else?

Regarding the javascript, i have removed the gradual fader.init, which was an old script that i don't use anymore.

What did you mean by the Macromedia functions?

Lastly after doing the above, the script still does not work...do i need to do something else?

The truth is that i simply copied this script from another site and tried to alter it to my needs. Can you recommend a new fresh script that simply swaps images on mouseover and then swaps them back on mouseout??

06-03-2009, 07:38 PM
case sensitivity: Most browsers will get what you mean, but officially XHTML is all lower case, and that's how you should write it.

language: No need to replace, you already got type="text/javascript" as a replacement in there, and not even that's necessary.

With Macromedia functions I mean that MM_something stuff that's real hard to read and that can be found in most of the worst web projects.

Looking at your site, you skipped the third point, which is the one responsible for your hover problems. If you want to call that swapping function like this:

then the <img> you want to be swapped has to have the id 'home'. E.g. like this:

<img id="home" src="images/pcrepair.jpg" width="150" height="100" alt="Computer Repair" longdesc="images/services1.jpg"/>

Though I'd recommend using some other id, as 'home' doesn't fit very well here.

Edit: Sorry, I can't recommend another script, as I'd just write that stuff myself. But what I can recommend is not using Javascript for that at all and instead do it with CSS.

06-03-2009, 07:40 PM
mate if u think macromedia function is no good, then i'd rather delete the js coding now and start again....hopefully with a bit of help it shouldn't take me too long.

What script or method do u recommend to have a swap/rollover effect?

06-03-2009, 07:48 PM
As mentioned in the edit above (a little too late), doing it with CSS (pseudo-class :hover) is quite clean. Those images would have to be links though in order for the hover to work in older browsers (IE6).

If you really want to do it in Javascript, something like jQuery probably won't be a mistake.
See here (http://code.google.com/p/jquery-swapimage/).

06-03-2009, 11:08 PM
many thanks for your help venegal. Unfortunately, being a noob, i didn't have a clue how to get the javascript working. So instead i added this to each image:-

<img src="images/pcrepair.jpg" onmouseover="this.src='images/pcrepair2.jpg'" onmouseout="this.src='images/pcrepair.jpg'"

The main thing is that the page passed on the w3c validator.

The only snag i have left is that although the w3c CSS validator passes with no errors, it does give 2 warnings:-

Warnings (2)
URI : http://temp.yorkshirepc.co.uk/default.css
149 .solidblockmenu li a In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected

179 Same colors for color and background-color in two contexts .cell_over and #maintable

I can't figure out how to fix these, so if u could help me on this, then i'd much appreciate it.

thanks again

06-03-2009, 11:54 PM
Well, those are just warnings, and as such you can ignore them if you like.

But in order for you to be able to make an informed decision, I'll explain those warnings to you:

1.) Floats without widths can show erratic behaviour in older browsers, i.e. they may take on a width of 100% and thus render the float useless. I tried to test if that also applies to IE6, but your site has stopped working.

2.) This one means that there are two style declarations where the color of one of them is the same as the background-color of the other. That generates a warning, because since those two might overlap on the screen, some text might not be visible. Since the CSS validator only looks at the CSS and not at the whole site, it has no way of knowing if those two will actually overlap anywhere, of course. It's not necessary to fix this, but it can easily be done by making sure that every selector declaring a color also declares a background-color.