how can I add text links on top of a diagram or picture?

  • 1
  • Question
  • Updated 8 years ago
  • Answered
example; used in real estate floor plans to display pictures.
Photo of ken boden

ken boden

  • 1 Post
  • 0 Reply Likes
  • sure of a sulotion

Posted 8 years ago

  • 1
Photo of Stefan


  • 4448 Posts
  • 190 Reply Likes
Hello ken boden

One easy solution would be to add your floor plan image as a background image to a Custom Panel, and then add Text Widgets with text links on top of it, maybe by using the Column Divider Widget as well. It will require quite a bit of moving elements around with the margin functionality until you achieve the desired result.

This solution will work best with a large picture as the background for Text Widgets put on top.
Photo of Gop


  • 7473 Posts
  • 2115 Reply Likes
Hi Ken,

There's a technique called image mapping which is used to segregate various parts of an image and this allows for a number of added facilities such as links to details of each part of the map/(floorplan); images of the specific areas associated with the plan even 3D imagery which allows users to see the virtual space from inside. Basically it's all linked to the image map.

Image maps can be created easily with various online tools.
Photo of Philip Taylor

Philip Taylor

  • 355 Posts
  • 66 Reply Likes
If you just want to display a picture, with a label on top, you can use a simple table setup like this (change the mypic.jpg to the picture you choose):

<table class="image">
<caption align="top">Label here</caption>
<td><img src="resources/mypic.jpg" alt="the picture you chose" title="This is my picture" >