7 Replies Latest reply on Jan 25, 2011 3:08 AM by sellador315

    Choosing Select Tag options with images

    sellador315

      Hi all,

       

      Is there any way of choosing select tag options by using images.

       

      For example this is the code I am using and I'be highlighted the images and select tag that I would like to work together.

       

      Thanks in advance for any help.

       

      Tom

       

      <li><h3>Lantern</h3></li>

          <li>Size: 33cm</li>

          <li>Colours: <img src="../images/graphics/colourblue.jpg" alt="blue" width="10" height="10" /> <img src="../images/graphics/colourgreen.jpg" width="10" height="10" /> <img src="../images/graphics/colourred.jpg" width="10" height="10" /> <img src="../images/graphics/colouryellow.jpg" width="10" height="10" /></li>

          <li>Light Source: Candle</li>

          <li>Type: Hanging</li><br />

          <li>Price: £40.00</li>

          <li>Delivery: £6.00</li>

          <br /><form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" onsubmit="MM_openBrWindow('https://www.paypal.com/cgi-bin/webscr','','width=400,height=400')">

        <input type="hidden" name="cmd" value="_cart" />

        <input type="hidden" name="add" value="1" />

        <input type="hidden" name="bn" value="webassist.dreamweaver.4_5_0" />

        <input type="hidden" name="business" value="" />

        <input type="hidden" name="item_name" value="lantern" />

        <input type="hidden" name="amount" value="40.00" />

        <input type="hidden" name="currency_code" value="GBP" />

        <input type="hidden" name="receiver_email" value="" />

        <input type="hidden" name="mrb" value="R-3WH47588B4505740X" />

        <input type="hidden" name="pal" value="ANNSXSLJLYR2A" />

        <input type="hidden" name="no_shipping" value="0" />

        <input type="hidden" name="no_note" value="0" />

        <input type="hidden" name="on0" value="Size"></td>

          <select name="os0">

          <option value="Red">Red</option>

          <option value="Blue">Blue</option>

          <option value="Green">Green</option>

          </select>

          </input>

        • 1. Re: Choosing Select Tag options with images
          MurraySummers Level 8

          I don't understand your question.  Are you asking whether it's possible to use images in a select tag rather than text, e.g.,

           

          <select>

               <option><img></option>

           

          ??

           

          If so then the answer is no, you cannot do that.

          • 2. Re: Choosing Select Tag options with images
            sellador315 Level 1

            No,

             

            I'll try and explain my self.

             

            I have 4 images which represent different colours available for a product. I want it so the user can click a colour (image) and it will update the Select Options (which will be hidden).

             

            I'm assuming this won't be possible either but thought I'd try as client would like it.

             

            Cheers

             

            Tom

            • 3. Re: Choosing Select Tag options with images
              MurraySummers Level 8

              Yes, you can do that.  Make sure your code is valid first though - you cannot have a form within a <ul> as you do here.

               

              Using your invalid code you could have -

               

               

              <li><h3>Lantern</h3></li>

                  <li>Size: 33cm</li>

                  <li>Colours: <img src="../images/graphics/colourblue.jpg" alt="blue" width="10" height="10" onclick="Select_Value_Set('paypal.os0','Blue')" /> <img src="../images/graphics/colourgreen.jpg" width="10" height="10" onclick="Select_Value_Set('paypal.os0','Green')" /> <img src="../images/graphics/colourred.jpg" width="10" height="10" onclick="Select_Value_Set('paypal.os0','Red')" /> <img src="../images/graphics/colouryellow.jpg" width="10" height="10" onclick="Select_Value_Set('paypal.os0','Yellow')" /></li>

                  <li>Light Source: Candle</li>

                  <li>Type: Hanging</li><br />

                  <li>Price: £40.00</li>

                  <li>Delivery: £6.00</li>

                  <br />

               

              <script type="text/javascript">

               

              /* This script and many more are available free online at

              The JavaScript Source :: http://javascript.internet.com

              Created by: Francis Cocharrua :: http://scripts.franciscocharrua.com/ */

               

               

               

              function Select_Value_Set(SelectName, Value) {

                eval('SelectObject = document.' +

                  SelectName + ';');

                for(index = 0;

                  index < SelectObject.length;

                  index++) {

                 if(SelectObject[index].value == Value)

                   SelectObject.selectedIndex = index;

                 }

              }

              </script>

               

               

              <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" name="paypal" method="post" onsubmit="MM_openBrWindow('https://www.paypal.com/cgi-bin/webscr','','width=400,height=400')">

                <input type="hidden" name="cmd" value="_cart" />

                <input type="hidden" name="add" value="1" />

                <input type="hidden" name="bn" value="webassist.dreamweaver.4_5_0" />

                <input type="hidden" name="business" value="" />

                <input type="hidden" name="item_name" value="lantern" />

                <input type="hidden" name="amount" value="40.00" />

                <input type="hidden" name="currency_code" value="GBP" />

                <input type="hidden" name="receiver_email" value="" />

                <input type="hidden" name="mrb" value="R-3WH47588B4505740X" />

                <input type="hidden" name="pal" value="ANNSXSLJLYR2A" />

                <input type="hidden" name="no_shipping" value="0" />

                <input type="hidden" name="no_note" value="0" />

                <input type="hidden" name="on0" value="Size"></td>

                  <select name="os0">

                  <option value="Red">Red</option>

                  <option value="Blue">Blue</option>

                  <option value="Green">Green</option>

                  <option value="Yellow">Yellow</option>

                  </select>

                  </input>

               

              (important changes in bold)

               

              I found the javascript by just Googling "javascript select tag".

              1 person found this helpful
              • 4. Re: Choosing Select Tag options with images
                sellador315 Level 1

                That works great.

                 

                If I could be cheeky and ask two more things that'd be great:

                 

                1. Any chance I can hide the select tag (I have tried typing type="hidden" but has not worked.)

                 

                2. Once the colour is selected how can I add a border around the colour to show the user it's been selected?

                 

                Then that's it!

                 

                Thanks for all your help buddy. Really appreciated. You'll be please to know I'm working on learning Javascript and PHP!

                 

                Cheers

                 

                Tom

                • 5. Re: Choosing Select Tag options with images
                  MurraySummers Level 8

                  1. Any chance I can hide the select tag (I have tried typing type="hidden" but has not worked.)

                   

                  If you are going to hide the tag, then why use a select tag in the first place?  Why not just use a hidden field to receive the choice - it's way simpler!

                   

                  Anyhow, you can certainly do this -

                   

                  <select style="display:none;"....

                   

                  and it will be hidden.

                   

                  2. Once the colour is selected how can I add a border around the colour to show the user it's been selected?

                   

                  Taken from http://www.w3schools.com and adapted -

                   

                  <script type="text/javascript">

                  function changeBorder(foo)

                  {

                  document.getElementById(foo).style.border="thick solid #000000";

                  }

                  </script></head>

                   

                  <body>

                  <img src="images/red.gif" id="img1"  width="100" height="64" onclick="changeBorder('img1');" />

                  <img src="images/blue.gif" id="img2"  width="100" height="64" onclick="changeBorder('img2');" />

                  <img src="images/green.gif" id="img3"  width="100" height="64" onclick="changeBorder('img3');" />

                  </body>

                   

                  You'll be please to know I'm working on learning Javascript and PHP!

                   

                  Forget the javascript for now.  Focus on HTML and CSS.  When you are very comfortable with that, move on to PHP.  The javascript will come by osmosis while you do that....

                  1 person found this helpful
                  • 7. Re: Choosing Select Tag options with images
                    sellador315 Level 1

                    Hi,

                     

                    Sorry to bring up this conversation again.

                    I'd quite like it when you click on one of the colours, the border disappears for any previously click colours but not quite sure how to code it.

                    Hope this makes sense as was very hard to word.

                     

                    Tom