Avatar billede perfi Nybegynder
11. juni 2003 - 16:11 Der er 5 kommentarer

highlighte en position på et billede

Hej

er det muligt at fremhæve et område på et billede baseret på xy-koordinater.? Eller om man kan skrive noget tekst ved startkoordinatet.  .-)
Perfi
Avatar billede doggy82 Praktikant
11. juni 2003 - 16:41 #1
Øhhh fremhæve ?!
Hvis du vil lave et område af et billede til et link skal du bruge imagemapping. Se her: http://www.echoecho.com/htmllinks07.htm
Avatar billede perfi Nybegynder
11. juni 2003 - 16:53 #2
Ja det er jeg klar over, men kan man baséret på koordinater lægge en rammer eller et transparent filter rund koordinaterne eller skrive en tekst indefor koordinatområdet? Altså oprette f.eks et layer dynamiske baseret på den koordinater og evt. farvelægge området?.
:-) perfi
Avatar billede edutasia Nybegynder
12. juni 2003 - 11:49 #3
Det kan du sagtens - men kun rektangulære områder. Jeg har lavet følgende script, der automatisk kan generere sådanne områder ud fra information i et tag kaldet "edumap". Prøv at gemme nedenstående kode som et HTML-dokument og se, hvad der sker (forklaring følger):


<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script>
function createMaps() {
  var coll = document.getElementsByTagName('edumap');
  var arrCoords;
  var newElm;
  for (var i=0; i<coll.length; i++) {
    if (coll[i].mapcoords != null) {
      arrCoords = coll[i].mapcoords.split(',');
        newElm = document.createElement('div');
        newElm.style.pixelTop = document.getElementById(coll[i].mapimg).offsetTop + parseInt(arrCoords[0]);
        newElm.style.pixelLeft = document.getElementById(coll[i].mapimg).offsetLeft + parseInt(arrCoords[1]);
        newElm.style.pixelWidth = arrCoords[2];
        newElm.style.pixelHeight = arrCoords[3];
        newElm.style.position = 'absolute';
        newElm.style.backgroundColor = coll[i].mapbgcolor;
        newElm.style.color = coll[i].maptextcolor;
        newElm.style.filter = 'alpha(opacity=' + coll[i].mapopacity + ')';
        newElm.innerText = coll[i].maptext;
        document.body.appendChild(newElm);
        }
    }
}
</script>
</head>

<body onload="createMaps()">
<img id="img1" src="billede.jpg" width="300" height="200">
<edumap mapimg="img1" mapcoords="0,0,100,100" mapbgcolor="green" mapopacity="50" maptext="test1" maptextcolor="white"/>
<edumap mapimg="img1" mapcoords="120,140,110,70" mapbgcolor="red" mapopacity="50" maptext="test2" maptextcolor="white"/>
</body>
</html>
Avatar billede edutasia Nybegynder
12. juni 2003 - 11:56 #4
Eksemplet ovenfor udnytter, at man sagtens kan opfinde sine egne tags. Her er det tagget <edumap/>, som kan have følgende attributter:

mapimg: id på det billede, området skal tilhøre
mapcoords: områdets koordinater (x,y,bredde,højde) 0,0 er billedets øverste, venstre hjørne
mapbgcolor: baggrundsfarve
mapopacity: gennemsigtighed (0-100) 0 = usynligt, 100 = ikke gennemsigtigt
maptext: evt. tekstfarve
maptextcolor: evt. tekstfarve

Du gør følgende for at anvende scriptet:

1. Indsæt et billede og giv det et unikt id
2. Opret lige så mange <edumap/>-tags, som du har behov for

Scriptet finder selv alle <edumap/>-tags og "konverterer" dem til områder
Avatar billede perfi Nybegynder
16. juni 2003 - 08:40 #5
Hej igen..
Har været lidt ophængt. Jeg tjekker lige edutasia's script - som ser lovende ud..

Perfi
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