Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    26
    Thanks
    7
    Thanked 0 Times in 0 Posts

    javascript image hover problems

    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:-
    http://temp.yorkshirepc.co.uk
    Last edited by frogdog; 06-03-2009 at 06:54 PM.

  • #2
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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.

  • Users who have thanked venegal for this post:

    frogdog (06-03-2009)

  • #3
    New Coder
    Join Date
    May 2007
    Posts
    26
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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??
    Last edited by frogdog; 06-03-2009 at 07:33 PM.

  • #4
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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:
    Code:
    MM_swapImage('home','','/images/pcrepair2.jpg',1);
    then the <img> you want to be swapped has to have the id 'home'. E.g. like this:
    Code:
    <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.
    Last edited by venegal; 06-03-2009 at 07:42 PM.

  • #5
    New Coder
    Join Date
    May 2007
    Posts
    26
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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?

  • #6
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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.

  • Users who have thanked venegal for this post:

    frogdog (06-03-2009)

  • #7
    New Coder
    Join Date
    May 2007
    Posts
    26
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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
    - I HAVE TRIED PUTTING IN THE WIDTH, BUT THIS MESSES THE WHOLE MENU

    179 Same colors for color and background-color in two contexts .cell_over and #maintable
    - DON'T KNOW WHAT THE PROBLEM IS HERE


    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

  • #8
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •