|
Mit diesen JavaScript lässt sich auf kleinen Raum, eine menge Text unterbringen. Das spart Platz auf Ihrer Website. Sobald ein Knopf angewählt wurde erscheint seine Info in der Textaera neben den Knöpfen.
Autor: Sandeep Gangadharan
zur Demo
in <head> einfügen
<!-- Created by: Sandeep Gangadharan | http://sivamdesign.com/scripts/ -->
<script type="text/javascript">
<!--gefunden auf http://www.scriptwelt.org -->
// Topic 1-6 are numbered 0-5 below.
var details=new Array();
details[0] = "Das ist die Beschreibung zu Punkt eins."
details[1] = "Das ist die Beschreibung zu Punkt zwei"
details[2] = "Das ist die Beschreibung zu Punkt drei"
details[3] = "Das ist die Beschreibung zu Punkt vier"
details[4] = "Das ist die Beschreibung zu Punkt fünf"
details[5] = "Das ist die Beschreibung zu Punkt sechs"
details[6] = "Einfach einen Button anwählen"
function topica() {
if (document.texter.point[0].checked) { document.texter.text.value=details[0]; }
if (document.texter.point[1].checked) { document.texter.text.value=details[1]; }
if (document.texter.point[2].checked) { document.texter.text.value=details[2]; }
if (document.texter.point[3].checked) { document.texter.text.value=details[3]; }
if (document.texter.point[4].checked) { document.texter.text.value=details[4]; }
if (document.texter.point[5].checked) { document.texter.text.value=details[5]; }
}
// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
document.texter.text.value=details[6];
});
</script>
in <body> einfügen
<fieldset style="width: 400px;">
<legend><strong>Make your selection</strong></legend>
<form name="texter">
<table style="padding: 10px 10px 0 10px;">
<tr><td valign="top" class="smaller" width="100">
<input type="radio" name="point" onClick="topica();">Topic 1<br>
<input type="radio" name="point" onClick="topica();">Topic 2<br>
<input type="radio" name="point" onClick="topica();">Topic 3<br>
<input type="radio" name="point" onClick="topica();">Topic 4<br>
<input type="radio" name="point" onClick="topica();">Topic 5<br>
<input type="radio" name="point" onClick="topica();">Topic 6<br>
</td><td>
<textarea name="text" rows="6" cols="30" wrap="virtual" style="border: none; margin-left: 20px;"></textarea>
</td></tr>
</table>
</form>
|