resizing on mulitple image mapping

[devKBD]

resizing JS is not working properly if we put separate mapping on two different images in one page. Only one image mapping is working at once. Let me know if i am doing something wrong.

[davidjbradshaw]

Does each map have a different ID?

[devKBD]

Yup

[devKBD]

if you find the solution let me know.

[devKBD]

I am tired in working with multiple image mapping on same page.

[davidjbradshaw]

You need to make a simple test case and post a link to it here

[nickpbassill]

Hi David,
I've been happily using your map resizer, but recently ran into the same problem as the above commenter. I can link to an example: http://operations.nysmesonet.org/~nbassill/dashboard/ . On that default, both the far two right panels have clickable locations (camera images up top, dots down below). They have their own unique map locations, and while the bottom one works, the the locations aren't quite right (I think the two images are close enough in relative size to make it work).

However, if you change that top right square to be a county map, like at this link: http://operations.nysmesonet.org/~nbassill/dashboard/index.php?precip=precipday&other=maxgust&misc=nycountymaplogo&past=precip1&loop=P1
... both the map locations for that as well as the bottom right panel now fail. All three mentioned here have different map location names.

I am far from an expert programmer, but the relevant code for that top right square is something like:

<?php if ($miscid == 'nycountymaplogo')
 include("../settings/dhsescountylocations.html");
$mapname = "dhsescountylocations";
$maptext = " - Click County Name To View Weather Risks";
 ?>
<?php if ($miscid == 'camplot')
 include("../settings/camlocations.html");
$mapname = "camlocations";
$maptext = " - Click Thumbnail To View Loop";
 ?>

<?php include("settings/mischeader.php")?><p><a href="http://operations.nysmesonet.org/~nbassill/current/index.php?map=<?=$miscid?>" target="_blank"> <img src="http://operations.nysmesonet.org/~nbassill/plots/live/<?=$miscid?>.png" width="97%" alt = "weather" usemap=#<?=$mapname?>></a>
<br><i>Most Images Update Every 5 Minutes</i> </td>

[davidjbradshaw]

How are you calling imageMapResize()?

[nickpbassill]

At the moment it's done just by inserting a script at the end of the html code. Simply:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="../js/imageMapResizer.min.js"></script>
<script type="text/javascript">
$('map').imageMapResize();
</script>

[ucb]

I have a similar problem

In my case I switch between images based on the aspect ratio of the screen. I switch between two maps accordingly. Everything works except for the rescaled alternative image. I have tried
<script type="text/javascript"> $('map').imageMapResize(); </script>
and also putting it into conditional statement that switches images and mappings inside of jquery, and finally putting it into the outer function, as suggested in readme

In all cases the default image gets remapped correctly, but for the alternative image, mapping only works in the non-rescaled sense (the image resizer does not work)

[vastcapybarra]

How do I use imageMapResize on a page with multiple image maps?
In another forum, someone said they " added a imageMapResize() for each map name in (document).ready(function()." Can someone give me an example of what the code would look like, pretty please?

[davidjbradshaw]

You should be able to just run it once after all the image maps have loaded in the HTML. If you run it a second time it will look for imagemaps that it has not already seen.