Highlighted

Clickable Map — Responsive Design

Community Beginner ,
May 14, 2018

Copy link to clipboard

Copied

I'm trying to make a map with clickable areas that play sounds.

(For example—you click the city and hear traffic/honking horns... you click the coast and hear ocean waves.)

I tried this as scalable HTML and it works but it bugs out on smart phones when you double tap.

It seems the phone resizes the browser on double tap and the clickable areas can't keep up... it gets wonky.

The sounds play inconsistently and the page keeps resizing while you're trying to click.

Is it possible to make clickable areas on an image in true responsive design?

I haven't been able to figure out how to keep my clickable areas attached to the right spots on my map background while the window scales.

Thanks for considering!

Most Valuable Participant
Correct answer by Lilybiri | Most Valuable Participant

Which version do you use? There are two worflows to create responsive projects in CP2017: Fluid Boxes and Breakpoint Views. More details in my blog post:

Fluid Boxes Or Breakpoint Views? - Captivate blog

Yoyu have to be aware of the fact that it is impossible to stack objects in the Fluid Boxes workflow (unless you use static fluid boxes, where you lose deal of the real fluidity).

Even for breakpoint views I learned that it is much easier if you don't have objects that you have to keep 'together'. I don't know exactly how you build the clickable map? Do you use the command Play Audio triggered by the success event of the interactive object?

Views

144

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Clickable Map — Responsive Design

Community Beginner ,
May 14, 2018

Copy link to clipboard

Copied

I'm trying to make a map with clickable areas that play sounds.

(For example—you click the city and hear traffic/honking horns... you click the coast and hear ocean waves.)

I tried this as scalable HTML and it works but it bugs out on smart phones when you double tap.

It seems the phone resizes the browser on double tap and the clickable areas can't keep up... it gets wonky.

The sounds play inconsistently and the page keeps resizing while you're trying to click.

Is it possible to make clickable areas on an image in true responsive design?

I haven't been able to figure out how to keep my clickable areas attached to the right spots on my map background while the window scales.

Thanks for considering!

Most Valuable Participant
Correct answer by Lilybiri | Most Valuable Participant

Which version do you use? There are two worflows to create responsive projects in CP2017: Fluid Boxes and Breakpoint Views. More details in my blog post:

Fluid Boxes Or Breakpoint Views? - Captivate blog

Yoyu have to be aware of the fact that it is impossible to stack objects in the Fluid Boxes workflow (unless you use static fluid boxes, where you lose deal of the real fluidity).

Even for breakpoint views I learned that it is much easier if you don't have objects that you have to keep 'together'. I don't know exactly how you build the clickable map? Do you use the command Play Audio triggered by the success event of the interactive object?

Views

145

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Most Valuable Participant ,
May 15, 2018

Copy link to clipboard

Copied

Which version do you use? There are two worflows to create responsive projects in CP2017: Fluid Boxes and Breakpoint Views. More details in my blog post:

Fluid Boxes Or Breakpoint Views? - Captivate blog

Yoyu have to be aware of the fact that it is impossible to stack objects in the Fluid Boxes workflow (unless you use static fluid boxes, where you lose deal of the real fluidity).

Even for breakpoint views I learned that it is much easier if you don't have objects that you have to keep 'together'. I don't know exactly how you build the clickable map? Do you use the command Play Audio triggered by the success event of the interactive object?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
May 15, 2018

Copy link to clipboard

Copied

Thank you for the reply Lilybiri!

Yes, I am building the clickable map with play audio—triggered by shape images functioning as buttons.

I've only tried fluid boxes and yes, I did notice that images won't stack.

I haven't tried breakpoints yet. Are images stackable in breakpoints?

I'll take a look at your blog post. Thanks again!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Most Valuable Participant ,
May 15, 2018

Copy link to clipboard

Copied

Yes, stacking is possible in Breakpoint Views. As you will read, you'll

need more time for developing. All depends on the setup for position

properties.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
May 15, 2018

Copy link to clipboard

Copied

Thank you Lilybiri that's very helpful!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Captivate User Guide
New Group