Image Change onmouseover????

Hi All,

I want to change image onmouseover event with only CSS. I don't want to use JavaScript. I coded as:

<style type="text/css">
A.change IMG
{
SRC: "image1.jpg"
}
A.change:hover IMG
{
SRC: "image2.jpg"
}
</style>

<a href="#" class="change"><img src="image1.jpg"></a>

But above coding is not working can anybody please help me to solve out this problem????

 

Is there anyone who can help me??????

 

Yup, it's very common. You already have the images you want?

like this:

a {
set all your normal a styles here and...
background: url(nameoffile.gif) 0 0 no-repeat;
}

a:hover {
background-image: url(nameofotherfile.gif);
}

Now, in your case it might not be "a" since you likely only want certain a's to have it, like in a menu. So if your menu was like this:

<ul>
<li><a href="#">blah</a></li>
<li><a href="#">blah</a></li>
<li><a href="#">blah</a></li>
<li><a href="#">blah</a></li>
</ul>

Then it would be more like
ul li a {
normal styles;
}
ul li a:hover {
hover styles;
}

There are other ways to do this and better ways of image management but you'll get to those later when you have a better grasp of CSS.

Good luck.

 

your using properties and syntax that are not recognized by css.

<style type="text/css">
A.change IMG /*this is looking for an img tag in your html inside an <a> with the calss of change such as <a href="blah" class="change"><img></img></a>*/
{
SRC: "image1.jpg" /*there is no SRC: property in css, and the syntax for css is as follows property:value;*/
}
A.change:hover IMG /*same as above*/
{
SRC: "image2.jpg"
}
</style>

Code (markup):

the correct styling for this would be.

<style type="text/css">
A.change
{
background:url('image1.jpg') 0 0 no-repeat;
}
A.change:hover
{
background:url('image2.jpg') 0 0 no-repeat;
}
</style>

Code (markup):

at least, thats what i would try. im not an expert, so it may not be 100% correct.

 

Thanks for solution!

 

no problem just glad it worked for you