Sport Ngin User Group Forum
SportsEngineHQ Community Forum
Sign up Latest Topics

  Author   Comment  

Avatar / Picture

SportsEngine Moderator
Posts: 247

In another post, I mentioned that you can use SVG images in the code element. This is a great way to create an interactive element that has multiple embedded links. If you feel like tinkering in the internals of an SVG file you can since it is text-based. However, I prefer to make my life easier and use Illustrator.

Here is a quick tutorial on making a US Map with clickable links by state.

1. Download a US Map SVG image. You can use this one or there are many others available online.
2. Open the image in Adobe Illustrator.
3. Click on the state you want to add a link.
4. Open the attributes palette [Command-F11]
5. In the palette, you should see an option called 'Image Map.' The default value is set to none.
6. Click on the drop down and select polygon.
7. This will open up a box which allows you to now input a URL
8. Type in your URL including protocol (http:// or https://)
9. Save.
10. Open your SVG file in a text editor. I like TextWrangler and it's free.
11. Copy the code and paste it into the SportsEngine code element.
12. Click on the User/Edit button and see the resulting image map!

You can also make any other edits you need to your SVG like changing the color of a block and adding additional text (see example).

NOTE: the code element is limited to 64,000 characters so make sure your SVG is smaller than that size (you can see this in the bottom corner of the TextWrangler window)

Image Map Illustrator.png 

Attached Files
zip Sample US (10.75 KB, 3 views)


Rob Bedeaux
SportsEngine, an NBC Sports Group company| 807 Broadway St NE, Ste 300, Minneapolis MN 55413
Previous Topic | Next Topic

Quick Navigation:

Easily create a Forum Website with Website Toolbox.

Powered by Website Toolbox - Create a Website Forum Hosting, Guestbook Hosting, or Website Chat Room for your website.