Topic Closed
hoghoj1
185 Posts
HH-Support

Hi,

I wonder if it would be possible to add layers, so there could be elements "floating" upon one another. Something similar to the plugin "Sticky Note", but without sticky note picture. You could then have a free space available to put text and pictures within and place it anywhere. Maybe also with the possibility to rotate pictures!

I also miss the function to place "hot zones" anywhere on a graphic element, where you can put a link within. That way you could have several links within a picture.

Has anybody thought of making a plugin for these functions?

Hoping to hear positive remarks / ideas :-)

hoghoj1

3 years ago#10242

mahotilo
93 Posts

I also miss the function to place "hot zones" anywhere on a graphic element, where you can put a link within. That way you could have several links within a picture.

Has anybody thought of making a plugin for these functions?

You can try Jürgen's plugin (still in beta)

http://typesetter-addons.grafikrausz.at/ImageMarker

3 years ago#10244

juergen
1.5K Posts
54.4K Downloads
16 Plugins
design, web development & visual effects

Hi,

since Typesetter sections are generic <div>s you can use an inline style attribute such as

position:absolute; left:25%; top:25%; z-index:100;

applied via Section Attributes to stack them.
If you want to rotate them, also add sth. like

-webkit-transform:rotate(12.5deg); transform:rotate(12.5deg);

to the same style attribute.

 

3 years ago#10245

juergen
1.5K Posts
54.4K Downloads
16 Plugins
design, web development & visual effects

For the 'hot zones'. You're probably thinking of the <map> tag.

Unfortunately the coordinates of these map tags are in pixels, which renders them pretty useless in responsive designs where images get scaled if viewport or grid column sizes demand it.
The only alternative is to use inline SVG in cases we need polygonal/irregular shaped clickable areas. Not trivial, though.
If rectangular areas suffice, we can still use empty <a> tags, again with position:absolute + top, left, width and height defined in % (of the parent container div, which needs position relative) and high z-indexes. The underlying image, placed in the same container, may well define the container's size or would have to scale with the container's size.

As mahotilo already mentioned, ImageMarker does something similar and it uses exactly the mentioned technique (% units to make everything responsive).

 

Edited: 3 years ago#10246

juergen
1.5K Posts
54.4K Downloads
16 Plugins
design, web development & visual effects

Let me try to show it here...
 

Singapore from Wikipedia
The HTML
<div style="width:50%; position:relative;">
  <img alt="Singapore from Wikipedia" src="https://upload.wikimedia.org/wikipedia/id/a/a5/Batam_Singapore_ports.png" style="width:100%; height:auto;" />
  <a href="https://www.typesettercms.com" style="position:absolute; width:25%; height:20%; left:15%; top:15%; border:1px solid red;" target="_blank">&zwnj;</a>
  <a href="https://upload.wikimedia.org/wikipedia/id/a/a5/Batam_Singapore_ports.png" style="position:absolute; width:15%; height:25%; right:5%; bottom:5%; border:1px solid blue;" target="_blank">&zwnj;</a>
</div>
Edited: 3 years ago#10247

hoghoj1
185 Posts
HH-Support

Hi,

have now tried the two suggestions, I liked mahotilo's suggestion about using Jürgen's Imagemarker. it works perfectly, if you're satisfied with, that the link will be placed into the mouse-over window. It's much easier to use than the code from Jürgen. That may be a hint for Jürgen to add to the Imagemarker :-)

The other issue about overlapping sections works perfectly with the style attributes, GREAT :-D

Thx to you both,

hoghoj1

3 years ago#10248

juergen
1.5K Posts
54.4K Downloads
16 Plugins
design, web development & visual effects

… may be a hint for Jürgen to add to the Imagemarker :-)

Maybe ;-)

3 years ago#10249

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Luzern (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Website * ...

Find out more about our Provider Spotlight

Log In

  Register