Hintzmann.dk

Indledning

mhaMicroIcons er små ikoner som vises ved siden af links. De kan bruges til at indikere om et link er intern eller extern, om linket er til en e-mail eller er af en bestemt type (jpg, gif, mpg, pdf, m.fl.).

Top

2002.11.14

Der er lavet en ændring så mhaMicroIcons nu også virker i Opera 7. Browseren understøtter ikke window.addEventListener, så den er ændret til document.addEventListener.

Top

Eksempler

Her er et par eksempler på, hvordan mhaMicroIcons kan bruges til at markere interne/externe links, mailto og links til forskellige fil formater.

• Send en e-mail ab@cd.dk
• Link til en ekstern side i nyt vindue http://www.google.com/
• Link til intern side readme.html
• Link til et billede miGif.gif

Her er et par links til nogle eksempler:

• rent eksempel med mhaMicroIcons, hvor HTML, JS og CSS er adskilt i 3 filer.
• alt-i-et eksempel med mhaMicroIcons, hvor HTML, JS og CSS er i 1 fil.
• eksempel med opsætning af mhaMicroIcons og cookies.

Top

Hvorfor ?

Mark Pilgrim har skrevet om hvordan man automatisk indsætter et billede før eksterne links, ved at bruge Movable Type makroer. På baggrund af den artikkel har Stuart lavet noget CSS som reproducere denne effekt og beskrevet det i External link icons the CSS way. Her får browsere som supportere CSS-3 selectors vist et lille ikon ved eksterne links. Dette understøttes på nuværende tidspunkt kun af Mozilla og Konqueror.

Jeg ønsker den samme effekt som Mark og Stuart, men det skal virke i MSIE5+ og uden brug af Movable Type. Der ud over skal brugeren have mulighed for, via en opsætningsside, at kunne indstille, hvordan links på resten af hjemmeside skal vises og åbnes.

Top

Teknologier

Jeg benytter mig af cookies og JavaScript til at opnå denne effekt. I en cookie står informationer om et links skal have et ikon ved eksterne links, samt om det skal åbnes i et nyt browser vindue. Udfra cookie indstillingen vil jeg i javascript på hjemmesiden loop'e samtlige links eller udvalgte "områder" igennem for eksterne links.

Top

Minimumskrav

Scriptet vil være afhængig af et gyldigt (X)HTML dokument. Samt at klientens browser understøtter DOM'en. Scriptet er testet og virker på PC i Mozilla 1+ og MSIE5+. Det vil formodentlig også virker i andre browsere som supportere DOM'en.

Top

Opsætning

For at indsætte mhaMicroIcons på din hjemmeside skal du bruge javascript-filen mha_microicons.js, et HTML-dokument samt de små ikoner som f.eks. () migif.gif

For at sætte mikroikoner på en hjemmeside skal javascript funktionen mmi.findMicroIcons køres ved eventen body onload, på et eller flere elementer på siden. Det kunne f.eks. være på body elementet eller et element med et unikt id eller flere elementer med den samme class. Jeg viser her 3 eksempler på, hvordan det kan sættes op.

Eksempel 1: Mikroikoner på hele siden:

function init() {
  if ((mmi) && (document.getElementsByTagName) && (document.getElementById)){
    oBody = document.getElementsByTagName("body").item(0);
    mmi.findMicorIcons(oBody);
  }
}
		
window.onload=init;

Eksempel 2: Mikroikoner på et bestemt element (ex. "uniktelement"):

function init() {
  if ((mmi) && (document.getElementsByTagName) && (document.getElementById)){
    oElement = document.getElementById("uniktelement");
    mmi.findMicorIcons(oElement);
  }
}
		
window.onload=init;

Eksempel 3: Mikroikoner på alle elementer med en bestem class (ex. "microicons"), ved hjælp af mha.getElementsWithClassName som beskrives i artiklen mha_core:

function init() {
  oBody = document.getElementsByTagName("body").item(0);
  aMicroIcons =  mha.getElementsWithClassName(oBody, 'microicons');	
  for (var i=0;i < amicroicons.length;i++) {
    mmi.findmicoricons(amicroicons[i]);
  }
}
		
window.onload=init;

Standard indstillingerne kan opsættes i JavaScript-filen mha_microicons.js under mmi.cfg.
Variablerne starende med:

• do (ex doMailto) sættes til true eller false alt efter om mikroikonet skal vises.
• popup (ex. popupExtern) indikere om linket skal åbnes i et nyt vindue.
• icon er url'en til det billede som skal bruges til mikroikonet på linket.
• domain skal sættes til document.domain når siden ligger online og 'C:/' når man udvikler lokalt på sin maskine.

//////////////////////////
// Config mhaMicroIcons //
//////////////////////////
mmi.cfg = {
doMailto     : true,
doExtern     : true,
doIntern     : false,
doImg        : true,
popupMailto  : false,
popupExtern  : true,
popupIntern  : false,
popupImg     : false,
iconMailto   : 'miMailto.gif',
iconExtern   : 'miExtern.gif',
iconIntern   : 'miIntern.gif',
iconImg      : 'miGif.gif',
domain       : document.domain
// domain    : 'C:/'
}

Top

Dokumentation

Koden benytter namespaces (ex. mmi.buildMicroIcons) som du kan læse mere om i artiklen Designing for portability: 1 ved kapitlet "Isolating your code through Namespaces"

Ved eventen onload bliver funktionen mmi.findMicroIcons kørt. Den looper alle a elementer for et givent element igennem og kører funktionen mmi.buildMicroIcon på elementet alt efter om linket er et internt/externt, mailto eller slutter på en bestemt endelse. Det er her at der skal ændres, hvis man f.eks. ønsker at markere alle PDF-filer, MPG-filer , o.s.v.
Man tilføjer bare en ekstra if sætning som spørger på den bestemte endelse. f.eks.

else if ((oA.href.endsWith('.mpg','.avi')) && (mmi.cfg.doMovie)) {
mmi.buildMicroIcon(oA, mmi.cfg.iconMovie, mmi.cfg.popupMovie)

Der ud over skal der også tilføjes 3 ekstra variabler i mmi.cfg f.eks. doMovie, popupMovie og iconMovie

I funktionen mmi.buildMicroIcon indsættes selve billedet i slutningen af linket. Hvis linket ønskes indsat i starten af et link skal el.appendChild(oImg); udskiftes med oA.insertBefore(oImg,oA.firstChild);.

Top