Saved Bookmarks
| 1. |
Solve : CSS help? |
|
Answer» I am looking to see how to make my own Rowlover Iamges for my web page and NEED some help. What I want is to have my image change wen a Mouse goes over it I have 2. diferant images.CSS can't do that. You'll need JS. See here: http://www.w3schools.com/js/js_animation.aspLmao the guy in that website describes rollover as an alias for :hover. Quote from: kpac on March 01, 2010, 02:22:31 PM CSS can't do that. You'll need JS. Yes it can. Code: [Select]<html> <head> <title>My Rollover Page</title> <style type="text/css"> #rollovernews{background:url("button.png") bottom;display:block;height:32px;width:128px;} #rollovernews:hover{background-position:top;} </style> </head> <body> <DIV> <a id="rollovernews" href="http://www.domain.com"></a> </div> </body> </html> button.png: I was too lazy to make a "generic" button, but the idea here is to simply "shift" the image, which contains both the active and inactive image. This solves two problems- it doesn't require client-side script to be enabled, and it PREVENTS the issue whereby the image is first loaded when the script changes the image of the ELEMENT. Am I right that this is a lot shorter then JavaScript??? And why is there Nothing inbetween you Hyper Link Tag The image should be before [/url] Tage right?? Quote from: nymph4 on March 02, 2010, 09:42:35 PM Am I right that this is a lot shorter then JavaScript??? No. Wrong- the image is shown by the CSS, as the background to the element, which is sized using CSS attributes to be the SIZE of the button.Yes, sorry, I didn't think of background image sprites.Awesome idea, BC. Makes me think of spritesheets in games. =PI found this code .slider a { background:url(header-icon-strip.png); } #nav-services a { background-position:-60px 0px; } #nav-services a.on { background-position:-60px -54px; } #nav-services a:hover { background-position:0px 54px; } #nav-portfolio a { background-position:-210px 0px; } #nav-portfolio a.on { background-position:-210px -54px; } #nav-portfolio a:hover { background-position:-150px 54px; } #nav-testimonials a { background-position:-360px 0px; } #nav-testimonials a.on { background-position:-360px -54px; } #nav-testimonials a:hover { background-position:-300px 54px; } #nav-blog a { background-position:-510px 0px; } #nav-blog a.on { background-position:-510px -54px; } #nav-blog a:hover { background-position:-450px 54px; } #nav-articles a { background-position:-660px 0px; } #nav-articles a.on { background-position:-660px -54px; } #nav-articles a:hover { background-position:-600px 54px; } #nav-payinvoice a { background-position:-810px 0px; } #nav-payinvoice a.on { background-position:-810px -54px; } #nav-payinvoice a:hover { background-position:-750px 54px; } #nav-contact a { background-position:-960px 0px; } #nav-contact a.on { background-position:-960px -54px; } #nav-contact a:hover { background-position:-900px 54px; } I only have two images one for wen the mouse is over it homeon.jpg and one for wen the mouse is of it houseoff.jpg How do I make this code for what I need?? |
|