Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Drop-down menu on clicking an image

    Hello All,

    I am trying to find a solution for this ..... kindly help incase you know....

    I need a drop down menu to appear when I left-click an image....
    have tried a lot but failed...

    Please help me out on this

    Thanks in advance,,,

    Regards

  • #2
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello Guys,

    Even i am looking out for a similar solution, it would be gr8 if someone helps.

    Thank you
    Suhas

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,993
    Thanks
    15
    Thanked 233 Times in 233 Posts
    I assume that your menu has some kind of wrapper, a div perhaps, just use javascript to change the display property of it from none to whatever it normally is. You might want to toggle it so that it can hide/unhide.
    Code:
    function toggleMenu(){
    var menu_cont = document.getElementById("menu_wrapper");
    (menu_cont.style.display!='block')?menu_cont.style.display=='block':menu_cont.style.display=='none';}

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Try this ...

    Is this what you want to do? ...
    Code:
    <html>
    <head>
    <title> Image Drop Down Select </title>
    <style type="text/css">
    .SBox {
      display:none;
    }
      
    </style>
    <script type="text/javascript">
    // For: http://www.codingforums.com/showthread.php?t=211072
    
    function changeImg(info) {
      if (info == '') { return; }
      document.getElementById('mainImage').src = info;
      document.getElementById('SBox').style.display = 'none';
    }
    </script>
    </head>
    <body>
    <div id="imgContent">
     <img id="mainImage" src="http://www.nova.edu/hpd/otm/pics/4fun/11.jpg"
      onclick="document.getElementById('SBox').style.display='block'"><br>
     <select id="SBox" onchange="changeImg(this.value)" style="display:none">
      <option value=''>Choose</option>
      <option value='http://www.nova.edu/hpd/otm/pics/4fun/11.jpg'>11</option>
      <option value='http://www.nova.edu/hpd/otm/pics/4fun/12.jpg'>12</option>
      <option value='http://www.nova.edu/hpd/otm/pics/4fun/13.jpg'>13</option>
      <option value='http://www.nova.edu/hpd/otm/pics/4fun/14.jpg'>14</option>
      <option value='http://www.nova.edu/hpd/otm/pics/4fun/15.jpg'>15</option>
     </select>
    </div>
    </body>
    </html>

  • Users who have thanked jmrker for this post:

    lifeiskool (12-06-2010)

  • #5
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi,

    Thankx a lot for your code..its really helpful....


    Regards

  • #6
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello,

    I have similar requirement to this can you help please
    let me explain....

    for example....if we right click on an image or a link we get options like open in new window, open in new tab, save link as and etc......
    I want this....if I left click on an image it should give me similar drop down where I can include my options like add as friend,,,send message and etc....

    Thanks

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow

    Quote Originally Posted by lifeiskool View Post
    Hi,

    Thankx a lot for your code..its really helpful....


    Regards
    You're most welcome.
    Happy to help.
    Good Luck!

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow

    Quote Originally Posted by suhas.singh View Post
    Hello,

    I have similar requirement to this can you help please
    let me explain....

    for example....if we right click on an image or a link we get options like open in new window, open in new tab, save link as and etc......
    I want this....if I left click on an image it should give me similar drop down where I can include my options like add as friend,,,send message and etc....

    Thanks
    There seems to be a ton of problems with detecting mouse clicks on different browsers.
    In some cases, the default actions cannot be bypassed even after click has been detected.
    I would suggest looking into a different approach to avoid problems to begin with.

    For example: Some computers don't have a right button to click on the mouse!
    You will not be able to get to any options you define with a right click on those machines.

    Search this forum or google for some of the problems associated with "right mouse click".
    In particular: http://unixpapa.com/js/mouse.html

    Good Luck!

  • #9
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    Thanx for your reply..

    actually the things ....i dont want to work on right-click....
    I need to work left-click.....if i left-click.....i need a type of fly-out menu with my own options ....similar to the fly-out menu on right-click....

    I hope you have a solution.,.....


    Regards

  • #10
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow Huh?

    Quote Originally Posted by suhas.singh View Post
    Hi,

    Thanx for your reply..

    actually the things ....i dont want to work on right-click....
    I need to work left-click.....if i left-click.....i need a type of fly-out menu with my own options ....similar to the fly-out menu on right-click....

    I hope you have a solution.,.....


    Regards
    I'm not sure I understand.

    What do you want to do differently from what post #4 accomplishes?
    Original OP asked for drop down to become visible when an image was clicked,
    but the same logic would work for a <span> or <div> tag.

    You will need to provide more information for use to solve this problem.

  • #11
    New Coder
    Join Date
    Nov 2012
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    Is this what you want to do? ...
    Code:
    <html>
    <head>
    <title> Image Drop Down Select </title>
    <style type="text/css">
    .SBox {
      display:none;
    }
      
    </style>
    <script type="text/javascript">
    // For: http://www.codingforums.com/showthread.php?t=211072
    
    function changeImg(info) {
      if (info == '') { return; }
      document.getElementById('mainImage').src = info;
      document.getElementById('SBox').style.display = 'none';
    }
    </script>
    </head>
    <body>
    <div id="imgContent">
     <img id="mainImage" src="http://www.nova.edu/hpd/otm/pics/4fun/11.jpg"
      onclick="document.getElementById('SBox').style.display='block'"><br>
     <select id="SBox" onchange="changeImg(this.value)" style="display:none">
      <option value=''>Choose</option>
      <option value='http://www.nova.edu/hpd/otm/pics/4fun/11.jpg'>11</option>
      <option value='http://www.nova.edu/hpd/otm/pics/4fun/12.jpg'>12</option>
      <option value='http://www.nova.edu/hpd/otm/pics/4fun/13.jpg'>13</option>
      <option value='http://www.nova.edu/hpd/otm/pics/4fun/14.jpg'>14</option>
      <option value='http://www.nova.edu/hpd/otm/pics/4fun/15.jpg'>15</option>
     </select>
    </div>
    </body>
    </html>

    is there an extra part of code where it closes the options once the image is clicked again?

  • #12
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Quote Originally Posted by Iso Godly View Post
    is there an extra part of code where it closes the options once the image is clicked again?
    Not in that posted code, but it could be added.
    Could be as simple as a 2 line change from the given code.

    Give it a shot. Let's see what you got!

    If NFG (Not Fully Good), then I'll post modifications.
    Last edited by jmrker; 03-14-2013 at 10:22 PM.

  • #13
    New Coder
    Join Date
    Nov 2012
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    Not in that posted code, but it could be added.
    Could be as simple as a 2 line change from the given code.

    Give it a shot. Let's see what you got!

    If NFG (Not Fully Good), then I'll post modifications.

    would it look like this

    Code:
    <script type="text/javascript">
    // For: http://www.codingforums.com/showthread.php?t=211072
    
    function changeImg(info) {
      if (info == '') { return; }
      document.getElementById('mainImage').src = info;
      document.getElementById('SBox').style.display = 'none';
      $ ('mainImage').click(function(){
      $(".SBox").slideToggle();
      });
    }
    </script>

  • #14
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    That might work if I used JQuery. But I don't, so if it does what you want, GREAT!

    I looked over the OLD code (a year or more old) and decided I could do better.
    See if this meets your needs...
    Code:
    <html>
    <head>
    <title> Image Select </title>
    
    <style type="text/css">
     #SBox { display:none; }
    </style>
    
    </head>
    <body>
    <div id="imgContent">
     <img id="mainImage" src="http://www.nova.edu/hpd/otm/pics/4fun/11.jpg" alt="" onclick="imgAction()"><br>
     <div id="SBox">
      <label><input type="radio" name="imgBtn" onclick="changeImg(1)"> 1 </label>
      <label><input type="radio" name="imgBtn" onclick="changeImg(2)"> 2 </label>
      <label><input type="radio" name="imgBtn" onclick="changeImg(3)"> 3 </label><br>
      <label><input type="radio" name="imgBtn" onclick="changeImg(4)"> 4 </label>
      <label><input type="radio" name="imgBtn" onclick="changeImg(5)"> 5 </label>
      <label><input type="radio" name="imgBtn" onclick="changeImg(6)"> 6 </label>
     </div>
    </div>
    
    <script type="text/javascript">
    // For: http://www.codingforums.com/showthread.php?t=211072
    
    var imgFlag = 0;
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    var imgList = ['','11.jpg','12.jpg','13.jpg','14.jpg','15.jpg','21.jpg'];
      
    function changeImg(info) {
      if (info != '') { document.getElementById('mainImage').src = baseURL+imgList[info];  return; }
      document.getElementById('SBox').style.display = 'none';
    }
    function imgAction() {
      imgFlag = (imgFlag+1) % 2;
      var si = 'block';  if (imgFlag == 0) { si = 'none'; }
      document.getElementById('SBox').style.display = si;
    }
    </script>
    </body>
    </html>
    It uses radio buttons rather than a drop down combo box.
    I did that to reduce the number of mouse clicks needed to change the images
    and it made it easier to hide the selections if the image is clicked a second time as you requested.

  • #15
    New Coder
    Join Date
    Nov 2012
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    That might work if I used JQuery. But I don't, so if it does what you want, GREAT!

    I looked over the OLD code (a year or more old) and decided I could do better.
    See if this meets your needs...

    It uses radio buttons rather than a drop down combo box.
    I did that to reduce the number of mouse clicks needed to change the images
    and it made it easier to hide the selections if the image is clicked a second time as you requested.
    I wanted to learn or at least pick at the code you did. I didn't want to achieve a drop down combo box like that. I wanted to accomplish this: http://onecannon.com/test

    however I see that if I click the hide arrow in the Tan Bronzers section the Tan Accelerators opens up (an undesired effect). But it works fine if I click the actual image to open and close the desired section.


    EDIT: I saw that I had the 2nd show_hide class labeled the same as the first class.
    Last edited by Iso Godly; 03-15-2013 at 06:47 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •