Creating a Responsive Image Map with...

User 2088758 Photo


Senior Advisor
3,086 posts

Hey fellow coffeecupers!

I have been at the for about 3 hours now and still banging my head against a wall. I have created a responsive image map using 5.0 software just under Female Directors and Investigative Documentaries. You will see an image with Canadian Panorama, Jury and Crossing Borders collouge with little file icons. I have mapped these icons to the respective pages. They work in full screen mode but as soon as I start shrinking the page they stop working.

http://riffa.ca/index.html

I have copied the exported folder to my server and pasted the scripts provided in the footer of the website. Maybe one of you guys have successfully used this software and can spot my mistake right away.

Thanks in advance
Steve:|
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 458539 Photo


Registered User
1,583 posts

Hey Steve,

I can't get the icons to don anything?

Byron
User 458539 Photo


Registered User
1,583 posts

Sorry - under the Canadian Pan page

Probably a topic for RSD but under http://riffa.ca/investigative-documentary.html page how did you do the rollover effect for the individual movies? Nice

Byron
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Steve, I haven't used the Image Mapper for quite some time. I'm on a laptop right now, and when I view the page, normal or full screen doesn't matter, the file icons don't do anything. Could it be that the coordinates move with the size of the image? Just a guess out of the blue...
Or, there might be something with the path to various bits and bobs.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Looks like the file jquery.rwdImageMaps.min.js is missing, or at least not where it is expected to be.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2088758 Photo


Senior Advisor
3,086 posts

Thanks Inger,

No that didn't work either. It only seems to be active at 1900px anything smaller and no go.

Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2088758 Photo


Senior Advisor
3,086 posts

Byron Tipping wrote:
Sorry - under the Canadian Pan page

Probably a topic for RSD but under http://riffa.ca/investigative-documentary.html page how did you do the rollover effect for the individual movies? Nice

Byron


Hi Byron,

This is easily achieved by placing a paragraph element in the column that has the background image. Setting the min height to the same as your image. Then set the properties of the paragraph to display none; and the hover to display:block; I also added some transitions in there.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

How did you solve the problem, Steve? I checked today, and the image map works for me at any screen size (Edge, Chrome and Ffx). And I see that the missing file has been put into the right place.
Was it just a matter of clearing the cache? ;)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 187934 Photo


Senior Advisor
20,181 posts

Works for me.;)
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
User 2088758 Photo


Senior Advisor
3,086 posts

I didn't do anything. Yea I moved that file into place. Weird because the image mapper says nothing about that js having to be in the root folder.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA

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.