Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Javascript!help Me!!! :(

Options
  • 28-11-2006 10:48pm
    #1
    Closed Accounts Posts: 73 ✭✭


    Hello all,me again!

    The HTML nOOb strikes back!

    ok lads,this time I'm having problems with adding java script to my code!
    Basically,I'm trying to do rollover images!!

    for a start,I've been taking my examples and learing from this site/page:
    http://www.htmlcodetutorial.com/images/images_famsupp_59.html

    I've copied the main script that they show on the first page,and I've put it just below the <HTML> tag at the start,this is fine,but then at the very bottom of the page(kept within the </body> and </html> )

    I used this at the top of my page:
    <SCRIPT TYPE="text/javascript">
    <!--
    // copyright 1999 Idocs, Inc. http://www.idocs.com/tags/
    // Distribute this script freely, but please keep this
    // notice with the code.

    var rollOverArr=new Array();
    function setrollover(OverImgSrc,pageImageName)
    {
    if (! document.images)return;
    if (pageImageName == null)
    pageImageName = document.images[document.images.length-1].name;
    rollOverArr[pageImageName]=new Object;
    rollOverArr[pageImageName].overImg = new Image;
    rollOverArr[pageImageName].overImg.src=OverImgSrc;
    }

    function rollover(pageImageName)
    {
    if (! document.images)return;
    if (! rollOverArr[pageImageName])return;
    if (! rollOverArr[pageImageName].outImg)
    {
    rollOverArr[pageImageName].outImg = new Image;
    rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
    }
    document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
    }

    function rollout(pageImageName)
    {
    if (! document.images)return;
    if (! rollOverArr[pageImageName])return;
    document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
    }
    //-->
    </SCRIPT>




    And then I used this as my image for the rollover:
    <A
    HREF="http://www.konami.com&quot; //I don't understand this line!!
    onMouseOver = "rollover('otacon')"
    onMouseOut = "rollout('otacon')"
    ><IMG
    SRC="images/miniotacon2.jpg"
    NAME="otacon"
    ALT="Home Page" BORDER=0
    ></A>
    <SCRIPT TYPE="text/javascript">
    <!--
    setrollover("images/miniotacon.jpg");
    //-->
    </SCRIPT>


    anyway,if anyone has bothered with helping me with this,when I put this stuff in,my whole page just vanishes!!I can get it back by deleting from <script...etc... to </script> but that just leaves me with an image and no rollover!!

    HELP YOU GUYS!!IM DYIN HERE!!! :P



    Paul


Comments

  • Registered Users Posts: 21,257 ✭✭✭✭Eoin


    Ok first of all, this part:
    <A
    HREF="http://www.konami.com" //I don't understand this line!!
    onMouseOver = "rollover('otacon')"
    onMouseOut = "rollout('otacon')"
    >
    

    is telling the browser to go to that address when the image is clicked. Do you want something to happen when the images are clicked, or do you just want them to rollover?

    Edit: I just tested the following in IE and FF, and it works. It nearly seems too simple for it to be correct syntax though?
    <img 
    src="Mail.gif" id="email" alt="Email" 
    onmouseover="this.src='<Image to appear when mouse is over it>' " 
    onmouseout="this.src='<Original Image FileName>' "
    />
    


  • Closed Accounts Posts: 73 ✭✭boss^is^dead


    hey there!

    ok I tried the second one


    <img
    src="images/miniotacon.jpg" id="email" alt="Email"
    onmouseover="this.src='<images/miniotacon2.jpg>' "
    onmouseout="this.src='<images/miniotacon.jpg>' "
    />
    just like this,bit it didn't work!It had the image in ther alright but when I go over it with the mouse it just gives the little "picture error" cross!
    It's like it knows how to execute the command but can't find the second picture maybe???

    I dunno,I've done it right as it is above and all filenames and paths are correct!

    Do you have any other script to help aid this in your whole code tho?

    What do you make of the first example in my above post?Do I need to put that in???

    Thanks a lot!!

    Paul


  • Registered Users Posts: 21,257 ✭✭✭✭Eoin


    hey there!

    ok I tried the second one


    <img
    src="images/miniotacon.jpg" id="email" alt="Email"
    onmouseover="this.src='<images/miniotacon2.jpg>' "
    onmouseout="this.src='<images/miniotacon.jpg>' "
    />
    just like this,bit it didn't work!It had the image in ther alright but when I go over it with the mouse it just gives the little "picture error" cross!
    It's like it knows how to execute the command but can't find the second picture maybe???

    I dunno,I've done it right as it is above and all filenames and paths are correct!

    Do you have any other script to help aid this in your whole code tho?

    What do you make of the first example in my above post?Do I need to put that in???

    Thanks a lot!!

    Paul


    Paul,

    The <> brackets just meant to indicate that you should replace what's inside them with the correct value, and not actually include them in your source. Sorry I didn't make that clear.

    Try this:

    <img
    src="images/miniotacon.jpg" id="email" alt="Email"
    onmouseover="this.src='images/miniotacon2.jpg' "
    onmouseout="this.src='images/miniotacon.jpg' "
    />


  • Closed Accounts Posts: 73 ✭✭boss^is^dead


    joy to the world!!

    I'd buy you a pint if only I knew who you were!!!
    You a ledge eoin!!


    Paul!! :D:D


    oh by the way...it worked!! :P


  • Registered Users Posts: 21,257 ✭✭✭✭Eoin


    joy to the world!!

    I'd buy you a pint if only I knew who you were!!!
    You a ledge eoin!!


    Paul!! :D:D


    oh by the way...it worked!! :P

    You can post it to me :)


  • Advertisement
Advertisement