Webulator: Build your own website without any special software or know-how!

Recent articles

  • Adding content to and removing content from the left and right columns

    The [AddContent:] and [ClearContent:] tags can be used to add content to and remove content from the left and right columns of your web pages.

  • Embedded Summaries

    The [Summary:] tag allows you to insert the title and summary from another article into a page.

  • Copying articles

    Logged in users with moderator permissions are able to copy articles in the content management system

  • Quick Links

    The [QuickLinks:] tag allows you to insert a titled box containing a list of links into an article.

  • Accordion

    An accordion or concertina style interface can be created using the [Accordion:] tag.

  • Slideshows of all the images in another article

    The [ArticleImagesSlideShow:] tag allows you to generate an slideshow of all the images (except for the summary image) contained in another article.

  • Example page containing images for a slideshow

    The images on this page are used in article

  • Tab Menus

    The [TabMenu:] tag allows you to insert a tab style menu into a page to allow navigation within a subsection of the site.

  • iCalendar Files

    Calendar events are traditionally shared using iCalendar (.ics) files. These are often attached to event invitation emails and are widely used across calendaring applications.

  • Redirecting to other pages

    Webulator allows a page to automatically redirect to another page using [Redirect:] command
RSS Feed of this page

Image Maps

Documentation > Commands > UseMap

Webulator allows you to add image maps to allow users to click on different areas of an image in order to link to different places.

The image map needs to be created in a seperate application. There are dozens of these to be found online, and this functionality is built into many graphical desktop applications. The image map specifies which areas of the image should link to which URL.

Once you have created an image and imagemap, you need to upload the image to your website. In the 'Alt text' field for the image, you should insert [Usemap:#MapName] where MapName is the 'name' attribute of your image map.

In a separate Text field, with the 'Style for text' dropdown set to 'Plain HTML' you should place your image map. Make sure that the 'name' attribute matches the name after the # in the [UseMap:] tag for your image.

image
Site map BBC website Home Frequently Asked Questions

In this example, our image Alt text is [Usemap:#RoomMap] and our image map is:

<map name="RoomMap">
<area shape="rect" coords="0,0,154,105" href="/index.html?SB2_Action=showsitemap" alt="Site map" title="Site map" target="_blank" />
<area shape="rect" coords="158,0,308,105" href="http://www.bbc.co.uk/" alt="BBC website" title="BBC website" target="_blank" />
<area shape="rect" coords="0,110,154,210" href="/" alt="Home" title="Home" target="_blank" />
<area shape="rect" coords="158,110,308,210" href="/faqs/" alt="Frequently Asked Questions" title="Frequently Asked Questions" target="_blank" />
</map>

The above imagemap would then be shown in the article editor as follows:

How an image map is created in the article editor
Continue
Image Maps

Webulator allows you to add image maps to allow users to click on different areas of an image in order to link to different places.