button status

[st3]

hi there, need your help, hope for the best.

my goal: there is a number X of button (all normal images IMAGE1). if i press a button (IMAGE 1) he should change his image (IMAGE 2) and stay this way (not like onmouseover/out or onmouseclick). until i click an other button which change now his picture (IMAGE 2) and the button who was pressed before should go back in "not pressed" state (IMAGE 1).

i´m pretty bad with java script but just need i link in the right direction to do this.

thanks a lot for anny help.

[Mr J]

Please try the following.
Change the images to your own



<script language="JavaScript">
<!--
var Images = new Array("yourimageon.gif","yourimageoff.gif","yourimagestay.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 = "yourimageon.gif":"")
}

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

function m_click(id){
document.getElementById(id).src = "yourimagestay.gif"
if (LastID != ""){
(LastID != id?document.getElementById(LastID).src = "yourimageoff.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>

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

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

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

[st3]

hey great, thanks a lot. that was exactly what i was looking for. is it okay for you when i use that script as it is for a commercial website?

but there is still one problem i tested it also with netscape7 and it didn`t worked out. no hover out or click effect. ???

[Mr J]

Please try the file in the zip

I'd tested the script in IE5.5, Netscape7, and Mozilla1.4 and it worked ok.


Just in case my post had not rendered correctly I copied the script from my post into a file and opened it in NS7 and it was fine


Try the zip

[st3]

ok. now its works fine in netscape to.

my fault. sorry, it was pretty late. becaue the first button should be in "was clicked" state when this site is loaded, i wrote for LastID = "" - LastID = "Image1". Image1 with capital I instead like the real image id "image1".

so, sorry, and thanks a lot for your help.