Div-based selection menu help please

**Andyram2k** · 04-28-2009 12:34 AM

Hi all, thanks for taking the time to view my posting, i really appreciate it.

At present, I’m developing a search form, that allows users to search up to 3 places, using a div-based dropdown. The first place to search would be displayed next to the form, and the other 2 hidden. On click of this first search option, a menu with all 3 items would appear, and the user could then choose any of the 3 places to search. The selected search image item would then replace the original search image.

The reason why i'm not using a select list, is because i am using images instead of text.

I'm not sure what the best way forward is to accomplish this, and thought i would as the experts' advice if i may. Any code examples, or help would be more than welcome.

I hope this diagram will be of some help in explaining the task:

Code:

http://www.andyram2k.com/jsissue.jpg

I’m not sure if an image array or an array of divs would be the best method of suppending onclick. Thanks for your time in advance.

Code:

<style>
.dropmenudiv {
 BORDER-RIGHT: #262628 1px solid; BORDER-TOP: #262628 1px solid; Z-INDEX: 100; FONT: 12px Verdana; BORDER-LEFT: #262628 1px solid; WIDTH: 19px; COLOR: #ffffff; BORDER-BOTTOM: #660096 2px solid; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #474747; TEXT-ALIGN: left; background-color: #D7D6DC;
}
.dropmenudiv IMG {
 border: 0;
}
.dropmenudiv A {
 DISPLAY: block; WIDTH: 19px; COLOR: #ffffff; BORDER-BOTTOM: #262628 1px solid; TEXT-DECORATION: none
}
* HTML .dropmenudiv A {
 WIDTH: 19px; COLOR: #ffffff; BACKGROUND-REPEAT: no-repeat; TEXT-DECORATION: none
}
.dropmenudiv A:hover {
 COLOR: #ffffff; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: #037c2c; TEXT-DECORATION: none
}
</style>

<div class="dropmenudiv">
<div id="search1"><a href="#" title="Search 1"><img src="image1.gif" alt="Search 1" /></a></div>
<div id="search2"><a href="#" title="Search 2"><img src="image2.gif" alt="Search 2" /></a></div>
<div id="search3"><a href="#" title="Search 3"><img src="image3.gif" alt="Search 3" /></a></div>
</div>

**Rufe0** · 04-28-2009 03:43 AM

try these two examples

<html>
<head>
<script language="javascript">
function toggle_visibility(id) {
var s1div = document.getElementById('searchone');
var s2div = document.getElementById('searchtwo');
var s3div = document.getElementById('searchthree');
if(id=='searchone'){
s1div.style.display = 'block';
s2div.style.display = 'none';
s3div.style.display = 'none';
}else if(id=='searchtwo'){
s1div.style.display = 'none';
s2div.style.display = 'block';
s3div.style.display = 'none';
}else{
s1div.style.display = 'none';
s2div.style.display = 'none';
s3div.style.display = 'block';
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<a href="#" onclick="toggle_visibility('searchone');">Search One</a>
<br>
<a href="#" onclick="toggle_visibility('searchtwo');">Search two</a>
<br>
<a href="#" onclick="toggle_visibility('searchthree');">Search three</a>
<br>
</td>
<td>
<div id="searchone" style="display: none">
search one data
</div>
<div id="searchtwo" style="display: none">
search two data
</div>
<div id="searchthree" style="display: none">
search three data
</div>
</td>
</tr>
</table>
</body>
</html>

these will behave slightly differently i suspect you would want the first one

<html>
<head>
<script language="javascript">
function toggle_visibility(id) {
var selecteddiv = document.getElementById(id);
if(selecteddiv.style.display == 'block')
selecteddiv.style.display = 'none';
else
selecteddiv.style.display = 'block';
}
</script>
</head>
<body>
<table>
<tr>
<td>
<a href="#" onclick="toggle_visibility('searchone');">Search One</a>
<br>
<a href="#" onclick="toggle_visibility('searchtwo');">Search two</a>
<br>
<a href="#" onclick="toggle_visibility('searchthree');">Search three</a>
<br>
</td>
<td>
<div id="searchone" style="display: none">
search one data
</div>
<div id="searchtwo" style="display: none">
search two data
</div>
<div id="searchthree" style="display: none">
search three data
</div>
</td>
</tr>
</table>
</body>
</html>

to insert an iamge obviously just replace the text with an <img> here

<a href="#" onclick="toggle_visibility('searchone');">Search One</a>

**Andyram2k** · 04-28-2009 04:37 AM

Thankyou very much Rufe0, that's a great starting point. Much appreciated!

Thread: Div-based selection menu help please

Thread Tools

Display

Div-based selection menu help please

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions