Hallo,
Ich habe schon einiges probiert von dem was ich durch suchen gefunden habe, aber irgendwie geht das alles nicht.
Zunächst muss ich sagen, dass ich totaler Neuling bei JavaScript bin, aber mit HTML un C++ kenn ich mich schon ein wenig aus, also ich versteh durchaus auch bissl was bei JavaScript ;)
Aber ich hoffe ihr könnt mir hierbei weiterhelfen.
Und zwar möchte ich gerne mehrere Links auf einer Seite unterbringen und wenn man dann das Bild vor dem Link anklickt soll unter dem Link ein iFrame aufpoppen und zu schließen soll es auch sein.
Ich habe hier den Quelltext der für ein "Fenster" funktioniert, sobald ich aber mehrere Links einfüge, gehen alle mit einmal auf bzw. zu.
--------------------------------------------------------------
<script language="javascript">
window.onload = hideTable;
a=0;
function hideTable() {
if(a==0) {
document.getElementById('hidetable1').innerHTML="<div style="font-size:small;background-color:#DAEAC2;"></div>";
document.getElementById('changepic1').src="../image/plus.gif";
document.getElementById('changetext1').innerHTML="Alphabetisches Teamverzeichnis anzeigen";
a=1; }
else {
document.getElementById('hidetable1').innerHTML="<iframe src="drucken.htm" width="100%" name="iFrame" border="0" frameborder="0" scrolling="no" id="listFrame"></iframe>";
document.getElementById('changepic1').src="../image/minus.gif";
document.getElementById('changetext1').innerHTML="Alphabetisches Teamverzeichnis minimieren";
a=0; }
}
function setIFrameHeight(bSize)
{
document.getElementById("listFrame").style.height = bSize + 'px';
}
</script>
<div><a href="javascript: hideTable();"><img alt="" src="../image/plus.gif" id="changepic1" style="border: medium none ;"></a> <span id="changetext1" class="gen-h2">bla1 anzeigen</span></div>
<div style="border: 1px solid rgb(160, 160, 160); width: 600px;" id="hidetable1"><div style="font-size: small; background-color: rgb(218, 234, 194);"></div></div>
--------------------------------------------------------------
Und dann habe ich hier einen selbstversuch der immer damit endet, dass folgende Fehlermeldung kommt:
'document.getElementById(...)' ist Null oder kein Objekt
Hier der Quellcode:
--------------------------------------------------------------
<script language="javascript">
a=0;
b=0;
function hideTable(b) {
alert("a = " + a + ", b = " + b);
hidetable = 'hidetable' + b;
changepic = 'changepic' + b;
changetext = 'changetext' + b;
alert("hidetable = " + hidetable + ", changepic = " + changepic + ", changetext = " + changetext);
if(a==0) {
document.getElementById('hidetable').innerHTML="<div style="font-size:small;background-color:#DAEAC2;"></div>";
document.getElementById('changepic').src="../image/plus.gif";
document.getElementById('changetext').innerHTML="bla anzeigen";
a=1; }
else {
document.getElementById('hidetable').innerHTML="<iframe src="beschreibung.htm" width="100%" name="iFrame" border="0" frameborder="0" scrolling="no" id="listFrame"></iframe>";
document.getElementById('changepic').src="../image/minus.gif";
document.getElementById('changetext').innerHTML="bla minimieren";
a=0; }
}
function setIFrameHeight(bSize)
{
document.getElementById("listFrame").style.height = bSize + 'px';
}
</script>
<div><a href="javascript: hideTable(0);"><img alt="" src="../image/plus.gif" id="changepic0" style="border: medium none ;"></a> <span id="changetext0" class="gen-h2">bla1 anzeigen</span></div>
<div style="border: 1px solid rgb(160, 160, 160); width: 600px;" id="hidetable0"><div style="font-size: small; background-color: rgb(218, 234, 194);"></div></div>
--------------------------------------------------------------
Recht herzlichen Dank schon ma.
MfG ScReAmEr