Typoscript for Image map

Posted: June 28, 2012 by Sankar Vijayakumar in Typo3
Tags: , , , , ,
Typoscript for Image map

An image-map is an image with clickable areas. It allows us to add multiple links to an image or limit the link area in an image. A sample code for image-map is follows:

      Checkmate!
      

            

            

      

The above html code can be realized using the below typoscript:-

lib.checkmate_imagemap = COA
lib.checkmate_imagemap{
      10 = IMAGE
      10{
            file= fileadmin/templates/images/checkmate.png
            titleText= Checkmate!
            altText = Checkmate!
            params=usemap=#Map
      }
      20 = COA
      20{
            10 = TEXT
            10 {
                  typolink{
                        parameter = 1
                        returnLast = url
                  }
                  wrap = <area shape="rect" coords="70,10,210,115" href="|">
            }
            20 = TEXT
            20 {
                  typolink{
                        parameter = 2
                        returnLast = url
                  }
                  wrap = <area shape="poly" coords="343,166,327,318,385,318,370,166" href="|">
            }
      }
      20.wrap = <map name="Map" id="Map">|</map>
      wrap =

|

}

And the output is:

Checkmate!

Checkmate!

To know more about image-map, click here.

Advertisements

How's it? Your comments and suggestions...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s