1

A user chooses a ranking <%= f.select :ranking, Challenge::EMOTICONS %>. ranking: integer.

EMOTICONS = ['1.png', '2.png', '3.png', '4.png']

How can I show the user the emoticon images in place of the integers these emoticons represent in a dropdown menu? 

4 = :] = 4.png # Smilely face strings are an example. I have better quality emoticon images I'd like to use
3 = :) = 3.png
2 = :( = 2.png
1 = :[ = 1.png

enter image description here

tadman
  • 208,517
  • 23
  • 234
  • 262
AnthonyGalli.com
  • 2,796
  • 5
  • 31
  • 80
  • You might be stuck using a plugin like [ddSlick](http://designwithpc.com/Plugins/ddSlick). Regular HTML ` – tadman May 04 '16 at 20:26
  • Which UI (CSS and Javascript) framework(s) are you using or planning to use. Most of them have a solution or allow plugin solutions that give you styled select options. Sadly, the standard HTML set does not, and it is reasonably difficult to roll your own. – Michael Gaskill May 04 '16 at 20:37
  • Do you want to show an actual image on the dropdown or just the emoticon representation of that integer? – Gustavo Rubio May 04 '16 at 21:02
  • Yea @tadman. That might be a good option. Otherwise for now I'm going to try to just show all four emoticons. Increase the opacity for nonactive ones and then when user hovers or clicks on one then remove transparency. Here is a new question to help me toward that goal: http://stackoverflow.com/questions/37038221/how-to-pass-attribute-data-by-clicking-on-image – AnthonyGalli.com May 04 '16 at 21:21
  • [This link](http://stackoverflow.com/questions/4941004/putting-images-with-options-in-a-dropdown-list) may help answer your question, or at least shed light on it. – Michael Gaskill May 04 '16 at 21:39

1 Answers1

0

Instead of using the filenames in your views ("1.png"), why not use the emoticon strings i.e. EMOTICONS = [':)', ':(', ':|', ':@']

Then on the server, you could use a case statement on the param to find the matching filename.

max pleaner
  • 26,189
  • 9
  • 66
  • 118