Foundation & Materialize don't work together, you have to choose one or the other

Unless you export the foundation thingy with the working stuff,, then put it into an HTML element within Materialize. But then again therein will start the responsiveness all ovr again

I'm just at the end of my holiday now, so I have plenty to do preparing for departure, but after June 1st I could redo that wee excercise of mine in materialize, if that would be of interest.

Check the location of the javascript imageMapResizer.min.js
The reference:
<script type="text/javascript" src="../js/imageMapResizer.min.js"></script>
is not valid; therefore this script :
<script>$(document).ready(function() {
$('map').imageMapResize();
});</script

(just before the </body> tag) does not work.

> is missing from the end of this script.

But remove all of this completely as you already have code inserted above it.

The project was rebuilt from zero on Saturday using foundation because Inger's wee exercise was in foundation. Then, on Sunday, I completely rebuilt the project in Materialize using the same script calls that worked in foundation. The problem clearly has to be the function that resizes the map because everything else does in Materialize what it did in foundation.

I tried MapResizer just before I shut down and should have taken it out before I published because it changed nothing. Wouldn't it be nice if CC could integrate Notepad++ as a text editor to replace the tiny-font boxes we have to work with now.

I am organizing my writing and my images to use the functions available in Materialize, I don't want to go back to foundation.

Here is a project file that may help using a different re-sizing plugin called mapify.js and also tooltipster.

Its done in Materialize.

(You can only use the polygon tool - no circles or rectangles in Image Mapper)

I am using a transparent png for the main map image and using background images on the html-element to get the responsive downloading.

http://gluexp.coffeecup.com/toolmap/

Twinstream writes: <<I am using a transparent png for the main map image and using background images on the html-element to get the responsive downloading.>>

Sorry, I don't understand that. I see calls to .mapify in lines 49-52 but don't know what they do. Nor do I understand .mapify-hover at line 17.

I like the container-grid tooltip_templates.

Thanks, I need this to work.

Eric:

ImageMapResizer was a late addition and a mistake, it accomplished nothing. The problem seems to be with rwdImageMaps that won't resize the map in Materialize.

Twinstream sent a kludge that works, I'm waiting for him to explain some things I don't understand.

On your current web example at http://pppotscom.coffeecup.com/index.html

you need to change the code you pasted into the html box for the img only....from

<img src="Bing25May.jpg" usemap="#bing25may" border="0">

to

<img src="Bing25May.jpg" usemap="#bing25may" border="0" class="responsive-img">

and it will begin to work.