PDA

Click to See Complete Forum and Search --> : Hover Button displays menu and displays certain image on menu display

NEONecd999
08-16-2003, 11:48 AM
This code I have right here creates a hover button that when clicked displays a list of links.

------------------------------------
<head>

<script language="javascript">
<!--
var Open = ""
var Closed = ""

function showhide(what){
if (what.style.display=='none'){
what.style.display='';
}
else{
what.style.display='none'
}
}
-->
</script>

<SCRIPT LANGUAGE="JavaScript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
rollcomlink_over = newImage("../images/leftButtonsOverComlink_03.gif");
preloadFlag = true;
}
}

// -->
</SCRIPT>

</head>

<body ONLOAD="preloadImages();">

<span class=sideheader><span id=menu1
style="CURSOR: hand"
onClick=showhide(menu1outline)> <a ONMOUSEOVER="changeImages('rollcomlink', '../images/leftButtonsOverComlink_03.gif'); return true;" ONMOUSEOUT="changeImages('rollcomlink', '../images/leftButtonComlink_03.gif'); return true;" ONCLICK="changeImages('rollcomlink', '../images/leftButtonsOverComlink_03.gif'); return true;" href="#">
<IMG NAME="rollcomlink" src="../images/leftButtonComlink_03.gif" border=0 width="123" height="23"></a></span> <span id=menu1outline
style="DISPLAY: none">

<font size="1">
<a href="link.htm">>> test</a><br>
<a href="link.htm">>> test</a><br>
<a href="link.htm">>> test</a><br>
<a href="link.htm">>> test</a><br>
<a href="link.htm">>> test</a><br>
<a href="link.htm">>> test</a><br>
<a href="link.htm">>> test</a><br>
<a href="link.htm">>> test</a><br>
<a href="link.htm">>> test</a><br>
<a href="link.htm">>> test</a><br>
<a href="link.htm">>> test</a><br>
<a href="link.htm">>> test </a>
</font><br><br>

</span></span>

</body>

------------------------------------------

How do I change the code so that the hover image ('../images/leftButtonsOverComlink_03.gif') is displayed when the menu is displayed, making the button no longer a hover button, and then when the button is clicked again and the menu is hidden the button goes back to its original image ('
../images/leftButtonComlink_03.gif') and the hover ability is activated once again?

Thanks for your help.
NEONecd999
08-16-2003, 02:07 PM
Please help ASAP
Ice3T
08-17-2003, 01:54 PM
Add this in your script area:
X=1
function funcX(){
if(X==1){document.getElementById('menu1').innerHTML="<IMG name=rollcomlink src=../images/leftButtonsOverComlink_03.gif border=0 width=123 height=23>"; X=2}
else{document.getElementById('menu1').innerHTML="<IMG name=rollcomlink src=../images/leftButtonsOverComlink_03.gif border=0 width=123 height=23 onMouseOver=changeImages('rollcomlink','../images/leftButtonsOverComlink_03.gif') onMouseOut=changeImages('rollcomlink','../images/leftButtonsOverComlink_03.gif') onClick=changeImages('rollcomlink','../images/leftButtonsOverComlink_03.gif')>"; X=1}
}


and replace this:
<span id=menu1
style="CURSOR: hand"
onClick=showhide(menu1outline)> <a ONMOUSEOVER="changeImages('rollcomlink', '../images/leftButtonsOverComlink_03.gif'); return true;" ONMOUSEOUT="changeImages('rollcomlink', '../images/leftButtonComlink_03.gif'); return true;" ONCLICK="changeImages('rollcomlink', '../images/leftButtonsOverComlink_03.gif'); return true;" href="#">
<IMG NAME="rollcomlink" src="../images/leftButtonComlink_03.gif" border=0 width="123" height="23"></a></span>

by this:
<span id=menu1 style="CURSOR: hand" onClick=showhide(menu1outline),funcX()>
<IMG name=rollcomlink src=../images/leftButtonsOverComlink_03.gif border=0 width=123 height=23 onMouseOver=changeImages('rollcomlink','../images/leftButtonsOverComlink_03.gif') onMouseOut=changeImages('rollcomlink','../images/leftButtonsOverComlink_03.gif') onClick=changeImages('rollcomlink','../images/leftButtonsOverComlink_03.gif')>
</span>