/    Sign up×
Community /Pin to ProfileBookmark

Div-based selection menu help please

Copy linkTweet thisAlerts:
Apr 28.2009

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 [/CODE]

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>[/CODE]

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@Rufe0Apr 28.2009 — 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>
[/QUOTE]
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>[/QUOTE]

to insert an iamge obviously just replace the text with an <img> here
<a href="#" onclick="toggle_visibility('searchone');">Search One</a>[/QUOTE]
Copy linkTweet thisAlerts:
@Andyram2kauthorApr 28.2009 — Thankyou very much Rufe0, that's a great starting point. Much appreciated!
×

Success!

Help @Andyram2k spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...