How best to make a smileys box in html

Question

I'd like to add a box containing smileys icons above the comment area which opens using jQuery on click. What I come up with is this:

<div class="emo">
  <i href="#" id="showhide_emobox">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>
  <div id="emobox">
    <input class="emoticon" id="icon-smile" type="button" value=":)" />
    <input class="emoticon" id="icon-sad" type="button" value=":(" />
    <input class="emoticon"  id="icon-widesmile" type="button" value=":D" /> <br>

  </div>
</div>

css:

.emoticon-smile{
    background: url('../smileys/smile.png');
}

 #icon-smile {
     border: none;
     background: url('../images/smile.gif') no-repeat;  
}

jQuery:

 //  =======show hide emoticon div============
$('#showhide_emobox').click(function(){
    $('#emobox').toggle();
    $(this).toggleClass('active');

    });  


//  ============add emoticons============


 $('.emoticon').click(function() {
    var textarea_val = jQuery.trim($('.user-comment').val());
    var emotion_val = $(this).attr('value');

    if (textarea_val =='') {
    var sp = '';
    } else {
      var sp = ' ';  
    }
    $('.user-comment').focus().val(textarea_val + sp + emotion_val + sp);

    });   

However I have difficulty placing buttons in a nice array and make background image for them (the button values appear before image and the array is not perfectly rectangular. So I'm wondering maybe this is not the best way to render this box.

Any ideas to do this properly?

Answer 1

First show images, on hover hide image and show text. No need for input elements to get text of Dom Node

Something like this:

$(document).ready(function() {
  $(".wrapper").click(function() {
    var value = $(this).find(".smily-text").text();
    console.log(value);
    alert("Smily text is '" + value + "'");
  });
});

.smily {
  background: url(http://www.smiley-lol.com/smiley/manger/grignoter/vil-chewingum.gif) no-repeat center center;
  width: 45px;
  height: 45px;
}
.smily-text {
  display: none;
  font-size: 20px;
  text-align: center;
  line-height: 45px;
  height: 45px;
  width: 45px;
}
.wrapper {
  border: 1px solid red;
  float: left;
  cursor: pointer;
}
.wrapper:hover .smily {
  display: none;
}
.wrapper:hover .smily-text {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="smily"></div>
  <div class="smily-text">:)</div>
</div>
<div class="wrapper">
  <div class="smily"></div>
  <div class="smily-text">:(</div>
</div>
<div class="wrapper">
  <div class="smily"></div>
  <div class="smily-text">:]</div>
</div>
<div class="wrapper">
  <div class="smily"></div>
  <div class="smily-text">:[</div>
</div>