Kontrollere IMG i DOM-script
Dette er ikke mitt spørsmål, men bare en tanke: Burde ikke DOM være en egen kategori på eksperten?Jeg har et script som åpner/lukker seksjoner (DomCollapse), det utstyrer også trigger-tittelen med ett ikon (som står foran). Jeg skulle gjernen ha flyttet dette bildet til høyre (float: right), men aner ikke hvordan (kan ingenting om DOM, men bruker dette scriptet:
/*
* DOMcollapse
*/
dc={
triggerElements:'*', // elementer som trigger (sparer tid)
parentElementId:null, // ID foreldreelement ('null' om ingen)
uniqueCollapse:false, // kun én om gangen?
// CSS class
trigger:'trigger',
triggeropen:'expanded',
hideClass:'hide',
showClass:'show',
// bilde og tekst
closedPic:'../img/closeAll.gif',
closedAlt:'Utvid seksjonen',
openPic:'../img/openAll.gif',
openAlt:'Lukk seksjonen',
/* Funker ikke med Safari:
hoverClass:'hover',
*/
init:function(e){
var temp;
if(!document.getElementById || !document.createTextNode){return;}
if(!dc.parentElementId){
temp=document.getElementsByTagName(dc.triggerElements);
} else if(document.getElementById(dc.parentElementId)){
temp=document.getElementById(dc.parentElementId).getElementsByTagName(dc.triggerElements);
}else{
return;
}
dc.tempLink=document.createElement('a');
dc.tempLink.setAttribute('href','#');
dc.tempLink.appendChild(document.createElement('img'));
for(var i=0;i<temp.length;i++){
if(dc.cssjs('check',temp[i],dc.trigger) || dc.cssjs('check',temp[i],dc.triggeropen)){
dc.makeTrigger(temp[i],e);
}
}
},
makeTrigger:function(o,e){
var tl=dc.tempLink.cloneNode(true);
var tohide=o.nextSibling;
while(tohide.nodeType!=1)
{
tohide=tohide.nextSibling;
}
o.tohide=tohide;
if(!dc.cssjs('check',o,dc.triggeropen)){
dc.cssjs('add',tohide,dc.hideClass);
tl.getElementsByTagName('img')[0].setAttribute('src',dc.closedPic);
tl.getElementsByTagName('img')[0].setAttribute('alt',dc.closedAlt);
o.setAttribute('title',dc.closedAlt);
o.setAttribute('img',dc.closedAlt);
}else{
dc.cssjs('add',tohide,dc.showClass);
tl.getElementsByTagName('img')[0].setAttribute('src',dc.openPic);
tl.getElementsByTagName('img')[0].setAttribute('alt',dc.openAlt);
o.setAttribute('title',dc.openAlt);
dc.currentOpen=o;
}
dc.addEvent(o,'click',dc.addCollapse,false);
/* Doesn't work with Safari
dc.addEvent(o,'mouseover',dc.hover,false);
dc.addEvent(o,'mouseout',dc.hover,false);
*/
o.insertBefore(tl,o.firstChild);
dc.addEvent(tl,'click',dc.addCollapse,false);
// Safari hacks
tl.onclick=function(){return false;}
o.onclick=function(){return false;}
},
/* Doesn't work with Safari
hover:function(e){
var o=dc.getTarget(e);
var action=dc.cssjs('check',o,dc.hoverClass)?'remove':'add';
dc.cssjs(action,o,dc.hoverClass)
},
*/
addCollapse:function(e){
var action,pic;
if(dc.uniqueCollapse && dc.currentOpen){
dc.currentOpen.getElementsByTagName('img')[0].setAttribute('src',dc.closedPic);
dc.currentOpen.getElementsByTagName('img')[0].setAttribute('alt',dc.closedAlt);
dc.currentOpen.setAttribute('title',dc.closedAlt);
dc.cssjs('swap',dc.currentOpen.tohide,dc.showClass,dc.hideClass);
dc.cssjs('remove',dc.currentOpen,dc.triggeropen);
dc.cssjs('add',dc.currentOpen,dc.trigger);
}
var o=dc.getTarget(e);
if(o.tohide){
if(dc.cssjs('check',o.tohide,dc.hideClass)){
o.getElementsByTagName('img')[0].setAttribute('src',dc.openPic);
o.getElementsByTagName('img')[0].setAttribute('alt',dc.openAlt);
o.setAttribute('title',dc.openAlt);
dc.cssjs('swap',o.tohide,dc.hideClass,dc.showClass);
dc.cssjs('add',o,dc.triggeropen);
dc.cssjs('remove',o,dc.trigger);
}else{
o.getElementsByTagName('img')[0].setAttribute('src',dc.closedPic);
o.getElementsByTagName('img')[0].setAttribute('alt',dc.closedAlt);
o.setAttribute('title',dc.closedAlt);
dc.cssjs('swap',o.tohide,dc.showClass,dc.hideClass);
dc.cssjs('remove',o,dc.triggeropen);
dc.cssjs('add',o,dc.trigger);
}
dc.currentOpen=o;
dc.cancelClick(e);
//document.getElementById('debug').innerHTML=o.tohide.className;
}
else{
dc.cancelClick(e);
}
},
/* helper methods */
getTarget:function(e){
var target = window.event ? window.event.srcElement : e ? e.target : null;
if (!target){return false;}
while(!target.tohide && target.nodeName.toLowerCase()!='body')
{
target=target.parentNode;
}
// if (target.nodeName.toLowerCase() != 'a'){target = target.parentNode;} Safari fix not needed here
return target;
},
cancelClick:function(e){
if (window.event){
window.event.cancelBubble = true;
window.event.returnValue = false;
return;
}
if (e){
e.stopPropagation();
e.preventDefault();
}
},
addEvent: function(elm, evType, fn, useCapture){
if (elm.addEventListener)
{
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
} else {
elm['on' + evType] = fn;
}
},
cssjs:function(a,o,c1,c2){
switch (a){
case 'swap':
o.className=!dc.cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);
break;
case 'add':
if(!dc.cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;}
break;
case 'remove':
var rep=o.className.match(' '+c1)?' '+c1:c1;
o.className=o.className.replace(rep,'');
break;
case 'check':
return new RegExp("(^|\\s)" + c1 + "(\\s|$)").test(o.className)
break;
}
}
}
dc.addEvent(window, 'load', dc.init, false);
***
Henrik, Oslo
