Complexe image map

[dtech]

Hallo,
ik wil een webpaginaatje maken voor onze examenfoto van dit jaar. En het leek me leuk om gebruikers de mogelijkheid te geven op iemand op een foto te klikken en dat hij dan automatisch doorgestuurd wordt naar de uitgebreide informatiepagina van die persoon.
Nou kan ik imagemaps gebruiken, maar (helaas) zijn personen op een foto niet altijd mooie rondjes en rechthoeken (goh? echt waar?). Ik kan hier twee oplossingen voor bedenken:
1. Ik gebruik veelhoeken en cirkels die het een beetje aardig benaderen
2. Ik gebruik flash

Van beide oplossingen wordt ik echter niet gelukkig.
Weet iemand misschien een goede manier om het te doen? (het liefst dus in HTML, CSS, JS en/of PHP)

[Verwijderd]

1: Dat is gewoon HTML. Gebruik er een tooltje voor, ik vind zelf ImageReady het prettigst werken (zit bij Photoshop).

[Ramon]

je kan toch gewoon vierkantjes/rechthoekjes gebruiken? het hoeft toch niet op de pixel precies?

[Fuzzillogic]

Ramon schreef op vrijdag 05 oktober 2007 @ 21:18:
je kan toch gewoon vierkantjes/rechthoekjes gebruiken? het hoeft toch niet op de pixel precies?

Je kunt ook polygonen gebruiken. Daarme kun je in principe tot op de pixel nauwkeurig werken.

[Verwijderd]

Je kunt het toch zo maken dat je alleen op de hoofden van de personen (rondjes dus) kunt klikken. Zal de eindgebruiker snel genoeg ontdekken dat je alleen op het hoofd kunt klikken. Voorkomt ook eventueel gezoek naar de juiste plek om te kunnen klikken.

[Ramon]

Ik weet dat het kan maar dat is toch niet nodig met een simpele groepsfoto

[dtech]

@Ramon
Het is op zich wel handig als het een foto van 150 mensen is

@Lighteye
Daar heb ik wel aan gedacht, maar het zal je verbazen hoe niet-rond sommige hoogden op de foto staan (half verscholen achter iemand anders bijv.)

@Fuzzillogic
Op welke waarden moeten de shape en coords attributen dan staan?

@Ramon
Dat is ook een van mijn opties, maar zoals je hierboven al kunt lezen heeft niet iedereen besloten dat ze gerepresenteerd willen kunnen worden door rondjes en vierkantjes

[Pendaco]

Met Fuzzillogic.

Pak er gewoon Dreamweaver (2004mx/8/9) bij, daarmee kun je eenvoudig Polygone hotspots tekenen, je krijgt dan ongeveer zoiets;

code:

<map name="Map">
  <area shape="poly" coords="385,395,411,340,454,318,474,324,468,427" href="#">
  <area shape="poly" coords="241,509,241,587,326,583,326,502" href="#">
</map>

Niet de meest mooie manier maar wel op de pixel nauwkeurig en perfect waar je het voor wilt gebruiken

[dtech]

Thanks, ik zal er naar kijken. Iemand bracht ook Photoshop ter woorde, kan die dit ook? Ik heb nl geen dreamweaver.

Btw Pendaco, @ je onderschrift: het laat ook zien dat je tags niet door elkaar strooit
<b><p></b></p> is lowercase en je sluit de tags, maar het is nog gene valid xhtml

[Verwijderd]

Pendaco schreef op vrijdag 05 oktober 2007 @ 21:44:

code:

<map name="Map">
  <area shape="poly" coords="385,395,411,340,454,318,474,324,468,427" href="#">
  <area shape="poly" coords="241,509,241,587,326,583,326,502" href="#">
</map>

Niet de meest mooie manier maar wel op de pixel nauwkeurig en perfect waar je het voor wilt gebruiken

Een paar extra tips: in plaats van # vul je de eigenlijke link in.
href="http://linknaarpaginavandezepersoon.html"
het alt attribuut verduidelijkt voor jezelf en voor mindervaliden (alt="Jan van Zuylen")
map id gebruiken ipv. name (maps zijn als het goed is uniek in de pagina)
een map schaalt niet. Embedding in bijvoorbeeld
<span style="width:100%;"><img src="groepsfoto" ..... /></span> (mits juist in de .css gedefinieerd) laat wel de foto schalen, maar niet de map!

@ dtech: als twee hoofden half over elkaar heen vallen, definieer je het achterste hoofd als tweede, dan wordt automatisch het voorste hoofd genomen als men klikt waar de cirkels over elkaar heenvallen:

code:

<area shape="circle" coords="336,210,91" nohref>
<area shape="circle" coords="254,200,96" nohref>

[ Voor 5% gewijzigd door Verwijderd op 05-10-2007 22:27 ]

[dtech]

@ard
bedankt voor de tips

@topic
Ik heb nu iedereen "uitgeknipt" in layers via imageready, maar weet iemand hoe ik die layers allemaal gemakkelijk om kan zetten in image map onderdelen? Ik kan het wel één voor één via layer selecteren->layer->new layer based image map, maar dat kan maar per een en niet zoals bij slices met meerdere tegelijk.
Nou is het een pokkewerk om elke keer layer selecteren->menu->menuoptie->layer selecteren->menu->menuoptie etc. te doen (het zou dan 231 keer moeten gebeuren). Weet iemand hoe ik geselecteerde layers kan omzetten of weet iemand de sneltoets ervoor?

[Verwijderd]

Warom gebruik je niet gewoon de image map tool?

[BCC]

Verwijderd schreef op zaterdag 06 oktober 2007 @ 11:34:
Warom gebruik je niet gewoon de image map tool?

Ja, of een image map tool. TuCows staat vol met gratis programma's waar je dit mee kan doen.

[ Voor 3% gewijzigd door BCC op 06-10-2007 11:55 ]

[dtech]

Ik heb het inmiddels al voor elkaar gekregen, het stond ook in het rechtmuisknopmenu.

Ben overigens best tevreden over het resultaat

@Cheatah en BCC
Natuurlijk kan ik hier een apart tooltje voor instaleren, maar waarom een apart tooltje instaleren als ik al een alles-in-een pakket heb dat het kan?

[BCC]

dtech schreef op zaterdag 06 oktober 2007 @ 12:29:
Ik heb het inmiddels al voor elkaar gekregen, het stond ook in het rechtmuisknopmenu.

Ben overigens best tevreden over het resultaat

@Cheatah en BCC
Natuurlijk kan ik hier een apart tooltje voor instaleren, maar waarom een apart tooltje instaleren als ik al een alles-in-een pakket heb dat het kan?

Niet veel mensen hebben photoshop geinstalleerd + niet veel mensen weten hoe ze met photoshop moeten omgaan.

[Verwijderd]

dtech schreef op zaterdag 06 oktober 2007 @ 12:29:

@Cheatah en BCC
Natuurlijk kan ik hier een apart tooltje voor instaleren, maar waarom een apart tooltje instaleren als ik al een alles-in-een pakket heb dat het kan?

Mijn eerste reactie was om een tooltje te gebruiken, en ik geef zelf aan dat ik het liefst ImageReady gebruik. Even later zie ik dat je zelf ook met ImageReady aan de gang bent gegaan, maar ik zie je praten over layers en een hoop pokkewerk. Dus ik vraag waarom je niet gewoon de image map tool gebruikt, en dan bedoel ik natuurlijk die tool die in ImageReady zit.

Kortom, ik heb het helemaal niet over een apart tooltje, ik bedoel gewoon dat je je dure softwarepakket moet leren gebruiken.

[dEUSdude]

Stu heeft hier wel wat mooie voorbeelden van:

* http://www.cssplay.co.uk/menu/imap
* http://www.cssplay.co.uk/menu/solar_map
* http://www.cssplay.co.uk/menu/old_master

Misschien dat je iets mee kan.