CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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

Synes godt om

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

Synes godt om

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

Synes godt om

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>

Synes godt om

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

Synes godt om

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

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS