Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1491
  • Last Modified:

Javascript in php for select option to image

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
magento
Asked:
magento
  • 3
  • 2
1 Solution
 
cstsangCommented:
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
 
magentoAuthor Commented:
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
 
cstsangCommented:
0
 
cstsangCommented:
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
 
magentoAuthor Commented:
Thank you ,
0

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now