N'abend kaplar
- kann man so lassen? -
Kann man selbstverständlich. Es kommt halt drauf an, was man vorhat.
Ich würde mir an dieser Stelle mal ein paar warme Gedanken um
wiederverwendbaren Code machen.
Die Probleme dabei sind - wie immer - die unterschiedlichen
Arbeitsweisen der verschiedenen browser, im folgenden
mal exemplifiziert am Beispiel eines Rückgabewertes : background-Color,
bzw. bgColor(nn4).
Wichtig sind solcherlei Dinge, wenn man komplexere dynamische Strukturen
aufbauen möchte - dann nämlich ist man auf diese Werte angewiesen.
opera verwendet als default-Rückgabewert die hexadezimale Darstellung,
IE und NN>6 nehmen die Form rgb(1,2,3) und NN4 hat was ganz besonders
hübsches: Der nummeriert einfach alle Farben von 0 bis 16777215 durch,
was selfHTML zu der denkwürdigen Feststellung veranlasst:
"Beachten Sie:
Sie können die Hintergrundfarbe eines Layers nicht abfragen, da Netscape 4 merkwürdige bgColor-Werte zurücklieferte,
die nicht in das von Netscape dokumentierte Schema (hexadezimale Angabe oder Farbname) passen."
Aber das ist natürlich Quatsch, natürlich kann man das.
Nicht bloß die Hintergrundfarbe eines Layers, sondern auch die jedes
identifizierten, absolut oder relativ positionierten tags.
In function UP habe ich ein paar Möglichkeiten der Abfrage angegeben, die Konvertierung
bloßer Farbnamen habe ich mir jetzt gespart, aber das geht auch.
</font><blockquote><font size="1" face="Verdana, Helvetica, sans-serif">Code:</font><hr /><pre style="font-size:x-small; font-family: monospace;"><html>
<head>
<style>
h1{position:absolute;color:987654;}
h2{position:absolute;}
div{position:absolute;}
img{position:absolute;}
#netscape{position:absolute;top:300;left:300;}
span{position:absolute;}
</style>
<script src='ID.js'></script>
<script>
if(nc)d.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP | Event.MOUSEMOVE);
d.onmousedown=DOWN; d.onmousemove=MOVE; d.onmouseup=UP; onload=INIT;
var r,g,b, q='', m=0, ed, pontiuspilatus='wehrftihntzupoden';
function DOWN(o)
{ed=iw?event.srcElement.id:mz?o.target.id:nc?o.target.name:null;
if(ed&&ed.match(/triggim[rgb]/))m=1;
return false;
};
function MOVE(o)
{var y=iw?event.y:mz?o.clientY:nc?o.pageY:0;
var f=Math.round(255-(y-(ie?22:mz ## nc?20:wo?21:null))/180*255); //<--HIER
if(f>=0&&f<=255 && m==1)
{ed=='triggimr'?(r=f,q='r'):ed=='triggimg'?(g=f,q='g'):ed=='triggimb'?(b=f,q='b'):null;
B(pontiuspilatus,r,g,b);
B('ohstern',r,g,b);
T('trigger'+q,ie?y-19:wo ## mz ## nc?y-17:null); //<--HIER
if(!nc)d.fo.inp.value=RGB(r,g,b)+' '+q;
if(nc)NID('spanner2').document.fo.inp.value=RGB(r,g,b)+' '+q;
};
return false;
};
function UP()
{if(ed&&ed.match(/triggim[rgb]/))
{alert(B('ohstern'));
alert(S('ohstern')[nc?'bgColor':'backgroundColor']+' <-- default');
B('scheissdochderhunddrauf',B('ohstern'));
if(nc)NRGB(S('ohstern').bgColor,'V');
};
m=0;
};
function INIT()
{r=g=b=255;
WF('spannerr',T,10,L,8);
WF('spannerg',T,10,L,44);
WF('spannerb',T,10,L,80);
WF('spanner2',T,10,L,120);
WF('wehrftihntzupoden',T,10,L,8,W,300,H,300);
WF('ohstern',T,10,L,350);
T('scheissdochderhunddrauf',400)
WS(T,'trigger','r','g','b',3);
};
</script>
</head>
<body>
<h2 id='ohstern'>balooba</h2>
<div id='wehrftihntzupoden'><s id=netscape></s></div>
<span id='spannerr'>
<div id='skalar'>
<img src='../images/skala.gif' width=20 height=200>
</div>
<div id='triggerr'>
<img src='../images/trigger.gif' id='triggimr' name='triggimr' width=15 height=16 alt=''>
</div>
</span>
<span id='spannerg'>
<div id='skalag'>
<img src='../images/skala.gif' width=20 height=200>
</div>
<div id='triggerg'>
<img src='../images/trigger.gif' id='triggimg' name='triggimg' width=15 height=16 alt=''>
</div>
</span>
<span id='spannerb'>
<div id='skalab'>
<img src='../images/skala.gif' width=20 height=200>
</div>
<div id='triggerb'>
<img src='../images/trigger.gif' id='triggimb' name='triggimb' width=15 height=16 alt=''>
</div>
</span>
<span id='spanner2'>
<form name='fo'>
<input name='inp' readonly readonly=readonly onkeyup="NID('spanner2').document.fo.inp.value=RGB(r,g,b)+' '+q"></input>
</form>
</span>
<h1 id='scheissdochderhunddrauf'>s'is schoo a kreiz</h1>
</body>
</html>[/code]</blockquote><font size="2" face="Verdana, Helvetica, sans-serif">Die zugehörige js Datei heißt ID.js:
</font><blockquote><font size="1" face="Verdana, Helvetica, sans-serif">Code:</font><hr /><pre style="font-size:x-small; font-family: monospace;">d=document, iw = d.all, wo = window.opera, ie = iw&&!wo, mz = d.getElementById&&!iw, nc = d.layers;
Ni=[];
function A(p1,p2){return A.arguments.length==1?p1.arguments.length:p1.arguments[p2]};
function D(p1){return iw?iw[p1]:mz?d.getElementById(p1):nc?NID(p1):null};
function S(p1){return iw ## mz?D(p1).style:nc?NID(p1):null}; //<-- HIER
function B(p1,p2,p3,p4)
{return A(B)==1?nc?NRGB(S(p1).bgColor):RGB(S(p1).backgroundColor):
S(p1)[nc?'bgColor':'backgroundColor']=A(B)==2?p2:nc?RGB(p2,p3,p4,'#'):RGB(p2,p3,p4)};
function F(p1,p2){return A(F)==1?I(S(p1).fontSize):S(p1).fontSize=p2};
function H(p1,p2){return A(H)==1?I(S(p1).height):S(p1).height=p2};
function L(p1,p2){return A(L)==1?I(S(p1).left):S(p1).left=p2};
function T(p1,p2){return A(T)==1?I(S(p1).top):S(p1).top=p2};
function W(p1,p2){return A(W)==1?I(S(p1).width):S(p1).width=p2};
function RGB(p1,p2,p3)
{if(A(RGB)<=2)
{if(p1)
{function RGBX(x1,x2){return (p1.match(/#/)?(eval('0x'+p1.match(x1)[1]).toString(10)):p1.match(x2)[1])*1};
var r=RGBX(/#(..)/,/((d+)/);
var g=RGBX(/#..(..)/,/,(d+)/);
var b=RGBX(/#....(..)/,/(d+))/);
return p2==0?nc?I6(r):r:p2==1?nc?I6(g):g:p2==2?nc?I6(b):b:'rgb('+r+','+g+','+b+')';
}
else{var c=RGB.caller.caller?RGB.caller.caller:RGB.caller;alert('farbwert in n'+c+'nnicht definiert')};
};
if(A(RGB)==3)return 'rgb('+p1+','+p2+','+p3+')';
if(A(RGB)==4)return '#'+I6(p1)+I6(p2)+I6(p3);
};
function I(p1){return parseInt(p1)};
function I6(p1){return IX(p1.toString(16))};
function IX(p1){return p1.match(/^.$/)?'0'+p1:p1};
function MP2(p1){return Math.pow(2,p1)};
function WF(){for(var i=1;i<A(WF)/2;i++)eval('A(WF,i*2-1)'+'('+'A(WF,0)'+',"'+A(WF,i*2)+'")')};
function WS(){for(var i=2;i<A(WS)-1;i++)eval('A(WS,0)'+'(' + 'A(WS,1)+A(WS,i)'+','+'A(WS,A(WS)-1)'+')')};
////////////////////////////////////////////////////////////////////////////////////////////////
function NRGB(p1,p2)
{var a=MP2(8),o=a*a;
var r=(p1-p1%o)/o%a;
var g=(p1-p1%a)/a%a;
var b=p1%a;
if(p2=='V')alert('rgb('+r+','+g+','+b+')'+'n'+'#'+I6(r)+I6(g)+I6(b)+'n'+p1);
return p2==0?I6(r):p2==1?I6(g):p2==2?I6(b):'#'+I6(r)+I6(g)+I6(b);
};
function NID(p1,p2)
{var z=0,l;
while(z<(l=(p2=p2?p2:d).layers).length)nid0=NID(p1,l[z++].document);
return (nid1=p2[p1])?nid1:nid0;
};
////////////////////////////////////////////////////////////////////////////////////////////////[/code]</blockquote><font size="2" face="Verdana, Helvetica, sans-serif">Wie gehabt bei HIER gatter durch pipes ersetzen.
Ich kommentier's jetzt nicht, bin schlicht zu müde, und es gäbe tatsächlich einiges zu zu sagen... Wenn Dir was nicht klar ist,
sach Bescheid.
gruß
matho
<small>[ 14-10-2002, 19:21: Beitrag editiert von: matho ]</small>