CSS On Click and Mouse Overs

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

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

 

If you would not mind terribly, would you be willing to share this new technique of yours?

 

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.

 

onClick is JavaScript.

 

IE only supports :hover for <a> though.

 

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.

 

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

 

Yes actually. I've never been to Karney, but my step-sister even went to UNK before the families combined.

 

"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.

 

Yes so far I have found that it does not work in browsers more than 2 years old.

 

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

 

If your IE6 browser has the latest updates it works if you are using the version that comes straight from the download then no

 

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: