• Hi guys!

    So I have a bit of a question, but let me introduce myself first. I go by the name of ‘Cactus’ since both my actual (Dutch) name and my username are hard to pronounce in English. I have a fairly large fan site of the Rotterdam Zoo (click here) and Im working on several ‘Discover’ (Ontdek) pages. Here I try to tell as much as possible about the exhibits. I sort the pages by biome, so there are pages for the Himalayas, Congo, etc. I have this idea in mind to have an image on the main ‘Discover’ page which is a map of the zoo, where you can click on a place in the zoo and go to that area. Say you click left you go to page A, click right and go to B.

    Is there any way to make this possible? I should probably also mention I’m not real good at programming…

    Either way, thanks for helping me out guys 🙂

    • Dit onderwerp is gewijzigd 7 jaren, 7 maanden geleden door BlijdorperB.
5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • 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

    Thread starter BlijdorperB

    (@blijdorperb)

    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 7 jaren, 7 maanden geleden door BlijdorperB.
    • Deze reactie is gewijzigd 7 jaren, 7 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 7 jaren, 7 maanden geleden door Fourleafed.
    Thread starter BlijdorperB

    (@blijdorperb)

    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 7 jaren, 7 maanden geleden door BlijdorperB.
    Thread starter BlijdorperB

    (@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

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Het onderwerp ‘Link map Image’ is gesloten voor nieuwe reacties.