CODEWITHSUNDEEP
jquerycssimageicons
Steven
Steven

Reputation: 180

CSS code to change icon image

I have the code below set to the icon image for a navigation button. How do I change this code when the button becomes active to insert another icon image? I am using jquery mobile. thanks

.nav-glyphish-example .ui-btn .ui-btn-inner {
 padding-top: 40px !important; 
}
.nav-glyphish-example .ui-btn .ui-icon { 
width: 30px!important; 
height: 30px!important; 
margin-left: -15px !important; 
box-shadow: none!important; 
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-webkit-border-radius: 0 !important; border-radius: 0 !important; 
}

#home .ui-icon { 
background:  url(glyphish/icons/icons-gray/[email protected]) 50% 50% no-repeat; 
background-size: 24px 22px; 
}

Upvotes: 0

Views: 19140

Answers (3)

Federico
Federico

Reputation: 3892

I'm not sure about what do you mean exactly with active but, take a look at the :active selector

Upvotes: 1

sabithpocker
sabithpocker

Reputation: 15558

#home .ui-icon { 
background:  url(normal.png) 50% 50% no-repeat; 
}
#home .ui-icon:active { 
background:  url(active.png) 50% 50% no-repeat; 
}
#home .ui-icon:hover { 
background:  url(hover.png) 50% 50% no-repeat; 
}

Upvotes: 2

Dariush Jafari
Dariush Jafari

Reputation: 5443

You can change the css dynamically by javascript.
The code below adds a function to mousedown event of the elements matching the selector #home .ui-icon . and so you can change the backbround image on mousedown event.

jquery

$('#home .ui-icon').mousedown(function(){
  $(this).css('background-image','url(newurl)');
});

replace the newurl with your own url ( like glyphish/icons/icons-gray/[email protected] ).

Upvotes: 0

Related Questions