Jump to content

Hover over buttons


ben3001
 Share

Recommended Posts

on my site http://medussa.atspace.com/links/calendar.htmi want it so that when you hover over the months it changes to a different picture, and when its selected stays on that picture, if i make sensei saw a javascript on w3schools but it only seemed to work for one image and i need to do it for 12, got any ideasthanks in advance

Link to comment
Share on other sites

Here are 3 to get you going:

<img onmouseover="this.src='http://www.w3schools.com/js/b_pink.gif'" onmouseout="this.src='http://www.w3schools.com/js/b_blue.gif'" border="0" alt="Visit W3Schools!" src="http://www.w3schools.com/js/b_blue.gif" width="26" height="26" /></a><br /><br /><img onmouseover="this.src='http://pics.ebaystatic.com/aw/pics/uk/logos/logoEbay_150x70.gif'" onmouseout="this.src='http://www.google.co.uk/intl/en_uk/images/logo.gif'" border="0" alt="Visit W3Schools!" src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="100" height="100" /></a><br /><br /><img onmouseover="this.src='http://www.w3schools.com/images/logo_new2.jpg'" onmouseout="this.src='http://www.w3schools.com/images/w3default80.jpg'" border="0" alt="Visit W3Schools!" src="http://www.w3schools.com/images/w3default80.jpg" width="100" height="100" /></a>

Link to comment
Share on other sites

Is it possible to do the same with CSS?

Yes, i took me a while but i figured it out, seems so easy looking at it now :) if you use the anchor tag then you have access to the Pseudo-classes ie hover, use these to change the background of the anchor tag. I have done 2 examples on the same page so that you can see how it works.phew :)
<html><head><style type="text/css">a.one:link {background:url('http://pics.ebaystatic.com/aw/pics/uk/logos/logoEbay_150x70.gif') no-repeat fixed }a.one:visited {background:url('http://pics.ebaystatic.com/aw/pics/uk/logos/logoEbay_150x70.gif') no-repeat fixed }a.one:hover {background:url('http://www.google.co.uk/intl/en_uk/images/logo.gif') no-repeat fixed }a.one:active {background:url('http://www.google.co.uk/intl/en_uk/images/logo.gif') no-repeat fixed}a.two:link {background:url('http://www.w3schools.com/images/logo_new2.jpg') no-repeat fixed }a.two:visited {background:url('http://www.w3schools.com/images/logo_new2.jpg') no-repeat fixed }a.two:hover {background:url('http://w3schools.invisionzone.com/style_images/w3sbanner.gif') no-repeat fixed }a.two:active {background:url('http://w3schools.invisionzone.com/style_images/w3sbanner.gif') no-repeat fixed}</style></head><body><a class="one" href="#" target="_blank" style="height:110px;width:300px"></a><a class="two" href="#" target="_blank" style="height:110px;width:300px"></a></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...