Mapping Multiple Images on Same Page...

User 477833 Photo


Registered User
7 posts

Hello,

I have been trying to map two images on the same page. I have added the HTML code of both maps related to "Trading Diagram" and "Social Diagram" (see below). The issue that I am facing is that only the first image is picking up the links. The second one is picking up the links pertaining to the FIRST image. I have tried to change the USEMAP="#NotNamed" and map name="NotNamed" parameters but it had no effect. I am using version 4.1 of Image Mapper.

How would you go about solving this please? The code is below.

Thanks!

HTML1
<html>
<body>

<!-- Created by CoffeeCup Image Mapper (www.coffeecup.com) -->

<!-- Beginning of Client Side Image Map -->
<img src="Trading Diagram.png" USEMAP="#NotNamed" BORDER=0>
<map name="NotNamed">
<area shape="rect" coords="176,232,295,259" href="https://twitter.com/FXPhysicsLIVE" alt="" target="_blank">
<area shape="rect" coords="174,427,297,455" href="https://www.youtube.com/user/FXPhysicsTV" alt="" target="_blank">
<area shape="rect" coords="575,239,677,269" href="http://www.fxphysics.com/Services.html" alt="" target="_self">
<area shape="rect" coords="575,428,677,460" href="http://www.fxphysics.com/Services.html" alt="" target="_self">
</map>
<!-- End of Client Side Image Map -->
</body>
</html>

HTML2
<html>
<body>

<!-- Created by CoffeeCup Image Mapper (www.coffeecup.com) -->

<!-- Beginning of Client Side Image Map -->
<img src="Social Diagram.png" USEMAP="#NotNamed" BORDER=0>
<map name="NotNamed">
<area shape="circle" coords="272,45,31" href="http://wordpress.fxphysics.com/" alt="" target="_blank">
<area shape="rect" coords="246,99,291,143" href="https://twitter.com/FXPhysics" alt="" target="_blank">
<area shape="rect" coords="246,152,290,196" href="https://www.facebook.com/FXPhysics" alt="" target="_blank">
<area shape="rect" coords="246,223,290,267" href="https://www.youtube.com/user/FXPhysicsTV" alt="" target="_blank">
</map>
<!-- End of Client Side Image Map -->
</body>
</html>
User 271657 Photo


Ambassador
3,816 posts

<img src="Trading Diagram.png" USEMAP="#NotNamed" BORDER=0>
<map name="NotNamed">
Have you tried giving each image map its own unique name (rather than having both "not named"?
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 477833 Photo


Registered User
7 posts

Hello Paintbrush,

Yes I did. I tried to specify the target maps for USEMAP alone, then map name, then both. To no avail.
Both maps obviously have a different name in my folder.

The thing is that the FIRST image is working fine without specifying any map name (leaving NotNamed everywhere), which is odd, but is also telling me that it has no influence on the outcome.

I don't know what else to try anymore.
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Would it be an idea to put them on different pages and then use iframes to display them on the same page? Iframes can also be made responsive.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 10077 Photo


Senior Advisor
1,095 posts

You have issues in your code. Here is what I see.

1. There should only be one <html><body> and one </body></html>

<html>
<body>
<img src="Trading Diagram.png" USEMAP="#name1" BORDER=0>
<map name="name1">
<area shape="rect" coords="176,232,295,259" href="https://twitter.com/FXPhysicsLIVE" alt="" target="_blank">
<area shape="rect" coords="174,427,297,455" href="https://www.youtube.com/user/FXPhysicsTV" alt="" target="_blank">
<area shape="rect" coords="575,239,677,269" href="http://www.fxphysics.com/Services.html" alt="" target="_self">
<area shape="rect" coords="575,428,677,460" href="http://www.fxphysics.com/Services.html" alt="" target="_self">
</map>

<img src="Social Diagram.png" USEMAP="#name2" BORDER=0>
<map name="name2">
<area shape="circle" coords="272,45,31" href="http://wordpress.fxphysics.com/" alt="" target="_blank">
<area shape="rect" coords="246,99,291,143" href="https://twitter.com/FXPhysics" alt="" target="_blank">
<area shape="rect" coords="246,152,290,196" href="https://www.facebook.com/FXPhysics" alt="" target="_blank">
<area shape="rect" coords="246,223,290,267" href="https://www.youtube.com/user/FXPhysicsTV" alt="" target="_blank">
</map>

</body>
</html>


2. Your filenames should not have spaces.
Trading Diagram.png should be trading-diagram.png
Social Diagram.png should be social-diagram.png

3. Your map names MUST be different. See where I changed USEMAP="" and <map name="" above. (See "Map Properties" about 1/2-way down this page: http://www.coffeecup.com/help/articles/ … image-map/ )
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including training for Site Designer and Web Form Builder via Zoom.
Email me at support@usconsumernet.org or call 865-687-7698.

Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.