Javascript Menu

GaRNeT — Fri, 09 Mar 2007 15:09:28 +0800

Hi, I want to create a menu that use arrows as bullets. The menu is supposed to have several layers of menu under it. So, when i clicked the menu the arrow is supposed to change into another arrow and when i close up the switch menu, the arrow will return to normal. Now, how do i alternate the pictures of arrow to suit my needs? I am not very familiar with javascript fyi. I found a way to flip it once but then how do i flip it back. here is the code for the flipping part:

CODE

function flip() {
if (document.images)
document.images['image1'].src = 'image2.gif';
}
<a href="#" onClick="flip();return false"><img src="image1.gif" name="image1" width="100" height="100" border="0"></a>

Then, another question. When I clicked a menu to open the respective page, how do i make the selected menu different. I mean like bold or colouring. I know how to change the appearane. But then how can i make the changes temporary only. After i clicked another link at the menu, the previous selected menu revert back to normal and the newly selected one change? I think this involves css and javascript but i can't seem to figure out how. an example on the internet can be seen here :

change menu appearance

check out its menu at the side. i want to make it into something like that.

Change picture

something like that instead i want to use arrows that can be reverted back to normal. as you can see the example only works one way.

Thanks.

[addedon]March 9, 2007, 4:01 pm[/addedon]Hi all sorry for troubling you guys... but my friend eventually managed to explain the first part of my problem to me and solved it. So now it only leaves me with the second problem. Just in case anyone wondering the solution, here it is:

CODE

function changeSrc()
{
var control = document.getElementById("control").value
if (control == "0"){
document.getElementById("myImage").src="hackanm.gif"
document.getElementById("control").value="1"}
else {
document.getElementById("myImage").src="compman.gif"
document.getElementById("control").value="0"}
}
function setControlValue()
{ document.getElementById("control").value = "0" }
</script>
</head>

<body onload="setControlValue()">
<img id="myImage" src=" compman.gif" width="107" height="98" />
<br /><br />
<input id="control" type="hidden">
<input type="button" onclick="changeSrc()" value="Change image">
</body>

Thanks anyway, but i still got another problem. Maybe i'll try to solve it in a similar way to the first one. I'll post here if i found the solution. In the mean time, if you already have the solution, please feel free to post. Thanks.

Lowyat.NET: Latest topics by GaRNeT

Javascript Menu