ben3001 Posted March 10, 2006 Share Posted March 10, 2006 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 More sharing options...
scott100 Posted March 10, 2006 Share Posted March 10, 2006 on my site i saw a javascript on w3schools but it only seemed to work for one image and i need to do it for 12, got any ideas<{POST_SNAPBACK}> Can you provide a link to the javascript that you saw and we can have a look.You questions sounds straightforward enough after that Link to comment Share on other sites More sharing options...
ben3001 Posted March 10, 2006 Author Share Posted March 10, 2006 this is the try editor http://www.w3schools.com/js/tryit.asp?file...tryjs_animation Can you provide a link to the javascript that you saw and we can have a look.You questions sounds straightforward enough after that <{POST_SNAPBACK}> Link to comment Share on other sites More sharing options...
scott100 Posted March 10, 2006 Share Posted March 10, 2006 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 More sharing options...
ben3001 Posted March 10, 2006 Author Share Posted March 10, 2006 scott your a diamond http://medussa.atspace.com/links/calendar.htm its excellent thanks Link to comment Share on other sites More sharing options...
scott100 Posted March 10, 2006 Share Posted March 10, 2006 No problem, glad to see you got it working.Good job Link to comment Share on other sites More sharing options...
Nudua Posted March 10, 2006 Share Posted March 10, 2006 Is it possible to do the same with CSS? Link to comment Share on other sites More sharing options...
scott100 Posted March 10, 2006 Share Posted March 10, 2006 Is it possible to do the same with CSS?<{POST_SNAPBACK}> 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now