Onmouseover javascript

Discussion in 'Fan Sites' started by Raef_Wolfe, Dec 29, 2003.

Thread Status:
Not open for further replies.
  1. Raef_Wolfe Jedi Master

    Member Since:
    Jul 12, 2003
    star 4
    I've been trying to get it to work, but I'm nearly given up. Can someone supply me with a code and tell em how to do it? I've looked on google but don't understand what they're saying :p
  2. dark42 Jedi Knight

    Member Since:
    May 16, 2002
    star 3
    <a href="#" onmouseover="do something" onmouseout="do something else">put your mouse here and something happens</a>

    This what you want?
  3. Raef_Wolfe Jedi Master

    Member Since:
    Jul 12, 2003
    star 4
    Um..lemme try, but I also want the picture to be a link, and with the # it's not a link.

    Nope, didn't work.
  4. Daughter_Of_TheForce Jedi Master

    Member Since:
    Sep 1, 2001
    star 4
    If you post the code, maybe we can help you better. :)
  5. Raef_Wolfe Jedi Master

    Member Since:
    Jul 12, 2003
    star 4
    That's one of the problems. I've seen about 6 or 7 different codes for it. I don't know which, if any, of them work.
  6. Daughter_Of_TheForce Jedi Master

    Member Since:
    Sep 1, 2001
    star 4
  7. Raef_Wolfe Jedi Master

    Member Since:
    Jul 12, 2003
    star 4
    Er...not sure what you mean. When the mouse isaway, it;s one thing. When the mouse is over it, it's another.
  8. Daughter_Of_TheForce Jedi Master

    Member Since:
    Sep 1, 2001
    star 4
    Like on the menu side of my home page. You see just black type, but when you run your mouse over it, it turns red. Since not every one had the Braganza font on their computers, I made the black words and the red words into GIF images. The script flips between two images for each selection.

    Is that what you're looking to do?
  9. Raef_Wolfe Jedi Master

    Member Since:
    Jul 12, 2003
    star 4
    Yep, that's what I want.
  10. Daughter_Of_TheForce Jedi Master

    Member Since:
    Sep 1, 2001
    star 4
    It can get confusing. I'll use the script for my website:

    <script language="JavaScript">
    <!-- Begin


    This names the variables (images); note that the urls are for the second image (the one that comes up when the mouse is moved over it):

    var preload=new Image();
    preload1.src="/graphics/nav/red_home.gif";
    preload2.src="/graphics/nav/red_duel.gif";
    preload3.src="/graphics/nav/red_journal.gif";
    preload4.src="/graphics/nav/red_ff.gif";
    preload5.src="/graphics/nav/red_gallery.gif";
    preload6.src="/graphics/nav/red_rw.gif";
    preload7.src="/graphics/nav/red_links.gif";
    preload8.src="/graphics/nav/red_email.gif";
    preload9.src="signglow.gif";


    This is the function the variables are plugged into; don't change it unless you know what you're doing:

    function movepic(img_name,img_src) {
    document[img_name].src=img_src;
    }
    // End -->
    </script>


    The whole script goes between the <head> tags.

    Wherever you want the image flip to happen, you need to call the function, like this:

    <a href="index.html"
    onmouseover="movepic('button1','/graphics/nav/red_home.gif')"
    onmouseout="movepic('button1','/graphics/nav/_home.gif')">
    <img name="button1" src="/graphics/nav/_home.gif" alt="Home" border="0" width="71" height="30"></a>


    The href link is the page this is pointing to. The items in the parenthesis are what's being affected by the function. (Notice there are single quotes and not the double quotes you're used to seeing when you use urls.) The name=button1 links the initial image (the black letter image) with the onmouseover and onmouseout event handlers.

    There are probably better ways to do this, but this way I can understand what I'm doing. Does this make things a little clearer?
  11. Raef_Wolfe Jedi Master

    Member Since:
    Jul 12, 2003
    star 4
    Wow. What a mouthful.

    Furtunately for me (sorry about wasteing your time) I got some help and have a shorter code.




    <html>
    <head>
    <script language="JavaScript">
    <!--
    //
    //

    function change(picture) {
    document.theimg.src = picture
    }

    function change2(picture) {
    document.theimg2.src = picture
    }

    //-->
    </script>

    </head>

    <body>
    <a href="index.html"
    onMouseOver="change('test2.gif'"
    onMouseOut="change('test1.gif'">
    <IMG SRC="test1.gif" lowSRC="test2.gif" NAME="theimg" BORDER=0></a>

    </body>

    </html>


    end result:

    www.wereincreations.furtopia.org/test.html
  12. Daughter_Of_TheForce Jedi Master

    Member Since:
    Sep 1, 2001
    star 4
    No big deal. As long as you found what you were looking for. :)

    It just looks long because I lumped all the image flips on the page into one script. :p
Thread Status:
Not open for further replies.