Clickable images instead of dropdown menu

I have got an array like:

    'impact' => array(
        'name' => 'Impact',
        'import' => '',
        'css' => "font-family: Impact, Charcoal, sans-serif;",
        'image' => 'impact.png'         
    ),
    'palatino-linotype' => array(
        'name' => 'Palatino Linotype',
        'import' => '',
        'css' => "font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;",
        'image' => 'palatino-linotype.png'          
    ),

And a dropdown menu like:

        <select name="开发者_JAVA百科my-options[primary-font]">
        <?php foreach( $fonts as $font_key => $font ): ?>
            <option <?php selected( $font_key == $current_font ); ?> value="<?php echo $font_key; ?>"><?php echo $font['name']; ?></option>
        <?php endforeach; ?>
        </select>

I like to use the images from the array instead of the dropdown menu. So when you click an image the font gets selected. Is this possible?

You can have one hidden input field and whenever user clicks the image you set the value of hidden input to the font key with JavaScript.