main
side
curve
  1. In Memory of LAJ_FETT: Please share your remembrances and condolences HERE

Onmouseover javascript

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

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

    Raef_Wolfe Jedi Padawan star 4

    Registered:
    Jul 12, 2003
    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
     
    Raef_Wolfe, Dec 29, 2003
    #1
  2. dark42

    dark42 Jedi Youngling star 3

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

    This what you want?
     
    dark42, Dec 29, 2003
    #2
  3. Raef_Wolfe

    Raef_Wolfe Jedi Padawan star 4

    Registered:
    Jul 12, 2003
    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.
     
    Raef_Wolfe, Dec 29, 2003
    #3
  4. Daughter_Of_TheForce

    Daughter_Of_TheForce Jedi Padawan star 4

    Registered:
    Sep 1, 2001
    If you post the code, maybe we can help you better. :)
     
    Daughter_Of_TheForce, Dec 29, 2003
    #4
  5. Raef_Wolfe

    Raef_Wolfe Jedi Padawan star 4

    Registered:
    Jul 12, 2003
    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.
     
    Raef_Wolfe, Dec 29, 2003
    #5
  6. Daughter_Of_TheForce

    Daughter_Of_TheForce Jedi Padawan star 4

    Registered:
    Sep 1, 2001
    Is this for an image flip?
     
    Daughter_Of_TheForce, Dec 29, 2003
    #6
  7. Raef_Wolfe

    Raef_Wolfe Jedi Padawan star 4

    Registered:
    Jul 12, 2003
    Er...not sure what you mean. When the mouse isaway, it;s one thing. When the mouse is over it, it's another.
     
    Raef_Wolfe, Dec 29, 2003
    #7
  8. Daughter_Of_TheForce

    Daughter_Of_TheForce Jedi Padawan star 4

    Registered:
    Sep 1, 2001
    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?
     
    Daughter_Of_TheForce, Dec 29, 2003
    #8
  9. Raef_Wolfe

    Raef_Wolfe Jedi Padawan star 4

    Registered:
    Jul 12, 2003
    Yep, that's what I want.
     
    Raef_Wolfe, Dec 30, 2003
    #9
  10. Daughter_Of_TheForce

    Daughter_Of_TheForce Jedi Padawan star 4

    Registered:
    Sep 1, 2001
    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?
     
    Daughter_Of_TheForce, Dec 30, 2003
    #10
  11. Raef_Wolfe

    Raef_Wolfe Jedi Padawan star 4

    Registered:
    Jul 12, 2003
    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
     
    Raef_Wolfe, Dec 30, 2003
    #11
  12. Daughter_Of_TheForce

    Daughter_Of_TheForce Jedi Padawan star 4

    Registered:
    Sep 1, 2001
    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
     
    Daughter_Of_TheForce, Dec 30, 2003
    #12
Thread Status:
Not open for further replies.