Image Map maken met CSS

[DuJam]

Goedenavond,

Is het mogelijk om een Image Map te maken met behulp van CSS i.p.v. deze in de HTML van de pagina te definiëren?

En zo ja, dan wil ik natuuuuurlijk weten hoe

Tnx!

 

[tecsman]

Ja en nee

Een imagemap is iets wat je met html-code creëert, en niet met CSS.

Maar je kunt met een combinatie van html en CSS wel iets maken wat hetzelfde effect oplevert,
alleen is dat dan geen pure imagemap.

Ik had hier nooit over nagedacht, voor mij is een website een manier van informatieoverdracht en niet een of andere kunstvorm. Maar om toch iets te kunnen schrijven heb ik even gezocht op internet.

Daarvoor is een handige website te vinden, onder de naam Google.
Als je Google gebruikt met de juiste zoektermen (bijvoorbeeld "image map CSS") dan vind je al heel snel resultaten. Er is zelfs een pagina met de titel CSS image maps:
http://www.frankmanno.com/ideas/css-imagemap/

 

[DuJam]

Een imagemap is iets wat je met html-code creëert, en niet met CSS.
Ik had hier nooit over nagedacht, voor mij is een website een manier van informatieoverdracht en niet een of andere kunstvorm.

Ik kan niet anders dan het daarmee eens zijn. Zij het misschien dat als je die info voor de gebruiker cq lezer in een aantrekkelijk(er) en handig(er) jasje kunt gieten, daar gebruik van gemaakt kan worden, toch?

Hoe dan ook, ik stelde de vraag omdat ik met een .php pagina zit waarin in dus die image map wil inbouwen. De gewone HTML tags krijg in niet aan de praat in die pagina, dus dacht ik dat er misschien andere wegen zijn.

Ik ga eens stoeien met de info op de pagina die je noemt, wie weet?

Tnx voor je reactie!

 

[csshunter]

Ook ja en nee, maar anders

Hoi DuJam,
Zonder af te dingen op het bovenstaande nog het onderstaande!

Imagemap:

• Pro: met een imagemap (area) kan je een gebied op een image klikbaar maken dat willekeurige vormen heeft.
• Contra: je kan er niet (dwz niet javascriptloos) een hover-variant aan tekst en/of image op zetten; en een tooltip bij een area is maar klein en verdwijnt na een paar tellen..

CSS-hover:

• Pro: je kunt er mooie hover-varianten op maken, met tekst en/of afbeeldingen, eventueel geheel naast de afbeelding; d.w.z. ook alternatieve home-made tooltips die blijven staan zolang je op het gebied staat..
• Contra: met css over een background-image kan je een gebied op een image klikbaar maken dat een rechthoekige vorm heeft (en anders niet).

Meestal kan je wel een css-hover constructie bakken door de rechthoekjes kunstig naast en onder elkaar te draperen. Dat is mijn voorkeur, want heeft de meeste gebruiksvriendelijke opties.
Maar soms kan dat niet, bv. als de vormen van de gebieden grillige (puzzelstukjes-)vormen zijn die in elkaar moeten passen, zoals bv de provinciegrenzen op de kaart van Nederland. Dan is een imagemap de enige mogelijkheid.

• Of waanzinnig veel mini-rechthoekjes plaatsen.

Met css-hovers kan echter wel heel veel!

• Een vergelijkings-demo: Image mapping and CSS hovering.
  (zie broncode)
• Toelichting: in dit topic.

Met vriendelijke groet,
CSShunter
____________
PS:
Dit wordt vaak gebruikt voor een image-knoppenmenu met hover-varianten.
Ook dat kan met 1 combi-image voor alle knoppen + hun hovers!
Zie hier een voorbeeld.

En nog een tutje: Een blokje knoppen

En als alternatief: image-map met javascript voor de hovers

 

[DuJam]

Hi csshunter,

Tnx voor je uitgebreide antwoord.

CSS-hover zie er inderdaad goed uit moet ik zeggen, ik ga me daar zeker eens in verdiepen.

Voor dit 'probleempje' is een Imagemap denk ik voldoende. Het enige wat ik wil is dat een stukje van een afbeelding 'clickable' wordt zonder poespas, meer moet het niet zijn.

Nu moet ik dit integreren in een .php pagina (een pagina van het SMF forum), maar dat lukt me nog niet erg. Zal natuurlijk ongetwijfeld iets fout doen, ben niet zo'n grote held wat dit betreft...

Dit is de code die ik nu gebruik, maar er gebeurt niets:

if (empty($context['header_logo_url_html_safe']))
		echo $context['forum_name_html_safe'];
	else
		echo '
				<img src="', $context['header_logo_url_html_safe'], '" alt="', $context['forum_name_html_safe'], '" />
				<map name="facebook"> <area shape="rect" coords="323,3,469,65" href="http://www.facebook.com/jamaicaforum.nl"> </map>';

Kan dit zo in een .php file, of moet dat geheel anders?

 

[csshunter]

Hoi DuJam,
Er kan niets gebeuren omdat het image niet weet dat daarop de mapping met deze area geplaatst moet worden.
Toe te voegen:

<img ... usemap="#facebook">

Dat maakt de linkerbovenhoek van het image tot referentiepunt voor de opgegeven coördinaten van de area.

Doet ie 't dan wel?

Met vriendelijke groet,
CSShunter

 

[DuJam]

CSSHunter,

Tja... zo simpel kan het leven zijn

Je moet de map natuurlijk wel ff vertellen op welk plaatje hij zich moet vastpinnen natuurlijk, volkomen logisch.

En natuurlijk doet 'ie het nu.

Many thanks CSSHunter, heb weer wat geleerd!