Can you make irregular shaped buttons in vaadin ?
I want to make a USA map where the states are buttons.I tried different aproaches but the result was allways a rectangle button .
How can i make it ?
Example : http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Map_of_USA_showing_state_names.png/1024px-Map_of_USA_showing_state_names.png
When i go with the mouse over a state i want to display some information.
What you have to do for this is change the divs and input elements inside the button which is displayed inside the html web page.
Making irregular shapes is possible using CSS, as can be seen here
https://css-tricks.com/examples/ShapesOfCSS/
There are also a couple of stackoverflow questions on that topic:
http://stackoverflow.com/questions/6837528/css-html-custom-shape-buttons
http://stackoverflow.com/questions/3755572/simple-way-of-using-irregular-shaped-buttons
http://stackoverflow.com/questions/19223610/create-slanted-irregular-shape-div
Although it seems possible it also seems quite difficult to get it into the shape of a state.
What might also be possible is to create a JavaScript component, Javascript extension, custom gwt component, … which tracks the Mouse Cursor position inside its component area with a background picture displaying the USA map. This way you could react to the cursor being inside certain areas and could then display your information accordingly.
(Here are some SO question that could help if you want to go that route:
http://stackoverflow.com/questions/3234256/find-mouse-position-relative-to-element
http://stackoverflow.com/questions/14545626/mouse-position-on-mouseover-event
http://stackoverflow.com/questions/16105482/get-current-cursor-position-in-a-texbox
)
So generally speaking it seems to possible but it isn’t that easy.
Maybe there is an easier way to do this but i personally couldn’t think of one.
PS: This question
http://stackoverflow.com/questions/3738660/are-there-other-options-of-enabling-an-irregular-shaped-clickable-area-on-a-web-p
might also be quite interessting in your case as the OP wanted to do the same thing as you.
Here is an alternative: style the button with background-color transparent. Then create images of the states with transparent background. Then will do the trick. Put any wording on the image. Otherwise you have to use background image and things get trickier. I was doing something similar when this idea came to me.