Basic concept for how javascript replaces an html input with something interactive?

Question

This is a very low-level, conceptual question.

I have a content site where the users can rate comments left by other users using a dropdown form with two choices, +1 or -1.

I'd like to "transform" this into a nice-looking up/down arrow, a la reddit comments.

I understand that there's a way to do this through CSS + javascript, but I don't understand what that method is and how it works so I can begin looking into it. What exactly so I need to do to turn this dropdown into an up/down voting widget?

I don't need help with the actual ranking of the comments, the algo for it or anything, I just want to understand how to replace this UI element with something more friendly.

Answer 1

You have to have two images for this. And when it is clicked better make an ajax request and update the value to database.

If the rating is only for a single time then you can disable the images after successfully updating database.

In SO they are using four images for upvote and downvote. Two of them are indicating the clicked status and two of them for default status. When you click on an image with default status a call is made to server and if it succeeds then the image is changed to an active one.

Answer 2

The basic technique is to use javascript to hide the actual form element (probably via setting a style of display:none) and then add your widget via the DOM manipulation methods. Then, set onclicks on the up/down arrows to update the the value of the hidden form element, increasing/decreasing it by one each time.

Answer 3

Check these out.

http://developer.yahoo.com/yui/examples/button/btn%5Fexample07.html

And perhaps these

http://developer.yahoo.com/yui/examples/button/btn%5Fexample04.html

I believe they all work on inline mark up or javascript generation.