Mapping Multiple Images on Same Page


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>


Senior Advisor
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


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.


Senior Advisor
11,007 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 new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RSD, RFF and RBB: http://www.horgenhonning.net/sharing/



Senior Advisor
928 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/ )
Brian

Want personal and specialized help with RLM, RSD or with converting your VSD (or other) site to RLM/RSD? Email me at cchelp@uscni.org or call 865-687-7698.

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.