Radio buttons as anchor images css question

Gravity Support Forums » Plugin Support » Gravity Forms

tm
Member

Okay so on my site (below) I am using images as the radio buttons.. I want to make those anchor images so when you click them they display larger in a new tab/window but when I do and go back in the browser the css radio checked css doesn't apply the border. For testing purposes I kept the top 3 fabrics images (non anchor) so they show the border when clicked and the bottom anchor images to show you how the css doesn't apply. I was looking to use a lightbox plugin but I am back to this to keep it simple to maybe find a solution easier. Thanks

http://www.customwindowcushions.com/custom-window-seat-cushions/rectangle-window-seat-cushions

Posted 12 years ago on Monday February 13, 2012 | Permalink
Carl Hancock
Administrator

If you are using the images in place of radio buttons and you want to make it so that they display a larger image in a new window, that poses a usability problem. The user has to click the image to select that radio button, it's the action that is required to select that fabric switch the way you have it setup.

If you configure it so that clicking on the swatch opens up a new window or tab it's going to be annoying from a user interface perspective. The user may not need to view a larger version of the swatch and is instead simply selecting which one they want, but it would then open up a new window and take focus away from the form itself and put it on that new window.

I would suggest implementing this some other way such as providing a link in the field description that opens up a page that has larger versions of the fabric swatches. That way selecting the field value itself doesn't trigger this behavior.

Posted 12 years ago on Monday February 13, 2012 | Permalink