Image map - hvordan virker det?

Du kan sætte et map på et billede. Dette map indeholder 2 koordinater for hvert link. Et link kan have et par forskellige former.

Koordinatet er på X,Y format.

Altså det jeg forklarer er bare de almindelige firkantede links. Runde og 8-kantede har andre koordinatformer.

http://www.html.dk/artikler/00024/

I stedet for at gøre hele billedet til eet link, tilknyttes et map til billede. I det map kan man så definere forskellige links.

<area shape="rect"
coords="0,0,82,126"
alt="Sun"
href="sun.htm">

rect: det klikbare område er en firkant.
coords: angiver det klikbare område: x1,y1,x2,y2
href: link-henvisning

bredde på firkant: x2-x1, højde:y2-y1

Gulp, så bliver det vist alt for indviklet til mig!

Nej, det forstår jeg ikke en dyt af.

Nu har jeg læst det link grundigt igennem, men her forslår min intelligens ikke. Det er droppet. Jeg kan også leve uden, har ikke noget at bruge det til (håber jeg ikke).
Over and out.

.

Jeg vil nu lige for en ordens skyld tilføje, at det ikke er *det hele* jeg ikke forstår. Jeg forstår en hel del af det (men det jeg ikke forstår er nok til at jeg ikke kan bruge det). Så jeg er ikke hel-idiot (kun halv :-/).

Hrm, måske ikke den bedste indgangsvinkel til at få hjælp på sitet, hvis du bare selv tager pointene, selv om andre seriøst har forsøgt at besvare dit spørgsmål ...

-- men du ved vel, at du kan lave et billede til et link, f.eks. ved at lægge et a-tag udenom det eller benytte dig af en onclick-event og på den ændre dokumentets (eller en (i)frames eller et helt nyt vindues) href ...

-- på samme måde kan du definere at dele af et billede peger på forskellige referencer, prøv f.eks. følgende (her er der ikke lavet href'er men titles, så du skal holde musen stille et kort stykke tid !-)

<img src="billede.jpg" style="width:200px;height:200px;border:0;" usemap="#mitMap">
<map name="mitMap">
<area shape="rect" coords="0,0,100,100" title="Øverste venstre del af billedet">
<area shape="rect" coords="100,0,200,100" title="Øverste højre del af billedet">
<area shape="rect" coords="0,100,100,200" title="Nederste venstre del af billedet">
<area shape="rect" coords="100,100,200,200" title="Nederste højre del af billedet">
</map>

Ok, jeg har måske nok lige været et nummer for hurtig til at lukke her - og måske også gjort det forkert. Skal prøve at at klappe hesten en anden gang ...
Bortset fra det, så var der ingen der havde lagt svar. Og jeg troede i øvrigt det fungerede på den måde, at man kun delte point ud når noget var løst. Har jeg så opfattet forkert. Men skal som sagt nok huske det til en anden gang.
Jeg er ligeglad med point, samler ikke på dem (så det var ikke derfor jeg tog dem).

Men jeg fortvivlede ret hurtigt, da jeg opdagede hvor indviklet det her er (for mig i hvert fald). Vi er ude i noget hvor man skal bruge den samme hjernehalvdel som man bruger når man lære at regne. Og i regning/matematik har jeg aldrig fået mere end et sekstal! Resten taler vist for sig selv.

Jeg forstår heller ikke det du skriver ovenfor, sorry. (Helt præcist tallene).

-- jeg synes, det tyder på god opdragelse, hvis man anerkender, at folk har ydet en indsats, for et korrekt svar er det du skal kaste point efter, ikke nødvendigvis en løsning, for nogle gange er det korrekte svar jo altså: Nej !-)

Og prøv så at kaste det ovenstående ind i et dokument, som du åbner i browseren !o]

-- så vil du ret hurtigt indse hvad de fire area-tags indebærer ...

-- og så vil du hurtigt gennemskue, at gammelhat gav en ret dækkende svar på dit spørgsmål !-)

Der er nu ikke noget i vejen med min opdragelse. Og jeg har fattet det ...

Med hensyn til det andet.
Jeg tør næsten ikke sige det, men det eneste jeg får ud af det, er at ovenstående kode gviver en firkant med en firkant i øverste venstre hjørne, hvor der kommer en tekst når man peger på den. Intet andet. Tallene siger mig stadig ikke noget (jeg havde advaret dig).

-- no offense !-)

Billedet har størrelsen 200*200 ...

-- og det er så delt op i fire bidder, hvor det øverste venstre hjørne starter i 0,0 og slutter i 100,100, øverste højre hjørne starter tilsvarende i 100,0 og slutter i 200,100 ...

Hvis du kopierer dette ned i indtastningsfeltet burde du kunne se det:

---------------------------//Første koordinat er afstand fra venstre
|  Øverst  |  Øverst  |//Sidste koordinat er afstand fra top
|  venstre  |  højre    |
|            |            |
|            |            |
---------------------------
|  Nederst  |  Nederst  |
|  venstre  |  højre    |
|            |            |
|            |            |
---------------------------

Da der både skal være start-hjørne og slut-hjørne findes de selvfølgelig i to par !-)

Jeg er ved at læse det hele igen, incl. linket til html.dk. Når jeg er færdig med det incl. det du her sidst har skrevet, skal jeg tænke. Det kan godt risikere at tage sin tid, så det er ikke sikkert du skal vente ...

Nej det dur bare ikke. Der er alt for meget at holde sty på på en gang. Det kan mit lille hoved slet ikke klare. Jeg har ikke overblikket.

Først læste jeg (igen) forklaringen på html.dk. Det går galt her:

Rektangel: "x1,y1,x2,y2" hvor (x1,y1) angiver det øverste venstre hjørne, mens (x2,y2) angiver det nederste højre hjørne.
Circel: "x,y,z" hvor (x,y) angiver cirklens midte og z dens radius.
Polygon: "x1,y1,x2,y2,x3,y3,x4,y4,x5,y5 ..." hvor (x1,y1) angiver det første hjørne i polygonen, (x2,y2) det næste osv.

Det er forklaret, men jeg forstår sgu ikke engang forklaringen. Jeg kan slet ikke se logikken i tallene. Hvordan kan fx. x2 og y2 blive til nederste højre hjørne, osv.
-----
Ja og nu har jeg også læst tråden igen. Men jeg er slet ikke med. Jeg har bare ikke overblikket. Kan slet ikke holde styr på alle de tal.

Nok bedst at droppe det. Jo længere tid jeg beskæftiger mig med det uden at forstå det, jo mere ryger der af min selvtillid.

Hvorfor tager du ikke bare rect-tingen først og prøver at gennemskue den ?-)

Rektangel - den forstår jeg godt. Men ikke nogen af de andre.

Det er noget pladder. Det gør jeg heller ikke. Jeg kan se logikken i at x1 og y1 er øverste højre hjørne, men ikke hvorfor x2 ogy2 skal være nederste venstre.

Mente nederste venstre.

Nej for pokker, nederste højre (som der står).

Ja nu ævler jeg. Jeg mente selvf. at jeg forstår at x1 og y1 er øverste venstre, men ikke hvorfor x2 og y2 er nederste højre.

Logikken ?-)

-- det er da bare en definition ...

Hvis man skal definere en firkant, kan det gøres på mange forskellige måder, her har man bare valgt at sige at alle kantlinjer på forhånd er defineret til enten at være horisontale eller vertikale, og så vil en placering af to modsat-stillede hjørner jo entydigt definere firkanten !-)

Man kunne jo også have valgt øverste højre hjørne og nederste venstre ...

Jeg er lige forvirret.
Det er utrolig pænt af dig at bruge tid på det her midt om natten, men jeg tror det er håbløst.

Det er det eneste jeg er stødt på som jeg ikke har kunnet finde ud af, så jeg bør vel være tilfreds.
(Og så skal jeg vist lade være at tænke på hvad der sker når jeg kommer til det med farver :-/ )

Hvis du f.eks. tænker på et skakbræt, vil du kunne definere en firkant ved at angive nogle felters adresse, f.eks. a1,h8 (hele brættet !-) eller a3,h6 (alle de felter, hvor der ikke står nogen fra start !o]

Ja.

Så 0,0 = a8
100,100 = d/e 4/5 afhængig af om det ses fra siden/oppefra
200,200 = h1

100,0 er så d8 eller e8 afhængig af om det skal bruges til at definere den venstre side eller den højre side ...

Jeg forstår det ikke. Du skal ikke spilde mere af din tid ...