You might have noticed the button the front page has our HiringThing mascot peeping out from behind. It’s a great way
The code is general enough that you can add the little robot guy to any HTML element. For example, I’ve added it to this
DIV (move your mouse near to see it in action.)
Or I can attach him to this horizontal rule element (again, move your mouse near to see him pop up.)
We can also use him multiple times in a coordinated fashion, with different click events for each element. Click on the numbered boxes
below to see it in action.
Robot sprite sheet…
You can see how it works in the example below. The blue box is dynamically added to the target element, and then some location math tells us how to shift the robot background in the box as necessary. The robot is built in a sprite sheet, which allows us to load just one file for the popup and click states.