Beste Cactus,
Ik denk dat je een zo genoemde image map wilt maken. Je kunt dit online vrij makkelijk maken. Bijvoorbeeld hier of hier.
Groet,
Evert
Beste Evert,
De tweede site werkt heel goed voor me, maar als ik de code naar mijn website copy+past dan krijg ik dus het onderstaande te zien… Is er een speciale manier waarop je dit moet doen?
Verder vraag ik me ook af wat ik met de ’target’ moet doen…
Mvg,
Cactus
-
Deze reactie is gewijzigd 8 jaren, 3 maanden geleden door BlijdorperB.
-
Deze reactie is gewijzigd 8 jaren, 3 maanden geleden door BlijdorperB.
Beste Cactus,
je moet de URLvan de afbeelding aanpassen, zodat deze op je eigen website getoond wordt. Jouw code zit er nu ongeveer zo uit (je hebt waarschijnlijk meer <area>
tags in jouw code):
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="dit-is-jouw-afbeelding.jpg" usemap="#image-map">
<map name="image-map">
<area target="" alt="Alt Tekst" title="Titel Tekst" href="#" coords="26,113,238,337" shape="rect">
</map>
Je moet de src
van het <img>
element aanpassen. Er moet nog jouw URL van je website voorstaan die doorverwijst naar de map waar je afbeelding in staat. Jouw <img>
element zal er ongeveer zo uit moeten gaan zien (de <area>
elementen heb ik weggelaten voor de eenvoud):
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="http://www.blijdorperbende.nl/wp-content/uploads/2016/08/dit-is-jouw-afbeelding.jpg" usemap="#image-map">
Hopelijk lukt het je hier mee.
-
Deze reactie is gewijzigd 8 jaren, 3 maanden geleden door Evert.
We komen er wel! De kaart werkt nu en je kan nu ook klikken. Maar de vakjes die ik heb gemaakt op de site hebben hun orginele afmetingen behouden en passen dus nu niet meer op de automatisch verkleinde kaart…
De code die ik nu heb:
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="http://www.blijdorperbende.nl/wp-content/uploads/2015/06/Blijdorp-Plattegrond-2016-EDITED-GOOD.png" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="Oceanium!" title="Oceanium!" href="http://www.blijdorperbende.nl/ontdek/oceanium/" coords="320,128,284,37,143,62,163,146,238,147,283,160,328,154" shape="poly">
-
Deze reactie is gewijzigd 8 jaren, 3 maanden geleden door BlijdorperB.
Hallo!
Ik heb de afbeelding zelf aangepast en daarna nog een keer de vakjes gemaakt, nu werkt hij perfect! Heel erg bedankt voor de hulp, heb ik gelijk weer wat geleerd over wordpress haha 😛
Bedankt!
Cactus