1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS On Click and Mouse Overs

Discussion in 'CSS' started by minnseoelite, Dec 14, 2006.

  1. #1
    After wasting 2 hours of my time searching and asking how to do image change onclick and mouseover effects using CSS in all the top 10 webmaster forums and dozens of websites only to get the same answer over and over again that this required javascript (I hate javabloat) because of it being handled client side I took my little and I mean little knowledge of CSS and HTML sat back in my chair and after 20 minutes of pondering figured out how to make it work using only CSS and basic HTML. So for everyone that might have answered my questions about this in other forums telling me that it could not be done and to stop trying to make things up :p

    I have found my method provides me the same exact functionality as using the javascript method. Now if I could only figure out how to do the same with sound effects :rolleyes:
     
    minnseoelite, Dec 14, 2006 IP
  2. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #2
    If you would not mind terribly, would you be willing to share this new technique of yours?
     
    Josh Inno, Dec 14, 2006 IP
  3. danielbruzual

    danielbruzual Active Member

    Messages:
    906
    Likes Received:
    57
    Best Answers:
    0
    Trophy Points:
    70
    #3
    Hi, I wasn't aware that you could create On-Click effects with CSS, would you mind sharing how you managed to do it?

    As far as the Mouse-Over effect, it can be achieved with the :hover property and works with almost every html element.
     
    danielbruzual, Dec 14, 2006 IP
  4. dp-user-1

    dp-user-1 Well-Known Member

    Messages:
    794
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    110
    #4
    onClick is JavaScript.
     
    dp-user-1, Dec 14, 2006 IP
  5. glorie

    glorie Peon

    Messages:
    123
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    IE only supports :hover for <a> though.
     
    glorie, Dec 14, 2006 IP
  6. minnseoelite

    minnseoelite Peon

    Messages:
    845
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Thats what they all said lol but I figured out how to do it with images. I dont think the CSS is valid for it though not sure so if you are one that is picky about creating valid CSS style sheets this might not be for you. If you combine it with the hover effect you can essentially create a series of 3 images.
     
    minnseoelite, Dec 14, 2006 IP
  7. minnseoelite

    minnseoelite Peon

    Messages:
    845
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Are you from Nebraska btw just wondering I grew up there in Kearney. Just noticed your sig links. I will share my technique when the time comes I want to test in in as many browsers and IE versions as I can first right now I know it works in IE7 and FF 2.0
     
    minnseoelite, Dec 14, 2006 IP
  8. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Yes actually. I've never been to Karney, but my step-sister even went to UNK before the families combined.
     
    Josh Inno, Dec 15, 2006 IP
  9. AdamSee

    AdamSee Well-Known Member

    Messages:
    422
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    135
    #9
    "focus and active states, which by definition allow keyboard events and are the CSS equivalent of an onclick event are not supported properly by some browsers"

    It won't work in a lot of browsers, especially older IE ones.
     
    AdamSee, Dec 16, 2006 IP
  10. minnseoelite

    minnseoelite Peon

    Messages:
    845
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #10

    Yes so far I have found that it does not work in browsers more than 2 years old.
     
    minnseoelite, Dec 16, 2006 IP
  11. Lichurec

    Lichurec Peon

    Messages:
    61
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #11
    So that includes IE 6 - "web browser" that is currently used by most of web users (from ~60% to ~90% - depending on where and by whom it's counted)

    Just have a look at Browsers timeline
     
    Lichurec, Dec 16, 2006 IP
  12. minnseoelite

    minnseoelite Peon

    Messages:
    845
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #12
    If your IE6 browser has the latest updates it works if you are using the version that comes straight from the download then no
     
    minnseoelite, Dec 17, 2006 IP
  13. Hallwed

    Hallwed Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Since this pulled up for me when I tried to search for real information, I figured an update should be included especially since all that really occurred here was some guy gloating that he figured something out, and not sharing any real information with anyone.

    Here is what currently works in CSS:

    boarderstyle
    {
        border-color:lime;
        border-style:ridge;
    }
    boarderstyle:hover
    {
        border-color:lime;
        border-style:dotted;
    }
    boarderstyle:active
    {
        border-color:lime;
        border-style:dashed;
    }
    Code (markup):
    There are also active or on click or on mouse down for images that work, in the HTML img tag.

    For example:

     <img src="img1.png" border="0"
        onmouseover="this.src='img2.png'"
        onmouseout="this.src='img1.png'" 
     onmousedown="this.src='img3.png'">
    HTML:
     
    Hallwed, Feb 28, 2012 IP