Hoe bepaal ik de coordinaten?

[Verwijderd]

Ik heb een plaatje met daarin buttons verwerkt, echter het is 1 plaatje

Ik weet dat ik met het commando:

code:

 <map name="Map2">
   <area shape="rect" coords="130,2,175,17" href="topics.php">
  <area shape="rect" coords="184,3,264,16" href="submit.php">
  <area shape="rect" coords="275,2,354,17" href="top.php">
  <area shape="rect" coords="367,3,448,21" href="modules.php?name=Downloads">
  <area shape="rect" coords="455,3,502,17" href="index.php">
</map>

Bepaalde lokatioes op het plaatje mee moet kunnen aanwijzen, echter ik krijg dit niet werkend.

Ik kan nergens vinden HOE die coordinaten werken,
neem bv: coords="130,2,175,17"
Wat is die 130 nu bv ? Pixels? zoja vanaf waar geteld? hetzelfde geld voor die 2, 175, 17

Ik kan dus nergens vinden wat elke waarde betekend.

Een 2de vraag er achter aan is hoe bepaal je de coordinaten in een picture?
Ik heb al eens met FrontPageXP geprobeerd en ook met photoshop maar ik krijg het gewoonweg niet gevonden.

Dus kan me iemand dus kort even uitleggen hoe die coordinaten zijn opgebouwd (wat is eerste getal, 2de , derde en vierde) en hoe bepaal je op een eenvoudige en snelle manier de coordinaten op een picture?

[Verwijderd]

1) In FrontPage kun je gewoonweg hotspots tekenen, dat is misschien nog wel het makkelijkst
2) Die vier getallen zijn gewoon 2 locaties in je image, de getallen zijn in pixels, gemeten vanaf het punt (0,0) in de image, wat de linkerbovenhoek is.
- Punten bepalen kun je het beste doen met een beeldbewerkingsprogramma, die geven namelijk de coördinaten van je cursor aan.

Dit had je overigens best zelf dmv een beetje experimenteren kunnen vinden; dit is wel erg basic
Succes

[Verwijderd]

3) 1e,2e getal; x en y van rechhoek linksboven 3e,4e getal; x en y van rechthoek rechtsonder.
4) in photoshop, window-> show - info - tab; als je met je muis nu beweegt in een plaatje, zie je de actuele x en y coordinaat waar je muispointer dan staat.

[Verwijderd]

Op Tucows kun je verschillende programma's vinden die (net als in Frontpage) automatisch de code genereert a.d.h.v. gebieden die jij opgeeft. Zoek maar eens naar imagemap.

[Thijsmans]

Wie weet maakt dit plaatje het wat duidelijker:

De buitenste rechthoek is het plaatje. Hierbinnen staat dus een afbeelding, een map. Linksbovenin is coördinaat (0,0), en je wilt een ronde area maken (ik weet het, dit is meer een ei ), dan geef je de coördinaten van de linkerbovenkant van een denkbeeldige rechthoek eromheen, (10,10), en je neemt de rechteronderkant (50,40).

Dat wordt dus in Html:

HTML:

<area shape="circle" coords="10,10,50,40" href="submit.php">

Oftewel: begin bij (10,10), eindig bij (50,40)

hth

[akakiwi]

Prammenhanger schreef op 10 November 2002 @ 14:09:
Wie weet maakt dit plaatje het wat duidelijker:
[afbeelding]
De buitenste rechthoek is het plaatje. Hierbinnen staat dus een afbeelding, een map. Linksbovenin is coördinaat (0,0), en je wilt een ronde area maken (ik weet het, dit is meer een ei ), dan geef je de coördinaten van de linkerbovenkant van een denkbeeldige rechthoek eromheen, (10,10), en je neemt de rechteronderkant (50,40).

Dat wordt dus in Html:

HTML:

<area shape="circle" coords="10,10,50,40" href="submit.php">

Oftewel: begin bij (10,10), eindig bij (50,40)

hth

Waarbij coords="xlinks,ylinks, xrechts,yrechts"

[Verwijderd]

http://www.w3schools.com/tags/tag_area.asp

Het leven is soms zó makkelijk

[RM-rf]

er zijn volop free- en/of shareware programmaatjes hiervoor te vinden:
http://download.com.com/3000-2068-9098804.html?tag=lst-0-5

verder moet Frontpage dit ook gewoon automatisch kunnen, heeft vast een ingebouwde versie.

verder moet je opletten welke formdefinitie gebruik is, enkel shape="circle" en shape="rect" kennen de coords="x, y, breedte, hoogte", de shape="poly" kent gewoon een opsomming van verschillende x- en y-coordinaten-paren

[Verwijderd]

Bedankt voor de adviezen, echter als je niet weet hoe de functie heet (hotspot dus) vind je het nooit in frontpage.

FoOL: Ik heb bijna 5 uur gexperimenteerd met die coordinaten voordat ik hier iets gepost heb, ik kwam er gewoonweg niet uit, in frontpage kon ik het niet vinden(ik wist dus niet hoe dat het werd genoemd) en in photoshop had ik wel de info functie maar als je niet weet wat de waardes beteken heb je er ook niks aan.

Maar ik heb nog een vervolg vraagje hierop.

Is het mogelijk om op heel simpele manier dat handje (als je over een link gaat) ook bij dit soort links te krijgen? De links werken wel nu, maar je merkt niet dat het een link is(het blijft een pijl).

[Rickets]

Met CSS

code:

cursor: pointer;

http://www.w3.org/TR/REC-CSS2/ui.html#propdef-cursor

[RM-rf]

Rickets schreef op 11 november 2002 @ 18:11:
Met CSS

code:

cursor: pointer;

http://www.w3.org/TR/REC-CSS2/ui.html#propdef-cursor

MSIE is hierin afwijkend van de standaard en gebruikt de cursor: hand; propertie, je kunt volgens de css-specs echter gewoon beide specificeren, een css-ondersteunende browser dient properties die hij niet herkent te negeren:

code:

.linkje {
  cursor: pointer;
   cursor: hand;
}

[Clay]

cursor:pointer; werkt wel in ie6, maar niet in lagere idd.

[Rickets]

RM-rf schreef op 11 november 2002 @ 21:48:
[...]
MSIE is hierin afwijkend van de standaard en gebruikt de cursor: hand; propertie, je kunt volgens de css-specs echter gewoon beide specificeren, een css-ondersteunende browser dient properties die hij niet herkent te negeren:

code:

.linkje {
  cursor: pointer;
   cursor: hand;
}

Die cursor: hand kende ik al, maar aangezien dat niet werkte in Mozilla gebruikte ik cursor: pointer.
Handig, weer wat geleerd

[Verwijderd]

Ik krijg het niet werkend.

Het gaat om het volgende:

code:

<table border="0" cellpadding="0" cellspacing="0" width="920" style="border-collapse: collapse" bordercolor="#000000" height="157">
<tr>
<td width="920" height="157" > 
<map name="Map1">
<area shape="rect" coords="171, 137, 212, 150" href="index.php">
<area shape="rect" coords="228, 138, 308, 151" href="modules.php?name=Your_Account">
<area shape="rect" coords="330, 138, 411, 151" href="modules.php?name=Informatie">
<area shape="rect" coords="431, 138, 512, 151" href="modules.php?name=Informatie&file=index&func=prijs">
<area shape="rect" coords="533, 138, 612, 151" href="modules.php?name=Support">
<area shape="rect" coords="630, 138, 710, 151" href="modules.php?name=XForum">
<area shape="rect" coords="729, 136, 814, 151" href="modules.php?name=Informatie&file=index&func=sponsor">
<area shape="rect" coords="831, 138, 911, 151" href="modules.php?name=Feedback">
</map>
[img]"images/header.jpg"[/img]

</td></tr></table>  
<table width="100%" cellpadding="0" bgcolor="000000" cellspacing="0" border="0">

<tr valign="right">
<td>

Als je nu dus over de links in het plaatjes gaat dan veranderd de punt niet in een handje, het gekke is dat ie dit in frontpage wel doet, maargoed....

Nu heb ik ook een css file en daarin had ik dit erbij gezet zoals geadviseerd:

code:

.linkje
{cursor: pointer; cursor: hand;}

In de htl heb ik bij gezet:

code:

<font class="linkje">  en afgesloten met </font>

Ok het handje krijg ik nu echter over de GEHELE picture.
Ik zoek dus een manier om het "handje" alleen over de links (area's) in het plaatje zelf. Ik heb al geprobeert om de font class commando voor elke link te plaaten en op andere plaatsen maar dan werkt het helemaal niet meer.

De geadviseerde website staat helaas niets op wat ik kan gebruiken, ik kom er zo niet wijs uit.

Iemand een idee?

[RM-rf]

probeer eens:

code:

<area shape="rect" coords="171, 137, 212, 150" href="index.php" 
     class="linkje">

of zet in je CSS

code:

AREA {
   cursor: pointer; 
   cursor: hand;
}

[Verwijderd]

Bedankt, maar beide dingen werken dus niet.

Bij beide mogelijkheden komt er geen handje als je over de link (area) gaat

[crisp]

Niet echt netjes, maar styles lijken sowieso niet te werken met area's; dit echter wel (in elke area-tag stoppen):

code:

onMouseOver="document.body.style.cursor='hand'"
onMouseOut="document.body.style.cursor='default'"

[Verwijderd]

Ook dat werkt helaas niet, of ik zet het er verkeerd in

code:

<area onMouseOver="document.body.style.cursor='hand'" shape="rect" coords="171, 137, 212, 150" href="index.php" onMouseOut="document.body.style.cursor='default'" >

of

<area shape="rect" coords="171, 137, 212, 150" onMouseOver="document.body.style.cursor='hand'" href="index.php" onMouseOut="document.body.style.cursor='default'" >

Beide optie's werken dus niet helaas.

edit:
Ik heb ze ook op andere plaatsen in die <area .... > plaats geprobeert en nergens werken ze.

[crisp]

Verwijderd schreef op 15 November 2002 @ 12:45:
Ook dat werkt helaas niet, of ik zet het er verkeerd in
[..]
Beide optie's werken dus niet helaas.

edit:
Ik heb ze ook op andere plaatsen in die <area .... > plaats geprobeert en nergens werken ze.

Hmmz, hier in IE6 werkt het wel; welke browser gebruik je?

Anders ben ik bang dat er niets anders opzit dan je plaatje te slicen...

[Verwijderd]

ie6 dus ook

edit:
mmm, heb denk ik de oorzaak gevonden.
Alleen de oplossing niet.

Als je de html los start dan doet ie het wel, echter deze html is een onderdeel van een thema voor een phpnuke website en start je dus de gehele nukewebsite dan doet ie het niet meer. (deze area zit in de header van de nuke website en de html heet dus header.html)

Dus die mouseover werkt WEL als je alleen de losse html file start, start je de gehele website (phpnuke) dan doet ie het ineens niet meer.

Misschien weet iemand hier een oplossing voor?

[André]

Bij mij werkt het prima, ik heb zoiets 2 dagen geleden net gemaakt:

www.nobellaan.nl/sudosa

(dat is van mijn volleybalteam) Klik op "Team" en je ziet dat de cursor veranderd kan worden.

[ Voor 0% gewijzigd door André op 15-11-2002 13:19 . Reden: typo ]

[Verwijderd]

Ik heb gekeken maar het lijkt op geen enkele manier niet op het probleem wat ik hier heb.

-Zoals ik kon zien is het bij jou al geen PHPNUKE website
-Ook geen AREA functie's op die site zover ik kon zien gebruikt

Het probleem is alleen met die AREA links, de rest op mijn website werkt wel alleen waar de area's zijn komt geen handje, normale <a href> links wel. Ook werkt de losse header.html wel ook met hand, echter zodra ie in de PHPNUKE website geladen wordt dan werkt ineens het handje van de area niet meer. Een heel andere situatie dus.