36 users online (1 members and 35 guests)  


Page 1 of 2 1 2 Last
  Results 1 to 15 of 17
  1. #1
    allstarr
    allstarr's Avatar
    Guest

    Post I need to know...

    ...mousover. I don't know if I'll use it, but I just need know how to make the link change a different color when I got over it, and make it underlined. And also, how do I make it change colors and make it un-underlined if I already made it underlined? And, how would I make it bold. Please tell me how to do these three things, if you will.

  2. #2
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662

    Talking

    Don't need mouseover, u need css.

    This does not work in NS, because the definitions are pseudo-classes and NS don't like 'em.

    Paste this between <head> and </head>

    <style type="text/css">
    <!--
    A:link: { text-decoration: underline; color: #FFC889; }
    A:active: { text-decoration: underline; color: #FFC889; }
    A:visited: { text-decoration: underline; color: #FFC889; }
    A:hover: { text-decoration: none; color: white; }
    -->
    </style>

    Its pretty self explanatory. Colours, easy.The text-decoration values can be:

    none, underline, overline, line-through and also blink (which only works in NS, therefore will not work in these pseudos.Doh!)

    Just change to suit.

    PS to make bold etc the line would look like this:

    A:link: { text-decoration: underline; color: #FFC889; font-weight: bold }

    you can have bold, bolder, normal or lighter, or you can use 100, 200, 300 etc

    ------------------
    QuietDean-

  3. #3
    allstarr
    allstarr's Avatar
    Guest

    Post

    Ok. This is going to get into a little javascript. How do you make it so when your mouse "hovers" over a button it goes down. Is it like creating another image when it goes over it? And how do you make it so when you click on it, it goes down and then back up again? Is it like creating another image on the active link?

  4. #4
    PHPboy's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Jun 2001
    Location
    Australia
    Posts
    29

    Post

    I don't see how that is possible. You could make two graphics that looked like a button up & a button down, then do this......

    <script>
    <!--

    // preload the image
    butdown = new Image
    butdown.src = "path/to/pic";

    // onMouse Hover

    function down(){
    document.buttonpic.src = "/path/to/down/pic";
    return true;
    }

    function up(){
    document.buttonpic.src = "/path/to/up/pic";
    return true;
    }

    -->
    </script>

    <img src="/path/to/up/pic" name="buttonpic" onMouseOver="javascript:down();" onMouseOut="javascript:up():">

    And there you have it. Put it in between your <BODY> tags.

  5. #5
    allstarr
    allstarr's Avatar
    Guest

    Post

    Ok. Lets make this sound a little simpler, I can't get it to work. SO...How do I make it so when the mouse goes over a button, the button kind goes down like it's being pressed, and when the mouse doesn't hover over it, it comes back up?

  6. #6
    HTML's Avatar
    Administrator

    Status
    Offline
    Join Date
    Aug 2000
    Posts
    3,445

    Follow HTML On Twitter Add HTML on Facebook Add HTML on Google+ Add HTML on Linkedin Visit HTML's Youtube Channel

    Post

    Exactly as he told you above, it requires 2 unique images 1 for down 1 for up.

    Install the script exactly ass he said.

    change the path in every instance of path/to/ /pic

    to where ever your images are located.

    Dave

  7. #7
    allstarr
    allstarr's Avatar
    Guest

    Post

    Ok. I put the images in, but when I go over the image, the other one comes up, but when I move the mouse off it, it stays that same "hover" image, and the original image doesn't come back. Am I doing something wrong?

  8. #8
    HTML's Avatar
    Administrator

    Status
    Offline
    Join Date
    Aug 2000
    Posts
    3,445

    Follow HTML On Twitter Add HTML on Facebook Add HTML on Google+ Add HTML on Linkedin Visit HTML's Youtube Channel

    Post

    obviously something is wrong, being that I am not very good at ESP you will have to post the link to the page with the code.

    Dave

  9. #9
    allstarr
    allstarr's Avatar
    Guest

    Post

    Well, I will resort to that, but first maybe phpboy no's whats wrong. If he doesn't, I'll create a new page, because I'm doing it on my hard drive.

  10. #10
    HTML's Avatar
    Administrator

    Status
    Offline
    Join Date
    Aug 2000
    Posts
    3,445

    Follow HTML On Twitter Add HTML on Facebook Add HTML on Google+ Add HTML on Linkedin Visit HTML's Youtube Channel

    Post

    upload the source and provide the link, we are not god, we are human beings, we cannot guess what you have done

  11. #11
    allstarr
    allstarr's Avatar
    Guest

    Post

    Sorry. The buttons will not look like a real press-down yet, but they're to different arrow buttons. I've got a million pounds of homework to do, so I'm going to check a few things on this site, then I gotta get going. I'm pretty sure I can have it up tomorrow.

  12. #12
    allstarr
    allstarr's Avatar
    Guest

    Post

    Ok. Lets say we have an image that is the normal image. It is named
    2000.gif
    Now, the mouseover thing which makes it go up, the image name is
    20.gif
    Now, can you repeat that javascript code and put in the images where they would go so when I copy-and-paisted it and made the images, it would work? Please

  13. #13
    HTML's Avatar
    Administrator

    Status
    Offline
    Join Date
    Aug 2000
    Posts
    3,445

    Follow HTML On Twitter Add HTML on Facebook Add HTML on Google+ Add HTML on Linkedin Visit HTML's Youtube Channel

    Post

    This little tool will do it all for you.
    http://www.mobw.net/

  14. #14
    allstarr
    allstarr's Avatar
    Guest

    Post

    I can't get the program to work. I can't get it to copy and paste once I get the code. And here's my code for his thing, phpboy, tell me what I'm doing wrong(I do have the pictures named "blah" and "blah2" :

    <html>

    <head>

    </head>

    <body bgcolor="green">

    <script>
    <!--

    // preload the image
    butdown = new Image
    butdown.src = "C:\My Documents\blah.jpg";

    // onMouse Hover

    function down(){
    document.buttonpic.src = "C:\My Documents\blah2.jpg";
    return true;
    }

    function up(){
    document.buttonpic.src = "C:\My Documents\blah.jpg";
    return true;
    }

    -->
    </script>

    <img src="C:\My Documents\blah.jpg" name="buttonpic" onMouseOver="javascript:down();" onMouseOut="javascript:up():">

    </body>

    </html>


  15. #15
    allstarr
    allstarr's Avatar
    Guest

    Post

    ---I'm trying to use this code for a mouseover code thing that'll change the colors for my college cl*** I'm taking (even though I know everything in it) I didn't think I would, and it's required on the final project to have a mousover thing, not just style sheets. He taught us how to slice images using adobe photoshop, but I think that takes to long.



Page 1 of 2 1 2 Last