Can CSS be used to change an image's color for active & hover? -


i'm working shape5.com corporate response joomla template , been asked make change color of 4 icons social media in upper right-hand corner. demo of template can found here:

http://www.shape5.com/demo/corporate_response/

their css each icon looks template.css file. i'm including first icon keep brief, rss:

#s5_rss { height:23px; width:22px; background:url(../images/rss.png) no-repeat top left; cursor:pointer; margin-left:8px; float:right; }  #s5_rss:hover { background:url(../images/rss.png) no-repeat bottom left; }

the rss.png here:

http://www.shape5.com/demo/corporate_response/templates/corporate_response/images/rss.png

i've been asked use css change active/hover color red. i'm not sure if can done css or not. can it? or require new .png file created image designer desired red color?

i'd understand why rss.png file has 2 images of icon inside of @ different shades , how css toggle between them know use hover? special .png file allows this, perhaps in different format .png files? thanks!

the image known sprite image: single image file consisting of multiple sprites apply single background image, , position according constraints set width , height properties on element. it's regular png image , not intrinsically different other png images.

as changing color of image red, not can css alone depending on mean "changing color" — safest bet modify image add new sprite desired color. since it's regular png image it's simple matter of extending canvas 23 pixels down, rendering new sprite in space that's created, , modifying css looks this:

#s5_rss:hover { background:url(../images/rss.png) no-repeat center left; }  #s5_rss:active { background:url(../images/rss.png) no-repeat bottom left; }

you can replace background:url(../images/rss.png) no-repeat portion background-position: in :hover , :active rules you're modifying background position when using sprite in css:

#s5_rss:hover { background-position:center left; }  #s5_rss:active { background-position:bottom left; }

Comments

Post a Comment

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

i'm learning java , have question regarding reading file want read numbers file contains strings well. here example of file: 66.56 "3 java 3-43 5-42 2.1 1 and here coding: public class test { public static void main (string [] args){ if (0 < args.length) { file x = new file(args[0]); try{ scanner in = new scanner( new fileinputstream(x)); arraylist<double> test = new arraylist<>(); while(in.hasnext()){ if(in.hasnextdouble()){ double f=in.nextdouble(); test.add(f);} else {in.next();} } catch(ioexception e) { system.err.println("exception during reading: " + e); } } my problem add 66.56,2.1 , 1 doesn't add 3 after "3 or ignores 3-43 , 5-42 can tell me how skip strings , add doubles here? thanks all said 3 ie; "3, 3-43 , 4-42 strings either u read string , split , check number @ " , - or put in space between characters , integers. jvm after compilation tre...
Read more

rewrite - Trouble with Wordpress multiple custom querystrings -

i'm working on adding multiple querystring , doesn't seem work. i've found codes seems work others might i'm missing something. i want like: http://mydomain.com/board/?getyear=2013&getsometext2=sometext to http://mydomain.com/board/2013/sometext/ i added code below functions.php file. doesn't seem work should though. this works. echoing querystring gets both variable without problem. http://mydomain.com/board/2013/sometext/ but doesn't. tested querystring vis isset() seems nothing being set/get http://mydomain.com/board/2013/ function add_query_vars($vars) { $vars[] = "getyear"; $vars[] = "getsometext2"; return $vars; } add_filter('query_vars', 'add_query_vars'); function add_rewrite_rules($arules) { $anewrules = array('board/([^/]+)/([^/]+)/?$' => 'index.php?pagename=board&getyear=$matches[1]&getsometext2=$matches[2]'); $arules = $a...
Read more