OK, now toggle the look of your button :
- You need to first move the "
footerbutton" span tag above the script.
( it must be defined in your browser before the script can access it to load the
first button)
- I can delete the up arrows from the span tag since the script now loads it
- Now add the aqua colored line of code to the same script as above.
<span id=footerbutton style="position:fixed;right:0px;bottom:0px;backgro und-color:blue;border:solid red 1px;" onClick="footexpand();"></span>
<script type="text/javascript">
var mytog = 0;
var putback = document.getElementById("footer").innerHTML;
document.getElementById("footerbutton").innerHTML = "X";
function footexpand() {
if (mytog == 0) {
document.getElementById("footer").innerHTML = "";
document.getElementById("footerbutton").innerHTML = "^^";
mytog=1;
}
else {
document.getElementById("footer").innerHTML = putback;
document.getElementById("footerbutton").innerHTML = "X";
mytog=0;
}
}
</script>
I updated the demo to show this :
http://ooaz.com/gfy/gfytest.html
To use an images instead of "X" and "^^"
Just change this "
document.getElementById("footerbutton").innerHTML = "X";
to this :
document.getElementById("footerbutton").innerHTML = "<img src=/images/closebutton.jpg border=0>";
And change this :
document.getElementById("footerbutton").innerHTML = "X";
To this :
document.getElementById("footerbutton").innerHTML = "<img src=/images/showbutton.jpg border=0>";
* making sure that any quotes in the HTML are single quotes, because double quotes
are already used. (this is interchangeable)