Search code examples
javascripthtmlcssgsap

Javascript active state for buttons composed of images

Javascript newb here. I am trying to make a menu that changes it's image when the button is clicked and active.

Here is the html

  <div id="expand_footer">                      
           <div class="footer_btn" id="ftr_btn1"> 
            <img class="shopbtns" src="outerwear_icon.png" width="66" height="87" style="padding-top:4px;" /> 
           </div>
           <div class="footer_btn" id="ftr_btn2">
            <img class="shopbtns" src="top_icon.png" width="66" height="88" style="padding-top:4px;" />
           </div>
            <div class="footer_btn" id="ftr_btn3"> 
                <img class="shopbtns" src="bottom_icon.png" width="89" height="91" style="padding-top:1px;" />
            </div>
            <div class="footer_btn" id="ftr_btn4">
                <img class="shopbtns" src="boots_icon.png" width="66" height="80" style="padding-top:10px;" /> 
           </div>
 </div>

and the css

.footer_btn {
    float:left;
    text-align:center;
    width:25%; /* percentage of stage to occupy */
    margin-top:0px; /*adjust spacing between text and image */
    padding:0!important;
    cursor:pointer;
    z-index: 405!important;
}

I'm switching from AS3 to JS so apologize if the question seems silly. Would the best way to accomplish this just be in CSS or can Javascript handle this. I'm not using Jquery. (avoiding the library load) I am using GSAP so perhaps there is a way with that or? Thanks in advance for any assistance.

Solution

  • Can you possibly use background-image and selector?

    .footer_btn {
//Your css
}

.footer_btn:hover {
  background-image: url('image.jpg');
}