Topic Closed
hoghoj1
176 Posts

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

2 years ago#10242

mahotilo
91 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

2 years ago#10244

juergen
1.4K Posts
51.7K 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.

 

2 years ago#10245

juergen
1.4K Posts
51.7K 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: 2 years ago#10246

juergen
1.4K Posts
51.7K 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: 2 years ago#10247

hoghoj1
176 Posts

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

2 years ago#10248

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects

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

Maybe ;-)

2 years ago#10249

Topic Closed

 

News

Typesetter 5.1
8/12/2017

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

Over 8 Times Faster Than Wordpress
5/3/2016

We've known for a long time that Typesetter is fast. It's something we take pride ... 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