Avatar billede twami Nybegynder
12. februar 2006 - 14:19 Der er 7 kommentarer og
1 løsning

ALT tags

Hej..

Jeg spekulerede på, om der en måde, hvorpå man kan ændre typografien og baggrunden i billeders ALT-tag-box? Altså om man på en måde kan formattere denne box efter eget ønske?

Mvh.
Mogens
Avatar billede Slettet bruger
12. februar 2006 - 14:35 #1
Som udgangspunkt nej. Men med lidt kreativitet, ja. Det er dog ikke helt nemt.
Hvis du har dine billeder: <img src='blabla' alt='blabla'>

Så kan du lave et eksternt javascript med noget a la følgende kode:

window.onload = function() {
  imgs = document.getElementsByTagName('img'); // hent alle billeder
  for(i = 0; i < imgs.length; i++) { // løb billederne igennem
    if(imgalt = imgs[i].getAttribute('alt')) { // hvis billedet har en alt tekst
      imgs[i].onmouseover = showMyAlt; // sæt din egen funktion til at blive aktiveret
      imgs[i].onmouseout = hideMyAlt; // sæt din egen funktion til at blive aktiveret
      imgs[i].setAttribute('alt', null); // fjern oprindelig alt
      imgs[i].setAttribute('myalt', imgalt); // lav din egen alt med oprindelig alt tekst
    }
  }
}

Forklaring:

Ah hensyn til søgemaskiner, eventuelle interesserede i din kildekode m.m., bevarer du en helt standard HTML-kode med dine <img> tags.

Det du gør, er at når hele siden er hentet, kører dit script, som tager alle <img> tags med en alt-tekst, og ændrer (kun dynamisk, kan ikke ses i kilden) den til attributten myalt i stedet, så den normale alt-tekst ikke vises når man holder musen over.

Derefter sætter den dine egne funktioner showMyAlt() og hideMyAlt() til at blive kaldt ved onmouseover og onmouseout events.

Disse funktioner kan du så lave med hvad du vil. Hvis dine billeder alle er absolut positioneret (hvilket nok er usandsynligt) ville du nemt kunne bestemme din boks-position udfra this.style.top og this.style.left (eller bottom og right).

For den optimale løsning skal du nok ind og have fat i nogle data om scrollbarens offset og musens placering.

Du kan læse meget mere her om de forskellige events, funktioner, osv:
http://www.w3schools.com/htmldom/dom_obj_event.asp
Avatar billede mortenbock Nybegynder
12. februar 2006 - 14:35 #2
Du kan evt. overveje at bruge overLIB

http://www.bosrup.com/web/overlib/

Den giver en masse muligheder for at lave samme funktion som ALT tags, men formaterer tekst osv.
Avatar billede olebole Juniormester
12. februar 2006 - 16:52 #3
<ole>

- og som udgangspunkt bør teksten i alt-attributten slet ikke vises, hvis billedet bliver det. Alt-teksten bør kun vises, hvis billedet ikke kan loades - og skal derudover forsyne andre typer af klienter (f.eks. tekstoplæsere) med alternative data ... heraf navnet.

Derimod er title-attributten beregnet til at vise et tooltip - og det er kun i IE alt-teksten bliver vist som tooltip  :)

I forhold til det eksempel, cirrhosis viser ovenfor, er det ligegyldigt, om billederne er positioneret eller ej. Kun, hvis billederne ligger direkte i body-elementet - og er absolut positioneret - er det ligetil at finde deres koordinater. Ellers må du ud i en funktione à la denne:

function getPos(elm) {
    for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
    return {x:zx,y:zy}
}

- som typisk kaldes med:

var pos = getPos( document.getElementById(BILLED_ID) );
alert("X: " + pos.x);
alert("Y: " + pos.y);

/mvh
</bole>
Avatar billede twami Nybegynder
13. februar 2006 - 17:04 #4
Tak for svarene so far.

Jeg har kigget lidt nærmere på overLIB.. har du selv erfaringer med det mortenbock? Jeg har nemlig et spørgsmål. Hvis nu jeg har følgende billede, som der skal poppe en flot boks op ved:

<img src="Billeder/Grafisk-opbygning/logo.gif" alt="bla bla" width="257" height="104" border="0">

Hvad skal jeg så helt konkret gøre, for at integrere overlib filerne på min webside? Skal jeg bare lægge f.eks. overlib.js op på serveren sammen med html dokumentet og så på en eller anden måde fortælle i html dokumentet at den skal bruge .js filen?

Det er garanteret noget ret grundlæggende javascript, som jeg slet ikke kender til, så håber du/andre lige hurtig vil forklare hvordan det gøres.

Mvh.
Mogens
Avatar billede roenving Novice
13. februar 2006 - 17:09 #5
Prøv at kigge nærmere på Erik Bosrups site, f.eks. her: http://www.bosrup.com/web/overlib/?Documentation !-)
Avatar billede mortenbock Nybegynder
13. februar 2006 - 17:16 #6
Henviser til roenvig's fremragende link :-)
Avatar billede twami Nybegynder
13. februar 2006 - 18:16 #7
Mange tak for svarene.
Avatar billede twami Nybegynder
13. februar 2006 - 18:16 #8
Mange tak for svarene.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester