Forum Moderators: open
example: I have an arrow indicating a menu item has submenus, it called downarrow.gif. When I click this arrow I want to exchange it for uparrow.gif. When I click the upparrow.gif I want to switch back to downarrow.gif again. is this possible?
Any help is appreciated.
<html>
<head>
<script type="text/javascript">
/*swaps image by parameters, only activates if images preloaded already
1 is down, 0 is up, page defaults to up, switch to suite your preferences
the a_menu_items array is global, so it keeps the menu items value as set, the value will change
with each click.
Each menu item image must have the 'name="menu3"' or whatever, you pass the number
to the changeimage function, it uses that to write out which name to use.
This method is more stably supported cross browser, it will always work on all
browsers out there, unlike getElementById.
the a_menu_items array should have as many menu items as you have, although it doesn't really matter as long
as it has the same or more values as you have menu items
*/
// the number of array items must be at least
// equal to your number of menu items, these are the default start values that will change on each click
var a_menu_items = new Array(1, 1, 1, 1);
function changeimage(number)
{
if (document.images && g_bPreloadFlag)
{
imgName = 'menu' + number;
// loop through the menu items array
for ( i = 1; i < (a_menu_items.length + 1); i++ )
{
if ( number == i )
{
//pick the opposite state currently in the value
state = ( a_menu_items[i] == 0 )? 1 : 0;
// after assigning, switch the value to its opposite
( a_menu_items[i] == 0 )? a_menu_items[i] = 1 : a_menu_items[i] = 0;
break;
}
}
document.images[imgName].src = g_aMenu[0][state].src;
}
}
var g_bPreloadFlag = false;
var g_aMenu = new Array();
function preloadimages()
{
if (document.images)
{
var aOffOn = new Array(1);
g_aMenu[0] = aOffOn;
g_aMenu[0][0] = new Image();
g_aMenu[0][0].src = 'menu_up.gif';
g_aMenu[0][1] = new Image();
g_aMenu[0][1].src = 'menu_down.gif';
g_bPreloadFlag = true;
}
}
</script>
</head>
<body onload="preloadimages()">
<a href="#" onclick="changeimage(1)">
<img src="menu_down.gif" name="menu1">menu item</a><br>
<a href="#" onclick="changeimage(2)">
<img src="menu_down.gif" name="menu2">menu item</a><br>
</body>
</html>
