ImageMapper, is anybody using it? -...

May 21st, 2019 at 06:11 PM
User 244626 Photo

Twinstream
Registered User
811 posts

In your Html element where you pasted the code add width="100%" after the border attribute inside the img tag.
(This will make it responsive when shrinking)

Then on the Html element go to style tab and find layout setting and set max-width to 1200px which is how large your image is.
(This will keep it from getting bigger than 1200px which is what your map was made from)

You can also set the margin left and right both to auto so it then centers on large screens.

Bootstrap 5 CSS Grid.
May 21st, 2019 at 06:34 PM
User 2040390 Photo

Stonecherub
Registered User
95 posts

Twinstream:
All of this is new to me. That said, the map is responsive for the first time but the links are gone. No tooltips, no new pages.

I changed the width to 90 %, which worked but the image is not centered.
May 21st, 2019 at 07:15 PM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,204 posts
Online Now

Redo your footer scripts
<!-- Beginning of CoffeeCup Image Map Responsive Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min.js"></script>
<script src="jquery.tooltipster.min.js"></script>
<script>$(document).ready(function(e) {$('img[usemap]').rwdImageMaps();
$('area').tooltipster();
});</script>
<!-- End of CoffeeCup Image Map Responsive Scripts -->

I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
May 21st, 2019 at 09:25 PM
User 2040390 Photo

Stonecherub
Registered User
95 posts

Eric:
I rearranged the deck chairs on the Titanic and it still sank. Your suggested reordering of script calls in the footer made no difference.

Twinstream's suggestion of adding a width=100% after border had the effect of causing the map to resize while it removed the functionality. Removing that width restored the functionality but the map no longer resizes.

Damned if I do, damned if I don't. Your textpop works, why doesn't mine?
May 21st, 2019 at 09:33 PM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,204 posts
Online Now

The scripts in the footer area aren't changed yet.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
May 22nd, 2019 at 01:25 PM
User 2040390 Photo

Stonecherub
Registered User
95 posts

Eric Rohloff wrote:
The scripts in the footer area aren't changed yet.

The new version is up as of 8 am. (I thought I had replied).
I changed the footer yesterday upon reading your post and used the "Review on" function at the top of the screen. No change as I reported then.

And no change this morning after publishing it. Twinstream advised adding a width=100% to the html which become a switch. With it, the map is resizable but no tooltips or links and without, the map is fixed size but the tooltips and links work.
Next?
May 22nd, 2019 at 01:52 PM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,204 posts
Online Now

Your jquery.tooltipster.min.js is missing.
http://pppotscom.coffeecup.com/jquery.t … ter.min.js
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
May 22nd, 2019 at 02:21 PM
User 2040390 Photo

Stonecherub
Registered User
95 posts

Eric Rohloff wrote:
Your jquery.tooltipster.min.js is missing.
http://pppotscom.coffeecup.com/jquery.t … ter.min.js


OK, I added it to the resources and republished without noticeable change. With the width set to 100%, no tooltips or links.
May 22nd, 2019 at 03:05 PM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,204 posts
Online Now

Your tooltipster.css is missing
http://pppotscom.coffeecup.com/tooltipster.css
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
May 22nd, 2019 at 07:27 PM
User 244626 Photo

Twinstream
Registered User
811 posts

Eric Rohloff wrote:
I did nothing special. All I did was give the Image in the image map code a class="html-element chip-collar" then gave the html element a class of chip-collar. This way I target my html element with styling that will actually target my image.
The only thing I did was set width:100% and height auto.

I have image mapper on several of my sites. Works great for diagrams and such.


I think Eric that I made a mistake on recomending the width="100%" on the img inline. I dont think the rwd is setup to overide that. If I remove that and then give the img a class as you describe here and then target the html element with the setting of width 100% and height auto it seems to work as your example does.

And he has to replace the style sheet you referenced also cause its empty...nothing in it. My Bad.
Bootstrap 5 CSS Grid.

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.