1
Post Buttons Hover Image Thu Jun 16, 2011 8:24 am
Maki
Posts : 120
Points : 251
Reputation : 0
Location : Here
Join date : 2010-04-09
This is a simple tutorial on how to make a hover (on mouse over) image change with simple CSS only and for faster loading.
First, you have to make your image.
Normally, to make 2 states, you'll have to make 2 images, like this:
Normal Image
Hover Image
Next thing is to create the CSS code that will handle our "hover image".
The CSS Code:
-----------------
You can just copy and paste it into your CSS Stylesheet
BUT! remember to change the Icon url (Internet address) for the (Post new topic, Reply to topic, New posts [ Locked ], and ''Post new topic'' for the PM image. )
To do that you must go into your ACP » Display » Pictures and Colors » Pics management » Advanced Mode Buttons.
The url's are:
Post new topic: replace the Icon url with this '' http://hitskin.com/themes/15/69/75/i_post.gif ''
Reply to topic:replace the Icon url with this
Still working...
First, you have to make your image.
Normally, to make 2 states, you'll have to make 2 images, like this:
Normal Image
Hover Image
Next thing is to create the CSS code that will handle our "hover image".
The CSS Code:
-----------------
You can just copy and paste it into your CSS Stylesheet
BUT! remember to change the Icon url (Internet address) for the (Post new topic, Reply to topic, New posts [ Locked ], and ''Post new topic'' for the PM image. )
To do that you must go into your ACP » Display » Pictures and Colors » Pics management » Advanced Mode Buttons.
The url's are:
Post new topic: replace the Icon url with this '' http://hitskin.com/themes/15/69/75/i_post.gif ''
Reply to topic:replace the Icon url with this
http://hitskin.com/themes/15/69/75/i_reply.gif
Still working...
