Using the HTML Image Map, how to make a phone in the side bar?

Twine Version: 2.3.16
Story Format: Sugarcube 2.36.1

Alright, so this one is gonna be tricky.

First, I added another UI Bar on the right side of the screen using GreyElf’s method. Then, I thought it would be useful to be able to add a phone to said bar, and using the HTML Image Map would potentially be able to work.

Would this be possible, or would the right UI bar not be able to hold the image map?

I tried doing it using a website that automatically does it for you, but it didn’t work. Here is what it looks like in the side bar, and here is the code I added to the image

<img src="images\Phone\template.png"  height="50%" width="100%">

<map id="imgmap20223462316" name="imgmap20223462316"><area shape="circle" alt="" title="" coords="90,442,25" href="" target="Groggy Night" /><area shape="circle" alt="" title="" coords="157,442,25" href="" target="" /><area shape="circle" alt="" title="" coords="223,444,25" href="" target="" /><area shape="rect" alt="" title="" coords="135,481,175,517" href="" target="" /><!-- Created by Online Image Map Editor ( --></map>

Does changing the dimensions of the image affect it? If so, how would I be able to do it while making it scale for larger or smaller screens. Also, is the Target section of the HTML image map the passage it’s meant to send to?

Also, the image I put on has it set so the width and height are different, because otherwise the image looks super stretched, like this. However, when the screen size does change, the image gets fucked up, and squished in other ways. How can I keep the relative size of the image, while still allowing it to scale for other size screens?

If you look at the documentation SugarCube’s HTML Attribute - Special Attribute feature you will see that it includes an example of how to apply then to the <area> element of an image map.

So you should be able modify your own example code like so…
(untested code example)

<area shape="circle" coords="90,442,25" data-passage="Groggy Night" />

note: you may want to assign meaningful values to the alt and title attributes of your elements, as they can be used as: a tooltip by the web-browser; and a spoken description by screen readers.

Hey, so I read more about the HTML image map, and managed to get it working, thanks to you, so I appreciate that.

My next question is, how do I increase the size of the right UI bar that you made? Because here is what the finished product looks like. As you can see, the bar is too thin, so it has to scroll. I’ve been looking through the CSS, and I’ve been changing some values, but the most I got was changing the size of the bar when it was stowed, but not when it it’s unstowed.

Is the right bar “too thin” or the phone image too wide?
(just remember not every one that is viewing project has the same width screen as you, like those using mobile devices.)

But, to answer your question…

The width of the right side-bar is controlled by the width property of the #right-ui-bar CSS rule, changing that property’s value will alter the side-bar’s width.

However take note that there is a relationship between that property’s value and the value of the right property of the #right-ui-bar.stowed CSS rule, which is used to hide part of the side-bar when it is “stowed”.

I see my problem. When I tried changing it before, I didn’t change the stow accordingly, which made me think that only changed the width of the bar when it was stowed. Thank you :+1: