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.

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

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.

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

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.

Very informative post, Tony. Thanks.