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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2004
    Location
    Australia
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Mouse over image change script not working

    Last night I was using a nifty script from the netguide.com.au coding section of their magazine, which is meant to change one picture to another when you put your mouse over it (and linked at the same time. Their example was a green button and purple, weith the green transforming to th epurple when the mouse was put over it, and then you could click it to goto their site: netguide.com.au.

    Anyway I tried it and it juset wouldn't work. Most times it would say there's a java error, "o" is not defined etc.

    Here is the script/coding I used(do you call it script for java and coding for like html etc?).

    <html>

    <HEAD>

    <script language ="JavaSCript"> <!--
    function swapImage(id, image){document.imaged[id].src=image;}
    //-->
    </script>

    <title>Mouse over image event, linked to netguide</title>

    </HEAD>

    <body>

    <a href="http://www.netguide.com.au" onMouseOver="swapImage(o,'Wreath.gif')"
    onMouseOut= "swapImage(o,'Mailbox.gif')">
    <img src= "mailbox.gif" border ='o'>
    </a>

    </body>

    </html>

    What I'm alseo very confused is at the start and end of the document do you use the <html> </html> flags, even if you ptu javascript and no html inside? Or you put both eveN? Because I don't really know, I did try suplementing java inside the tags, but being such a novice javascript designer, iwas left clueless.

    All help appreciated

    Cordially,
    Crystal Cloud/[WT}

    "Happiness makes up in height, for what it lacks in length"- Robert Frost

    Confucius says: Man who drops watch in toilet has s***ty time


    Today's Joke: As a senior citizen was driving down the freeway, his car phone rang. Answering, he heard his wife's voice urgently warning him, "Herman, I just heard on the news that there's a car going the wrong way on 280. Please be careful!" "Hell," said Herman, "It's not just one car. It's hundreds of them!"

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    1. ){document.image[color=red]d[/color[id].src=image;}

    must be

    ){document.image[id].src=image;}

    2. a string must have " " or ' '

    onMouseOver="swapImage('o','Wreath.gif')"
    onMouseOut= "swapImage('o','Mailbox.gif')">

    3. that o has to be an id or a name not a border , so:

    <img name = 'o' src= "mailbox.gif" border =0>


    These are the mistakes I saw so far...

    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    sorry, some wrong vB code, so here's my answer:

    1. ){document.imaged[id].src=image;}

    must be

    ){document.image[id].src=image;}

    2. a string must have " " or ' '

    onMouseOver="swapImage('o','Wreath.gif')"
    onMouseOut= "swapImage('o','Mailbox.gif')">

    3. that o has to be an id or a name not a border (by the way, o is not the same with 0) , so:

    <img name = 'o' src= "mailbox.gif" border =0>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    New to the CF scene
    Join Date
    Jan 2004
    Location
    Australia
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for all the help, it was really appreciated. However, I'm quite new to the world of web design + programming, so could you explain what part of the code that I pasted is a string?

    Also you said wrong vB coding, you mean visual basic right? If not what? I just was wondering how visual basic is related to this, unless vB doesn't stand for that *embarrassed look*.

    Anyway it's still not working, no errors, but upon opening it in the browser it shows me the mailbox gif and that it is linked(it's also animated one, is it because it's an animated gif it's not working?) and tha'ts all. Moving the mouse over it does not chang eit, in fact it should be changing from wreath to mailbox, therefore the wreath should be showing first.

    I'm really blown out of ideas, especially being so new to this sort of thing, I have no previous experience to implement to change the coding. Anyway this is all of my script so far, please help me with any help you have!

    <html>

    <HEAD>

    <script language ="JavaSCript"> <!--
    function swapImage(id, image){document.image[id].src=image;}
    //-->
    </script>

    <title>Mouse over image event, linked to netguide</title>

    </HEAD>

    <body>

    <a href="http://www.netguide.com.au" onMouseOver="swapImage('o','Wreath.gif')"
    onMouseOut= "swapImage('o','Mailbox.gif')">
    <img name='o' src= "mailbox.gif" border =0>
    </a>

    </body>

    </html>
    Cordially,
    Crystal Cloud/[WT}

    "Happiness makes up in height, for what it lacks in length"- Robert Frost

    Confucius says: Man who drops watch in toilet has s***ty time


    Today's Joke: As a senior citizen was driving down the freeway, his car phone rang. Answering, he heard his wife's voice urgently warning him, "Herman, I just heard on the news that there's a car going the wrong way on 280. Please be careful!" "Hell," said Herman, "It's not just one car. It's hundreds of them!"

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    PHP Code:
    <html>

    <
    HEAD>

    <
    script language ="JavaSCript"> <!--
    function 
    swapImage(idimage){document.images[id].src=image;}
    //-->
    </script>

    <title>Mouse over image event, linked to netguide</title>

    </HEAD>

    <body>

    <a href="http://www.netguide.com.au" onMouseOver="swapImage('o','wreath.gif')"
    onMouseOut= "swapImage('o','mailbox.gif')">
    <img name='o' src= "mailbox.gif" border =0>
    </a>

    </body>

    </html> 
    Now it should work.

    1. The correct syntax to refere to an image on the page is

    document.images[name_or_order].src

    2. Avoid using upper case in HTML and the pictures name. Better mailbox.gif than Mailbox.gif. By the way, here was another mistake, in the old code you have once with once without Upper case the picture's url+name. Make up your mind which version you want and make sure that the file is written the same way you have located in html/javascript code.

    OK, Now beware that your code, as it is, need two pictures with the same size.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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