"this" Won't Work.

[MrFish]

I'm trying to make a menu bar. All the div ids have their own css style with 20% opacity. I'm trying to make it so on the mouse over it will become have 100% opacity. I'm trying to use "this" but it won't work. If I substitute "usercp" instead of the x variables in the function then it works fine, but if I do that I'll need a mouseover script for each one of the divs.

<script type="text/javascript">	function menubar_dropdown(x){		document.getElementById(x).style.opacity=1;		document.getElementById(x).style.filters.alpha.opacity=100;	}</script><div id="wrapper">	<div id="center_wrapper">		<div id="userinfo"> <!-- user info top banner; login / messages / page activities / war room -->			<div id="userinfo_login" class="userinfo_bannerelement" style="border-right: 1px solid #bbb;">				Login Box			</div>			<div id="userinfo_messages" class="userinfo_bannerelement" style="border-right: 1px solid #bbb;">				Messages			</div>			<div id="userinfo_pageevents" class="userinfo_bannerelement" style="border-right: 1px solid #bbb;">				Page Events			</div>			<div id="userinfo_warroom" class="userinfo_bannerelement">				War Room			</div>		</div>		<div id="header"> <!-- header banner; logo / search / menubar -->			<div id="header_searchbar">				Site search bar.			</div>			<div id="header_menubar">				<div class="menubar_element" id="usercp" OnMouseOver="menubar_dropdown(this)">UserCP</div>				<div class="menubar_element" id="community" OnMouseOver="menubar_dropdown(this)">Community</div>				<div class="menubar_element" id="help" OnMouseOver="menubar_dropdown(this)">Help</div>			</div>

Hmmm >.>

[jeffman]

In this context, when you pass "this", it is a reference to the div itself, NOT the div's id property. So your menubar function can have statements like this:x.style.opacity=1;