Image Toggle Onclick?

JavaScript
1

Hi, I do not know anything about Javascript (barely anything). I have this expanding menu that I need to change out the background images on the two main links (Menu 1 and Menu 2).

There would need to be an off, hover and clicked state for each button… It could either change out the background css, or it could just use image tags (there doesn’t need to be text because they are both just image buttons).

Here is what I have in my main html:


<html>
<head>
<title></title>
<script language="JavaScript" type="text/JavaScript">
		<!--
		menu_status = new Array();

		function showHide(theid){
    			if (document.getElementById) {
    			var switch_id = document.getElementById(theid);

        	if(menu_status[theid] != 'show') {
           		switch_id.className = 'show';
           		menu_status[theid] = 'show';
        	}else{
           		switch_id.className = 'hide';
           		menu_status[theid] = 'hide';
        		}
    		    }
		}

		//-->

		var last_expanded = '';

		function showHide(id)
		{
		var obj = document.getElementById(id);

		var status = obj.className;

		if (status == 'hide') {

		if (last_expanded != '') {
		var last_obj = document.getElementById(last_expanded);
		last_obj.className = 'hide';
		}

		obj.className = 'show';

		last_expanded = id;
		} else {
		obj.className = 'hide';
		}
		}
		</script>
</head>
<body onload="DoInit();">
<div id="menus">
  			<a class="menu1" onclick="showHide('mymenu1')">Menu 1</a>
			    <div id="mymenu1" class="hide">
        		      <div id="gadgetDiv"><span class="feedItem" onclick="DoClick();">Link One here</span></div>
        		      <div id="gadgetDiv"><span class="feedItem" onclick="DoClick();">Link Two here</span></div>
        		      <div id="gadgetDiv"><span class="feedItem" onclick="DoClick();">Link Three here</span></div>
        		      <div id="gadgetDiv"><span class="feedItem" onclick="DoClick();">Link Four here</span></div>
    			    </div>
			<a class="menu1" onclick="showHide('mymenu2')">Menu 2 </a>
			    <div id="mymenu2" class="hide">
        		        <div id="gadgetDiv"><span class="feedItem" onclick="DoClick();">Link One here</span></div>
        		        <div id="gadgetDiv"><span class="feedItem" onclick="DoClick();">Link Two here</span></div>
        		        <div id="gadgetDiv"><span class="feedItem" onclick="DoClick();">Link Three here</span></div>
        		        <div id="gadgetDiv"><span class="feedItem" onclick="DoClick();">Link Four here</span></div>
    			    </div>
</body>
</html>

and here is the javascript…


/* Expanding Menu */
function switchit(list){
var listElementStyle=document.getElementById(list).style;
if (listElementStyle.display=="none"){
listElementStyle.display="block";
}
else {
listElementStyle.display="none";
}
}
2

Easiest way would be to have 3 separate style definitions for the links (each with theere own background image, or using a sprite) and then toggle a class to each link on click to reference the 3rd style

e.g:

a.myLink {

}

a.myLink: hover {

}

a.myLink.active {

}