Archived topic
Image Mapping Code Goes To Wrong Images
7 replies · Started by Mary Pearson on January 2, 2019
On my site at https://pwgoaltending.ca I have two images for Section "Camps" and two images for Section "Clinics".
Because I needed to open the small pic to show a larger version, plus have a Registration button to go to another page, I used Image Map Generator.
It gave me the following codes for Camps:
<img class="aligncenter" src="https://pwgoaltending.ca/goal-content/uploads/2019/01/march-break.jpg" usemap="#image-map" /> <map name="image-map"> <area title="March Break Camp" alt="March Break Camp" coords="24,27,221,224" shape="rect" href="https://pwgoaltending.ca/goal-content/uploads/2019/01/march-break-640.jpg" target="_blank" /> <area title="Register" alt="Register" coords="882,174,974,213" shape="rect" href="https://pwgoaltending.ca/the-app/" target="_blank" /> </map></p>
<p><img class="aligncenter" src="https://pwgoaltending.ca/goal-content/uploads/2019/01/summer-camp.jpg" usemap="#image-map" /> <map name="image-map"> <area title="2019 Summer Camp" alt="2019 Summer Camp" coords="25,29,222,222" shape="rect" href="https://pwgoaltending.ca/goal-content/uploads/2019/01/summer-camp-640.jpg" target="_blank" /> <area title="Register" alt="Register" coords="881,175,972,210" shape="rect" href="https://pwgoaltending.ca/the-app/" target="_blank" /> </map></p></center>and for Clinics:
<p><img src="https://pwgoaltending.ca/goal-content/uploads/2019/01/Oshawa-Clinics.jpg" usemap="#image-map" /> <map name="image-map"> <area title="Oshawa Clinics" alt="Oshawa Clinics" coords="" shape="rect" href="https://pwgoaltending.ca/goal-content/uploads/2019/01/oshawa-clinics-640.jpg" target="_blank" /> <area title="Register" alt="Register" coords="" shape="rect" href="https://pwgoaltending.ca/the-app/" target="_blank" /> </map>
<map name="image-map"> <area title="Toronto Clinics" alt="Toronto Clinics" coords="22,27,218,223" shape="rect" href="https://pwgoaltending.ca/goal-content/uploads/2019/01/toronto-clinics-640.jpg" target="_blank" /> <area title="Register" alt="Register" coords="" shape="rect" href="https://pwgoaltending.ca/the-app/" target="_blank" /> </map></p>When you click on the small images to enlarge, they all show the first image - March Break.
The code indicates that they should open a larger version of each image, but the results on the front end all show March Break.
This is the first time I've tried doing this. I'm wondering if you can tell me what I've done wrong.
Many thanks!
Hi there,
Sorry what's the difference between using this image mapping and using Add Media and link to the media file?
https://codex.wordpress.org/Inserting_Media_into_Posts_and_Pages#Step_4_.E2.80.93_Attachment_Details
With Add Media you can only add one link per image. I need two links per image - one to go to a larger view and a second to go to the Register page.
I see. Didn't know that entire thing is an image.
I'm not sure how this works but the second image is showing the wrong link on live site:
https://www.screencast.com/t/UoQObCF2CHVJ
I would try clearing your caching plugin. If that doesn't work you may need to check with whoever provided the code.
<<the second image is showing the wrong link>>
Yes, that was the whole purpose of my support request. I believe that my coding is correct. I have dumped my cache, but it still shows as the wrong image.
I will try contacting the image-mapping people.
All of your images have the same usemap value: #image-map
Each map needs a unique ID, and each image needs to point to that unique ID.
Ahhhh, that's what I needed! Thank you so much Tom!
You're welcome :)
