Here is the project file showing how to do the % in a very basic example including the different picture sized for "responsive download".
Bootstrap 5 CSS Grid.
Twinstream
Registered User
811 posts
Well if he does go the Imagemapper way he will have to change the code slightly thats pasted into the html element because it looks for the image in the root folder. I see Eric changed the code and made a image folder to put the image into which would be the correct thing to do. That will allow him to preview at least.
Here is the project file showing how to do the % in a very basic example including the different picture sized for "responsive download".
Here is the project file showing how to do the % in a very basic example including the different picture sized for "responsive download".
Eric Rohloff
Senior Advisor
20,193 posts
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.
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 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
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
Twinstream
Registered User
811 posts
When I export a responsive map in Imagemapper the last instructions tell me to upload the image and the js file rwdImageMaps.min.js to the root folder (in resources). If someone were to follow the instructions for pasting, then those files need to go directly into the root of resources was all I was saying. Really its better to sort them out into the correct folders and change the links and drop the old jquery too.
The polygon feature in Imagemapper is really neat....just tried that !
The polygon feature in Imagemapper is really neat....just tried that !
Bootstrap 5 CSS Grid.
Twinstream
Registered User
811 posts
You could also make a transparent overlay that is the same size as your large image after making your map in Imagemapper. Create a new identical image in SD3 with the different sized images needed at different breakpoints. Position that under your transparent image in a div wrapper. That would solve the problem of using one large image.
Go to Colorado....
http://gluexp.coffeecup.com/maps/index.html
Go to Colorado....
http://gluexp.coffeecup.com/maps/index.html
Bootstrap 5 CSS Grid.
Stonecherub
Registered User
95 posts
Wayan wrote: "With all due respect to Mr Stonecherub, that is going to be way beyond his capability at the moment"
Truer words were never written.
Eric wrote: "I have image mapper on several of my sites. Works great for diagrams and such."
Eric, would you please send me a description of how you do that? I can follow directions even if I don't understand them. I would be most appreciative.
Truer words were never written.
Eric wrote: "I have image mapper on several of my sites. Works great for diagrams and such."
Eric, would you please send me a description of how you do that? I can follow directions even if I don't understand them. I would be most appreciative.
Twinstream
Registered User
811 posts
Stonecherub wrote:
Wayan wrote: "With all due respect to Mr Stonecherub, that is going to be way beyond his capability at the moment"
Truer words were never written.
Eric wrote: "I have image mapper on several of my sites. Works great for diagrams and such."
Eric, would you please send me a description of how you do that? I can follow directions even if I don't understand them. I would be most appreciative.
Wayan wrote: "With all due respect to Mr Stonecherub, that is going to be way beyond his capability at the moment"
Truer words were never written.
Eric wrote: "I have image mapper on several of my sites. Works great for diagrams and such."
Eric, would you please send me a description of how you do that? I can follow directions even if I don't understand them. I would be most appreciative.
Here is another one that works well.....
http://gluexp.coffeecup.com/mapify/index.html
Bootstrap 5 CSS Grid.
Eric Rohloff
Senior Advisor
20,193 posts
1. Create your image map and export it.
2. In SD add the files inside the exported image map to your resources.
3. Add an HTML Element to your page in SD.
4. Add the body code that Image Mapper provides to the html elements Element Tab.
5. Add the scripts provided by the Image Mapper to the Footer of your page by choosing Pages than Manage Project.
6. Export your project and upload.
7. Enjoy!
2. In SD add the files inside the exported image map to your resources.
3. Add an HTML Element to your page in SD.
4. Add the body code that Image Mapper provides to the html elements Element Tab.
5. Add the scripts provided by the Image Mapper to the Footer of your page by choosing Pages than Manage Project.
6. Export your project and upload.
7. Enjoy!
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
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
Stonecherub
Registered User
95 posts
Thank you, Eric, for your checklist but it failed as before. Your step 5 tells me to add the scripts to the head whereas ImageMapper says add them to the footer. Which is right?
The failed result is posted to my S drive as
pppotscom.coffeecup.com/index.html
The weather has given me a few more days in the field before the heat arrives and I plan to take them. I will be off line until Wednesday or Thursday
The failed result is posted to my S drive as
pppotscom.coffeecup.com/index.html
The weather has given me a few more days in the field before the heat arrives and I plan to take them. I will be off line until Wednesday or Thursday
Wayan Jaya
Registered User
4,817 posts
Online Now
Stonecherub wrote:
Thank you, Eric, for your checklist but it failed as before. Your step 5 tells me to add the scripts to the head whereas ImageMapper says add them to the footer. Which is right?
The failed result is posted to my S drive as
pppotscom.coffeecup.com/index.html
The weather has given me a few more days in the field before the heat arrives and I plan to take them. I will be off line until Wednesday or Thursday
Thank you, Eric, for your checklist but it failed as before. Your step 5 tells me to add the scripts to the head whereas ImageMapper says add them to the footer. Which is right?
The failed result is posted to my S drive as
pppotscom.coffeecup.com/index.html
The weather has given me a few more days in the field before the heat arrives and I plan to take them. I will be off line until Wednesday or Thursday
Why not try both ways first in the Header as Eric says if not workthen delete from the Header and try in the footer as the app says.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
Hennie
Registered User
161 posts
You may try this javascript solution at GitHub:
https://github.com/davidjbradshaw/image-map-resizer
It is well documented and should not be too difficult to use.
https://github.com/davidjbradshaw/image-map-resizer
It is well documented and should not be too difficult to use.
Eindhoven :: Netherlands
It's easy to see, once you see it.
It's easy to see, once you see it.
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.
