Need help with coding buttons :)

[kawaiiklothing]

I've posted already today but I need some more help haha. Basically I want it so that when you roll over the header buttons it highlights on hover and then when you click it it changes again.

 

I've already made all the image files for this so it's just a matter of coding. I have put all the image changes in the same file. So e.g button looking normal, button on hover and what button will look like when it clicks are all in the same image. I did this cause I was told that it is easier. Don't know if this is true or not.

 

I have looked it up but I'm confused cause I think my coding is different to what is out there.

 

I have this is in the div (I put type submit cause I read that it will only work with type submit)

 

<div id="permalinks">
<div class="permalinksLeftBg"></div>
<ul id="header_links">
<li input= type=submit id="header_link_home"><a href="{$base_dir}"> <img src="http://localhost/themes/theme001/img/home_buttons.png" ></a></li>
<li id="header_link_about"><a href="http://localhost/content/4-about-us"> <img src="http://localhost/themes/theme001/img/about_buttons.png" ></a></li>
<li id="header_link_contact"><a href="{$base_dir_ssl}contact-form.php"> <img src="http://localhost/themes/theme001/img/contact_buttons.png" ></a></li>
<li id="header_link_faq"><a href="http://localhost/content/8-faq"> <img src="http://localhost/themes/theme001/img/FAQ_ button.png" ></a></li>

</ul>
</div>

 

Then I have declared a button in the css like this

 

#header_link_home {
padding-top: 20px;
padding-left: 25px;
}

 

If anyone could help me this would be great

[kawaiiklothing]

Anyone? >W<

[doubleD]

Anyone? >W<

 

Well, that's kind of css issue not prestashop

For css you can use :hover attribute like #header_link_home a:hover{background:#fff url('')}

Try to post on css/javascript forums/sites

[kawaiiklothing]

thank you. Sorry for the inconveince I didn't realise I was posting in the wrong bit >W<