Results 1 to 3 of 3

Thread: Glittering links on mouse over

  1. #1
    Join Date
    Dec 2011
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Glittering links on mouse over

    Hello

    I need a script,

    On moving my mouse on a link or button, it should glitter or shine..

    thanks

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    That's not literally possible. How would you like to simulate it? Change color or flash between colors? Underline? Become bigger? Have some sort of "glow" around them (by using a different background color)?

    The simplest version would be to have the :hover pseudoclass in CSS to change any basic text properties. But that will only work for <a> tags and may not be enough for what you want.

    And if you want animation (or more control) you'll need to do it with Javascript. I think there are some scripts around that are similar to what you're looking for, but give us more information if you can't what you want specifically.

    The only way to make this truly look like it is made of "glitter" or for it shine would be to use an animated image, I think. Flash could do this, or you could use an animated gif. But that gets a little more complicated than just JS or CSS.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Mar 2011
    Posts
    2,025
    Thanks
    59
    Thanked 107 Times in 105 Posts
    Blog Entries
    4

    Default

    I completly agree with Daniel. I'm just adding an example of a glow effect incase thats what you want.

    This will work with all the major browsers except IE (Internet Explorer)

    Code:
    <html>
    <head>
    <style type="text/css">
    #text 
    {
    font-size:30px;
    }
    </style>
    </head>
    <body>
    <a href="" id="text" onmouseover="this.style.textShadow='0 0 10px Red'" onmouseout="this.style.textShadow=''">Hover Me</a>
    </body>
    </html>

Bookmarks

Posting Permissions

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