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>
Mapping Multiple Images on Same Page...
FX Physics
Registered User
7 posts
paintbrush
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"?
<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
https://www.callendales.com
FX Physics
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.
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.
Inger
Senior Advisor
14,565 posts
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
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Brian Durfee
Senior Advisor
1,096 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/ )
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 personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.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/
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.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.
