2 Scripts blockieren sich, bitte um Rat!

[madam'i'madam]

Hallo an alle!

Ich habe folgende 2 Scripts eingebunden:

<script>
var e = '.png';

onload = function(){ var T, M = [],
S = function (s, ss){ for ( var p in s = s.childNodes )
if( s[p].className == 'o' ) s[p].src = s[p][ss] }

for( var p in T = document.getElementsByTagName('*') )
if( T[p].className == 'm' ) M.push( T[p] )

for( var p in T = document.images )
if( T[p].className == 'o' ) { T[p].n = T[p].src
T[p].o = T[p].src.replace(e, '_o' + e) }

for( var p in M )
{ M[p].act = 1;

M[p].onmouseover = function(){ if( this.act ) S( this, 'o') }

M[p].onmouseout = function(){ if( this.act ) S( this, 'n') }

M[p].onclick = function (){

if( this.act ) { for( var p in M )
if ( !M[p].act ) { M[p].act = 1
S( M[p], 'n') }
this.act = 0
if( this.blur ) this.blur() } }




} }
</script>
////////////////////////////////////////////////////////
<script>
function toggleswitch(div)
{
var option=['profil1','profil2','profil3','profil4','profil5'];
for(var i=0; i<option.length; i++)
{ obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div) && !(obj.style.display=="block")? "block" : "none"; }
}
</script>

in der php-datei steht nun folgender code:

<a class="m" onclick="toggleswitch('profil1')" href="#">
<img class=o src=img/linksite_left_img/start.png>
</a>
beide scripts/effekte funktionieren gut, ohne dass der html code geändert wird, sobald ich eins von beiden nicht einbinde.
zusammen wird aber nur der mouseover effekt wirksam.

Ich vermute es liegt an "document.getElementsBy...", die sich gegenseitig überschreiben. Leider weiß ich nicht, wie ich beides vereinen kann.

Kann mir jemand helfen?

Vielen Dank im Vorraus.

MFG
madam'I'madam

[kkapsner]

Nö - daran liegt's nicht. Es liegt daran, dass du den onclick-Handler im oberen Code überschreibst. Wenn du das verhindern musst du mit .addEventHandler (w3c) bzw. .attachEvent (IE) arbeiten.

Aber mal Hand auf's Herz: findest du diesen Code wirklich gut geschrieben? Alleine schon die Funktions-/Parameter-/Variablennamen... und den <script> fehlt das type-Attribut.

[madam'i'madam]

Hi kkapsner!

Vielen Dank für die schnelle Antwort.
Sicherlich gibt es an dem code noch sehr viel zu verbessern. ich beschäftige mich erst seit ca. 1 Woche mit javascript.
Das ist auch der Grund, warum ich mit ".addEventHandler" nicht viel anfangen kann, bzw. nicht weiß, wie der code danach damit aussehen soll.
Für ein konkretes Beispiel (evtl auch für einen script - "type"^^) wäre ich daher sehr dankbar. = )

Viele Grüße

[kkapsner]

http://lmgtfy.com/?q=Javascript+addE...er+attachEvent
http://de.selfhtml.org/html/transit/scripts.htm

[madam'i'madam]

Danke!^^

[ein schlauer]

Sicherlich gibt es an dem code noch sehr viel zu verbessern. ich beschäftige mich erst seit ca. 1 Woche mit javascript.

Das hindert dich daran den Funktionen sinnvolle Namen zu geben?

[madam'i'madam]

Hallo nochmal.
Die Namen sind so gewählt worden, weil es am schnellsten ging.
Hier eine überarbeitete Version, ich habe eine Lösung gefunden, wie man beide Funktionen vereinen kann, ohne w3c oder addeventhandler zu benutzen.
Falls es jemanden interessiert, der ein ähnliches Konzept einbauen möchte:

<script type="text/javascript">
var e = '.png',
j = 0;


onload = function()
{
var T, M = [],
S = function (s, ss){ for ( var p in s = s.childNodes )
if( s[p].className == 'o' ) s[p].src = s[p][ss] }




for( var p in T = document.getElementsByTagName('*') )
if( T[p].className == 'm' ) { M.push( T[p] )
}



for( var p in T = document.images )
if( T[p].className == 'o' ) { T[p].n = T[p].src
T[p].o = T[p].src.replace(e, '_o' + e)
}



for( var p in M )
{ M[p].act = 1;

M[p].onmouseover = function(){ if( this.act ) S( this, 'o') }

M[p].onmouseout = function(){ if( this.act ) S( this, 'n') }

M[p].onclick = function (){

if( this.act ) { for( var p in M )
if ( !M[p].act ) { M[p].act = 1
S( M[p], 'n') }
this.act = 0
if( this.blur ) this.blur() }

if( this.name == 'eins' ) { j = 1; }
if( this.name == 'zwei' ) { j = 2; }
if( this.name == 'drei' ) { j = 3; }
if( this.name == 'vier' ) { j = 4; }


var option=['1','2','3','4'];

for(var i=0; i<option.length; i++)
{
obj=document.getElementById(option[i]);
obj.style.display=(option[i]==j) && !(obj.style.display=="block")? "block" : "none";
}
}
}
}
</script>

In der HTML - Datei:

<a class="m" name="eins" href="#">
<img class=o src=bilder/start.png>
</a>
<a class="m" name="zwei" href="#" >
<img class=o src=bilder/bild2.png>
</a>
...usw

Danach div-boxen mit:
<div id="1" class="cont">
Inhalt
</div>
<div id="2" class="contentx">
Inhalt
</div>
<div id="3" class="contentx">
Inhalt
</div>
...usw

In der CSS-Datei:

div.cont
{
display:none;
background:...;
usw
}

div.contentx
{
display:none;
...usw
}

Für Kritik bin ich gerne zu haben, ansonsten viel Spaß!

[madam'i'madam]

Entschuldigung:

In der CSS muss es heißen:

"
div.cont
{
display:block;
}
...
"
(sonst würde eine zweite "contentx" keinen sinn machen)

Außerdem müssen sich in dem ordner "bilder" jeweils ein bild mit dem richtigen namen (zB "start.png") und ein bild mit angefügtem anhängsel (zB "start_o.png") befinden, damit diese beim mouseover und onclick ausgetauscht werden können.

MfG

[ein schlauer]

Ein obfuscator könnte es nicht besser.

[kkapsner]

ID's dürfen nicht mit Zahlen beginnen.
Und wirklich toll ist das Prinzip nicht, da es extrem unflexibel ist, alle Funktionen in eine zu packen.

PS: ich geb' dem Schlauen wirklich recht!