create a clickable maps - RocketCake Forum

Ambiera Forum

Discussions, Help and Support.

	Ambiera Forum > RocketCake
	create a clickable maps

Fred Guest
Quote
2022-11-26 22:04:53

How to create a clickable map. I have a picture and I like to link some parts of it to a site.

micaelo Registered User
Quote
2022-11-27 00:02:34

Here is how to:
https://www.w3schools.com/html/h...

It works in RocketCake (if you don't use the full code string but only from usemap= til </map>) but the image map would not be responsive.

micaelo Registered User
Quote
2022-11-27 14:12:19

Here is how to make a responsive image map in RocketCake:

Find an online service or software which creates the coordinates for your map. I'm using FastImageMap2 (German)
https://www.cl-soft.de/FastImage...
Create the coordinates, copy the code with the coordinates to a text file. Save it.

In RocketCake insert HTML Code from the Toolset. Place it. Size it. Set its background to Invisible and its borders to None.
Add an empty page. Insert your image there. (that's just to get the image into the rc_images folder and to enable you to specify the path to the image)

Copy this code (it's an example of a map with 3 round-shaped clickable areas)

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
      viewBox="0 0 700 467" >
		
<image width="700" height="467" xlink:href="rc_images/yourimage.jpg"></image>

<a xlink:href="target1.html"><circle cx="210" cy="128" r="73" opacity="0" /></a>
<a xlink:href="target2.html"><circle cx="368" cy="147" r="67" opacity="0" /></a>
<a xlink:href="target3.html"><circle cx="515" cy="156" r="64" opacity="0" /></a>
</svg>

Customize the code: width and height of image, the links, the image's file name and extension, and the coordinates of the clickable areas.

Now right-click the HTML Code insert and select Edit Code. Copy & paste your customized code. Click OK.
Click Preview.

micaelo Registered User
Quote
2022-11-29 14:40:52

I have just finished a more detailled description of how to make a responsive image map in RocketCake. See here:
https://4hundert.de/rctips/svgim...

Create reply:

Possible Codes

Feature	Code
Link	[url] www.example.com [/url]
Bold	[b]bold text[/b]
Image	[img]http://www.example.com/image.jpg[/img]
Quote	[quote]quoted text[/quote]
Code	[code]source code[/code]

Emoticons