Hi. I have some code:
<div class="winter spring" onmousedown="this.className='winter summer'" onmouseup="this.className='winter spring'">
<img src="Resources/season.png" />
</div>
But it doesn't work. You can see I'm trying to change the class of the div containing season.png onmousedown and revert it onmouseup.
What am I missing?
Thanks. Mike
It's working just fine. There is nothing wrong with the code that you posted, so if you can't see it there has to be something wrong with your css.
I used this to test the code:
<html>
<head>
<title>Test</title>
<style>
.winter { border: 1px solid blue; }
.spring { background: yellow; }
.summer { background: green; }
</style>
</head>
<body>
<div class="winter spring" onmousedown="this.className='winter summer'" onmouseup="this.className='winter spring'">
<img src="Resources/season.png" />
</div>
</body>
</html>
It's very easy with jQuery:
$(".winter").mouseup(function() {
$(this).addClass("spring");
$(this).removeClass("summer");
},function(){
$(this).addClass("summer");
$(this).removeClass("spring");
});
It works for me so I guess you need to run some checks on your code. Make sure your css is included.
Post the complete code you are using so we can look for errors.
This is the code I used:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>onmouseevents on div</title>
<style type="text/css">
body
{
background-color: #FFF;
color: #000;
}
.page
{
margin: 10px auto;
width: 640px;
}
.winter
{
background-color: cyan;
}
.spring
{
color: magenta;
}
.summer
{
color: yellow;
}
</style>
</head>
<body>
<div class="page">
<div class="winter spring" onmousedown="this.className='winter summer'" onmouseup="this.className='winter spring'">
Cats!
</div>
</div>
</body>
</html>
<style>
.summer{ background-color:red;}
.spring{ background-color:blue;}
.aa{ font-size:18px;}
.bb{ font-size:36px;}
</style>
<div class="aa spring" onmousedown="this.className='summer aa'" onmouseup="this.className='spring bb'">
aaaaaaaaa
</div>
I test this code, it works well. I think, not javascript problem. Try to check css, or other things.
Maybe put js code and css code on the img is what you need.
As an alternative - I have used the hover pseudoselector for this.
Here's a personal example:
.sidebar ul.sidebuttons li a
{
font: bold italic x-large/1.1 trebuchet ms,verdana,sans-serif;
display: block; /* effect should be in a new box not inline */
text-decoration: none; /* turn off link underlining */
color: yellow;
background: black url(sidebar_off.png) no-repeat center;
padding: 10px 10px 10px 5px;
margin: 0px 0px 20px 0px;
border: white outset;
border-width: 2px 2px 2px 0px;
text-align: right;
text-transform: lowercase;
}
.sidebar ul.sidebuttons li a:hover
{
background: yellow url(sidebar_on.png) no-repeat center;
color: black;
border: black inset;
text-decoration: none;
border-width: 2px 2px 2px 0px;
}
The HTML looks like:
<div class="sidebar">
<ul class="sidebuttons">
<li><a href="somelink.html" title="A linke">Go Somewhere</a></li>
If you're having trouble, try Firefox Web Developer add-on or something similar to check the style information on that part of the page. It might not be triggering what you think it should be triggering.
The Javascript file I was using was a very inflexible library. I solved the problem a different way.