Switching button and definition in the text
The idea
We are using a button to send a command to the Web page, and we want to
change the button to the opposite state when this command is executed, for
sending then the opposite command.
The examples we are using are the "summarize" and "develop"
commands allowing to reduce or expand the content of a page at request of
the reader.
These examples requires the Ajax Extensible Page library that is provided on this site, it is free and open source.
Button switching
The code to insert in the Web page is very simple and doesn't require any programming:
<div onclick="switchButton(this);">
<img src="develop.gif" />
</div>This is a standard tag to insert a button plus an attribute to call a function.
We have also to include the JavaScript function into the head section of
the page:
<script src="oneButton.js" type="text/JavaScript"></script>Nothing else is required to create a two-states button.
Demonstration
 |
This is a demo written in JavaScript for showing how to switch between buttons.
This is an Ajax framework that allows to build extensible Web pages.
Source code of the page
<style>
.aep { color: #009; }
</style>
<script src="extensible.js" type="text/javascript"></script>
<script src="oneButton.js" type="text/javascript"></script>
<div onclick="switchButton(this);">
<img src="develop.gif" width="62" height="16" align="middle">
</div>
<div id="x2" style="display:none;">a scripting language for the Web</div>
This is a demo written in
<span id="aep" name="x2" class="aep" onclick="quietVerbose(this);" >JavaScript</span>
for showing how to switch between buttons. <br>
This is an
<span id="aep" src="definition.txt" class="aep" onclick="quietVerbose(this);" >Ajax</span>
framework that allows to build extensible Web pages. Code of the script oneButton.js
var buttonDevelop = "develop.gif";
var buttonSummarize = "summarize.gif";
function switchButton(element)
{
var d = buttonDevelop.length;
var s = buttonSummarize.length;
var image = element.firstChild;
var name = image.getAttribute("src");
var iname = name.substr(name.length - d, d);
if(iname == buttonDevelop)
{
image.setAttribute("src", buttonSummarize);
develop();
return;
}
iname = name.substr(name.length - s, s);
if(iname == buttonSummarize)
{
image.setAttribute("src", buttonDevelop);
summarize();
return;
}
}