Improve company productivity with a Business Account.Sign Up

x
?
Solved

Javascript in php for select option to image

Posted on 2014-02-18
5
Medium Priority
?
1,608 Views
Last Modified: 2014-03-03
Hi,

I have a dropdown , each value has a product image related to it.

So now i dont want the dropdown , and i want to show images corresponding to it.

So 3 dropdown values before, now i need 3 images display in a row instead of dropdown but use the same function as dropdown.

http://jsfiddle.net/32Tw4/

Thanks
0
Comment
Question by:magento
  • 3
  • 2
5 Comments
 
LVL 7

Expert Comment

by:KNVB HK
ID: 39866819
You need to download the js lib. from the following web site:
http://www.marghoobsuleman.com/jquery-image-dropdown

There are a small tutorial show you how to use the js lib. in your script.

Good Luck
0
 
LVL 5

Author Comment

by:magento
ID: 39869429
Hi ,

Thanks for your advice, looks like it allows the image in the dropdown itself.

But is it possible to remove the dropdown and only shows images instead of it?

Thanks
0
 
LVL 7

Expert Comment

by:KNVB HK
ID: 39869647
0
 
LVL 7

Accepted Solution

by:
KNVB HK earned 2000 total points
ID: 39869685
Is it what you need?
<html>
    <head>
         <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
         <script type="text/javascript" src="http://dl.dropboxusercontent.com/u/40036711/Scripts/jquery.ddslick.min.js"></script>
         <script language=javascript>
                //Dropdown plugin data
                var ddData = [
                    {
                        text: "Facebook",
                        value: 1,
                        selected: false,
                        description: "Description with Facebook",
                        imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
                    },
                    {
                        text: "Twitter",
                        value: 2,
                        selected: false,
                        description: "Description with Twitter",
                        imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
                    },
                    {
                        text: "LinkedIn",
                        value: 3,
                        selected: false,
                        description: "Description with LinkedIn",
                        imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
                    },
                    {
                        text: "Foursquare",
                        value: 4,
                        selected: false,
                        description: "Description with Foursquare",
                        imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
                    }
                ];            
                function start()
                {
                  $('#myDropdown').ddslick({
    data:ddData,
    width:400,
    selectText: "Select your preferred social network",
    imagePosition:"right",
    onSelected: function(returnDataObject){
        //callback function: do something with selectedData;
        alert(returnDataObject.selectedData.value);
    }   
});
                  
                }
         </script>
     </head>
     <body onload="start()">   
      <div id="myDropdown"></div>
     </body>
</html>  

Open in new window

0
 
LVL 5

Author Closing Comment

by:magento
ID: 39901119
Thank you ,
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Laravel is the most sought after web development framework. It comes with ample amount of features that make it easy for developers to work around it. Know about its features in detail.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

606 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