Webdesign 101: DHTML eksempelside

Webdesign 101 » DHTML eksempler » Eksempel 6

Overblændingseffekt på menuer

Fører du musen hen over menuen til højre ser du en overblændingseffekt fra det ene menupunkt til det andet.

Det er et (sjældent?) eksempel på en praktisk anvendelse af de MSIE-specifikke overblændingsfiltre, der introduceres på websiden IE-specifikke filtereffekter. Da disse effekter kun virker i Internet Explorer, har jeg ikke skænket dem meget opmærksomhed, men for en måneds tid siden faldt jeg på javascripts.com over et lille script, jeg ikke kunne stå for, nemlig det, der laver den lille kosmetiske effekt på menuen her på siden.

function hiLight(objekt) {
 if(msie && !opera) {
    objekt.filters.blendTrans.apply();
    objekt.filters.blendTrans.play();
 }
}

Scriptet bruger den syntaks, Microsoft har offentliggjort for disse filtre. Det filter, der anvendes her, er blendTrans, der netop er et rent overblændingsfilter, der toner et element ind over et andet over en vis tidsperiode.

Det element, der skal ske overblænding på, skal forsynes med filter-egenskaben. Den menu, der bruges her, er baseret på en stylesheet-formatering af menuens a-markører (se nærmere herom på websiden Menuknapper med CSS). Følgelig er der tilføjet en formregel til mit stylesheet for denne menu:

.cssmenu a {
  filter:blendTrans(duration=0.5);
  display:block;
  color:#1a0099 !important;
  background:#fff !important;
  margin:0;
  width:100%;
  padding:4px;
  font-size:12px;
  font-weight:bold;
  border-top:1px solid #336;
  text-decoration:none;
}

Her ser du tilføjelsen markeret med rødt. Jeg angiver det filter, der skal bruges samt den tid (her et halvt sekund), overblændningen skal tage.

Funktionen hiLight() udløses af mouseover og mouseout, således at menupunkterne også skal tilføjes disse event handlers, således:

onmouseout="hiLight(this)" 
onmouseover="hiLight(this)" 

Andre browsere

Nu er der jo andre browsere til i verden end Microsofts. Derfor foretager jeg browerfiltrering i funktionen hiLight(objekt). De to variable - msie og opera - sættes efter omstændighederne til true eller false i min browsersniffer, der i forvejen er indlæst på alle websider som en del af en fælles JavaScript-fil ved navn common.js. Det er nødvendigt at frafiltrere Opera-browseren, for den opfylder visse kendetegn ved Internet Explorer, men kan altså ikke tolke filter-egenskaben.

Ved denne browserfiltrering undgår jeg eventuelle JavaScript fejl i f.eks. Netscape eller Opera.

Men jeg har jo desuden oprettet et stylesheet, der indeholder en "ulovlig" formregel. Websidens CSS kan derfor ikke validere som korrekt CSS.

Da jeg generelt stræber efter at lave sider, der validerer som korrekt HTML og korrekt CSS, har jeg sørget for, at det stylesheet, der indeholder den "ulovlige" formregel, kun indsættes på websiden, når browseren er Internet Explorer. Min fælles JavaScript-fil indeholder nemlig følgende:

if (msie) {
document.write('<link rel="stylesheet" 
-->  type="text/css" 
-->  href="/web102/res/style/iefilter.css">\n');
}

Det er nok lidt ufint - siden ville jo stadig ikke validere, dersom dette stylesheet var indsat på siden - men med denne løsning opdager W3C's validator ikke "ulovligheden". Så jeg opfylder det 11. bud - "Don't get caught".

Oprettet 3. dec. 2002.
Senest opdateret: 29. maj 2003.