Solved

multiple selection list and png image

Posted on 2014-03-10
5
361 Views
Last Modified: 2014-03-12
I have to create a multiple selection list which isn't a problem.  The problem is incorporating a png graphic of the button I want to use with it.  Any suggestions?
0
Comment
Question by:lrollins
5 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 39919385
Is this the submit button for the form?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39919408
Any suggestions?
A suggestion that you tell us what the problem is
0
 
LVL 1

Author Comment

by:lrollins
ID: 39920330
It's a drop down list of our products.  I don't know how to incorporate the png image into the coding for the selection list.  Below is a sample code.

<select>
<option>male</option>
<option>female</option>
<option>others</option>
</select>
Selects-Bar.jpg
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 250 total points
ID: 39921214
Well it is a pretty lame effect, but I think it might be possible for Firefox using the image as a background perhaps, but for anything really effective you might want to look around for some kind of jquery hack in a plugin. Generally you have to swap layers in and out if you want the image to work correct and display the selected value.

It is poor design and you will find users complain unless it is 100% reliable (good luck with that).  You might want to consider doing it using a list styled to look like a select, and using events to handle the click; otherwise you are going to run into all kinds of issues.  

I have seen various attempts at this but I have yet to see one that works reliable and cross browser; so the best you are going to find is something that sort of works part of the time for some browsers.

Cd&
0
 
LVL 1

Author Closing Comment

by:lrollins
ID: 39923338
You are correct.  After doing research, I've come to the conclusion that it will be easier to just do a simple selection list.  I'll make the other buttons fancy.  Thanks.
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Hovering effect 9 29
Open an ul or div with hover on a li,how? 9 21
razorCMS: Change Menu Font 4 26
Adjust the position 3 13
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now