onclick to change the content & the image correspondingly

Hello,

I have 5 images, when I click each image it shows the content corresponds to the image and hides others. It works fine. Now at the same time I want to change the color of the images, highlight the clicked one, the rest is the same. How can I do that?

function toggleMenu(currMenu) {
for (i=1; i<6; i++) {
var theMenu = 'menu'+i
var thisStyle = (document.getElementById) ? document.getElementById(theMenu).style : eval("document." + theMenu)

if(theMenu == currMenu) {
thisStyle.display = "block"
thisStyle.visibility = "visible"

} else {
thisStyle.visibility = "hidden"
thisStyle.display = "none"

}
}
}

Thanks!

Please try the following code, you will need 3 images




<script language="JavaScript">
<!--
var Images = new Array("yourimageover.gif","yourimageout.gif","yourimageon.gif") // list images to preload
var preloadImages=new Array() // preloads images
for (i=0;i<=Images.length-1;i++) {
preloadImages[i]=new Image()
preloadImages[i].src=Images[i]
}

LastID = ""

function m_over(id){
(LastID != id?document.getElementById(id).src = "yourimageover.gif":"")
}

function m_out(id){
(LastID != id?document.getElementById(id).src = "yourimageout.gif":"")
}

function m_click(id){
document.getElementById(id).src = "yourimageon.gif"
if (LastID != ""){
(LastID != id?document.getElementById(LastID).src = "yourimageout.gif":"")
}
LastID = id
}
// -->
</script>

<a href="yourpage.htm" onMouseOver="m_over('image1');" onMouseOut="m_out('image1')" onClick="m_click('image1')"><img src="yourimageoff.gif" border="0" id="image1">Link One</a>

<a href="yourpage.htm" onMouseOver="m_over('image2');" onMouseOut="m_out('image2')" onClick="m_click('image2')"><img src="yourimageoff.gif" border="0" id="image2">Link Two</a>

<a href="yourpage.htm" onMouseOver="m_over('image3');" onMouseOut="m_out('image3')" onClick="m_click('image3')"><img src="yourimageoff.gif" border="0" id="image3">Link Three</a>