Drop-down menu on clicking an image

lifeiskool · 12-05-2010, 10:03 AM

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

suhas.singh · 12-05-2010, 10:39 AM

Hello Guys,

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

Thank you
Suhas

DrDOS · 12-05-2010, 07:18 PM

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';}

jmrker · 12-05-2010, 10:46 PM

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>

lifeiskool · 12-06-2010, 05:52 AM

Hi,

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

Regards

suhas.singh · 12-06-2010, 05:55 AM

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

jmrker · 12-06-2010, 03:56 PM

Quote:

Originally Posted by lifeiskool

Hi,

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

Regards

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

jmrker · 12-06-2010, 04:00 PM

Quote:

Originally Posted by suhas.singh

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!

suhas.singh · 12-07-2010, 08:59 AM

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

jmrker · 12-07-2010, 03:58 PM

Quote:

Originally Posted by suhas.singh

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.

Iso Godly · 03-14-2013, 08:36 PM

Quote:

Originally Posted by jmrker

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?

jmrker · 03-14-2013, 10:17 PM

Quote:

Originally Posted by Iso Godly

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.

Iso Godly · 03-15-2013, 12:56 AM

Quote:

Originally Posted by jmrker

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>

jmrker · 03-15-2013, 02:58 AM

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.

Iso Godly · 03-15-2013, 06:42 AM

Quote:

Originally Posted by jmrker

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.