web counter
Image Mapper for RapidWeaver
My Image

All the latest RapidWeaver Stacks reviewed,
plus the most important community news …

Stay up to date with current RapidWeaver developments

Image Mapper for RapidWeaver

In June of this year, I reviewed HotSpots Pro from S4S. A few days ago Will re-released an updated version of the one-time Tsooj Media stack ImageMapper – also as a Stacks4Stacks product. Hot Spots; Image Maps — potentially the same thing, so does it make sense to have two stacks that, essentially, do the same thing housed within the same stables?

Let's do a quick recap. Hotspots allows you to overlay image areas with live rectangles, or with Fontawesome icons. The rectangles and icons can each be linked to a URL, for instance, or a lightbox.

S4S Hotspots
ImageMapper allows you to overlay an image with rectangles, triangles, hexagons and circles, but more importantly – with a mapped area…

S4S ImageMapper


… And I was astonished to find that it's easier to add a polygon form than it is to add a simple circle, or square.
So how does it work? First, obviously, you drag ImageMapper into a Stacks page and add an image to the image well. The image may be dragged and dropped, or warehoused.
Adding a polygonal area to your image is simple – Activate Show Coordinates Inspector in the stack settings panel and switch to preview. With the crosshairs that are now available, click around the area that you'd like to highlight, clicking on the starting point a second time to close the polygon, just like Photoshop etc.
Below the image, you will now see a list of your coordinates. Copy the coordinates, paste them into the ImageMapper Area child stack, deactivate Show Coordinates in the main stack and switch back to preview.
Now when you hover over the enclosed area, it will have a highlighted overlay with a tooltip. You can add a Link to the ImageMapper Area stack, which you can set to open a URL, open a lightbox, or to a link somewhere else on the page – product details, for instance.
In the screenshot above, I have superimposed four different image maps. They appear one at a time, of course.

So how do you add something as 'simple' as a circular overlay? You need three coordinates: 1 – the position from the left of the image; 2 – the position from the top; 3 – the radius of the circle – all coordinates are separated by a comma. My tip: In the ImageMapper Area child, choose your shape – Circle, or Rectangle and then adjust the size and position whilst in preview.
For more complicated shapes, such as a triangle, or an octagon, load an image of the shape to begin with; map the shape out with the crosshairs and then copy the coordinates into your final image The base stack provides a square, a triangle, a circle and a hexagon to get you started. The hexagon is already mapped out.

Stack settings

ImageMapper
Data Source – Set up your Image maps using either the child stacks, or an HTML image map
Image Source – Dragged and Dropped, or Warehoused
Show Coordinate Inspector – See above
Area Mousover Colouring – Fill Colour, Stroke Colour
Fill Opacity
Stroke Opacity
Stroke Width
Fade Speed

ImageMapper Area
Area Title – Title for the tooltip
Area Link
Area Coordinates
Custom Area Attributes – add a class to the overlay

So does it make sense to have two similar stacks in the same stables?
Absolutely! ImageMapper is ideal for those more complicated image maps.

blog comments powered by Disqus

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

Subscribe to Ninja News
or ask a question

Hi, I’m the Ninja Bot. What’s your name?
image/svg+xml
Nice to meet you, [1-1]. Could you tell me your mail address?
image/svg+xml
[1-1], would you like to subscribe to the monthly Ninja Newsletter?

Yes, I would like to receive your monthly newsletter.

No thanks, I’m good for now. I have a different issue.

image/svg+xml
Thanks for your support, [1-1]. Is there anything else I can do for you?
image/svg+xml

[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I would like to subscribe to the Ninja Newsletter

Message

[4]
I’m sorry tohear that, [1-1]. How may I help you then today?
image/svg+xml

[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I don’t want to subscribe to the Ninja Newsletter right now.

Message

[6]

Thanks again for contacting us. Your request was successfully submitted.

Contact Information

rjh logo

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—17

Powered by rjh-design

This website was built with loving care on a Mac using Foundation. For more information, contact me.

Don’t miss a post!

Sign up for our monthly newsletter.

A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.

View previous campaigns.

Subscribe to the Ninja Newsletter

* indicates required