Display answers or tokenattributes as an overlay over a graphic

More
3 years 2 months ago #123278 by jelo
jelo created the topic: Display answers or tokenattributes as an overlay over a graphic
E.g. you have price labels inside a graphic and want to display different prices on the labels.
Is there a proven way to place text from e.g. answers or tokenattributes on a graphic at certain positions?
If SVG would be supported in every browser I would go that route, but with a bitmap graphic and inside Limesurvey, I don't see a practical solution.

Are you a student conducting a survey? If yes, tell me why you use LimeSurvey?
www.limesurvey.org/forum/development/116...y-you-use-limesurvey

Please Log in or Create an account to join the conversation.

More
3 years 2 months ago - 3 years 2 months ago #123282 by steve_81
steve_81 replied the topic: Display answers or tokenattributes as an overlay over a graphic
Hi,

I'm not so familiar with design, but what about a few div-Containers?

A divContainer with to divs inside, floating into each other.
<div>
<div style="height: 20em; width: 20em; background-color: #E1E1E1; float: left">The picture</div>
<div style="position: absolute; float: left; margin: 5em 10em">little Label {Token}</div>
</div>

Greets
Stefan
Last Edit: 3 years 2 months ago by steve_81.

Please Log in or Create an account to join the conversation.

More
3 years 2 months ago #123297 by jelo
jelo replied the topic: Display answers or tokenattributes as an overlay over a graphic
Thanks for the idea. Perhaps someone can comment on crossbrowser issues when using this approach.

The idea looks great inside the html editor of limesurvey. But there seem to be some issues with templates and the different divs. When using an image with a certain size, the image is not limited to the question text area, but overlapping answer items as well.

Are you a student conducting a survey? If yes, tell me why you use LimeSurvey?
www.limesurvey.org/forum/development/116...y-you-use-limesurvey

Please Log in or Create an account to join the conversation.

More
3 years 2 months ago #123301 by steve_81
steve_81 replied the topic: Display answers or tokenattributes as an overlay over a graphic
Hi,

if you make the size of the div relative to the available space and the size of the image too, you prevent an overflow (the height then depends on the picture size):
<p>
Questiontext:</p>
<div>
<div style="float:left; width:70%">
<img src="source/to/your/pic.jpg" width="100%"/></div>
<div style="position: absolute; float: left; margin: 10% 10%;">
little Label</div>
</div>
<div style="clear: left">
[This div is needed for a proper line break. You can leave it blank or continue with your question.]
</div>

Additional hint: You can define the styles in an own class in the template if you want.

The div-Containers are so common, no Browser should have problems, usually it is displayed always in the same desgin.

Nice Greetings
Stefan

Please Log in or Create an account to join the conversation.

More
3 years 2 months ago - 3 years 2 months ago #123305 by tpartner
tpartner replied the topic: Display answers or tokenattributes as an overlay over a graphic
A couple of small additions...

1) You should define the position of the wrapper div (relative) so the "Little Label" div is positioned relative to it.
2) I don't think you need to float the Little Label" div - positioning it absolutely will override that.

<p>
	Questiontext:
</p>
<div style="position:relative">
	<div style="float:left; width:70%">
		<img src="source/to/your/pic.jpg" width="100%"/>
	</div>
	<div style="position: absolute; width: 50%;  left: 10%; top: 10%;">
		Little Label
	</div>
</div>
<div style="clear: both">
	<!--This div is needed for a proper line break. You can leave it blank or continue with your question.-->
</div>

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last Edit: 3 years 2 months ago by tpartner.

Please Log in or Create an account to join the conversation.

More
3 years 2 months ago #123340 by jelo
jelo replied the topic: Display answers or tokenattributes as an overlay over a graphic
Very informative post, Tony. Thanks.

Are you a student conducting a survey? If yes, tell me why you use LimeSurvey?
www.limesurvey.org/forum/development/116...y-you-use-limesurvey

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!