Member Avatar for Martin C++

Hello,

Not really sure if this is the right place to post this to but I am pretty sure I need js to accomplish this. I need to make a dropdown selection menu for my wordpress theme options, but I can't use the conventional <select> tag because I want my options to be a list of small images and this tag does not support it. (There were suggestions to use background-image but it didnt work in chrome). The problem is not making the list, I can do that, but I need it to work like a <select> tag. Meaning that the container element must have a 'name' value, cause wordpress needs this to save the settings in database. I hope I made myself clear enough.

An example what it could look like:

<ul id="infobox-img-dropdown-list" name="featured-infobox-1-img">
    <li value="phpWillFill"><img src="phpWillFillThis" /></li>
    <li value="phpWIllFill" class="selected"><img src="phpWillFillThis" /></li>
    <li value="phpWillFill" ><img src="phpWillFillThis" /></li>
</ul>

It's basically <select> but it shows images. I need it to function like <select> too.

For those who are familiar with wordpress, I am creating options page for my theme and am currently building the callback function for add_submenu_page() to display the settings form.

  • 4 Contributors
  • 4 Replies
  • 951 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by almostbob
Member Avatar for paulkd

What you describe sounds like a nav menu. Perhaps you could search in this area?

Member Avatar for Martin C++

Well it is, but I need it to remember the choice and send it with other data when I submit the form.

Member Avatar for almostbob 
<ul id="infobox-img-dropdown-list" name="featured-infobox-1-img">
    <li value="phpWillFill">
        <input type='radio' value='1' name='option' id='option1' />
            <label for="option1"><img src="phpWillFillThis" /></label>
     </li>
    <li value="phpWIllFill" class="selected">
        <inpu type='radio' value='2' name='option' id='option2' selected='selected'>
            <label for="option2"><img src="phpWillFillThis" /></label>
    </li>
    <li value="phpWillFill" >
        <input type='radio' value='3' name='option' id='option3'>
            <label for="option3"><img src="phpWillFillThis" /></label>
    </li>
</ul>

If you dont want the actual radio button do display just give it a css class that display: none,
and the image remains clickable
not very clean, but funcional

Edited by almostbob
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.