imagemap.md

HAPEL Builder Reference

---

Image Map

Description

The \HAPEL\Builder\Imagemap() class allows for the creation of complete <img .../><map><area></map> components.

---

Getting Started

HAPEL already loads the Image Map Class automatically so all you need to do is to create an instance of the class like so:

$I = new \HAPEL\Builder\Imagemap();

Setting Image

To create the image used in the image map, call:

$I->setImg($src, $width, $height, $alt, $class, $id, $style, $data, $attr);

The setImg() method takes the following parameters:

Parameter	Type	Required	Default
$src	string	yes
$width	int	no	null
$height	int	no	null
$alt	null, string	no	null
$class	string, array	no	null
$id	string	no	null
$style	array	no	null
$data	array	no	null
$attr	array	no	null

Setting The Areas

To create the areas used to define the image map, call:

$I->addArea($shape, $coords, $href, $rel, $alt, $attr);

The addArea() method takes the following parameters:

Parameter	Type	Required	Default	Expected Values
$shape	string	yes		'default', 'rect', 'circle', 'poly'
$coords	string	yes
$href	string	yes
$rel	string, array	no	null
$alt	null, string	no	null
$attr	array	no	null

Showing the Image Map Component

To show the fully coded image map, call the get() method:

echo $I->get($name);

Parameter	Type	Required	Default	Use
$name	string	yes		The name of the image map.

Examples

Usage:

$I = new \HAPEL\Builder\Imagemap();

$I->setImg('my-image.jpg', 200, 100, 'My Photo');
$I->addArea('rect', '0,0,100,100', 'page1.html');
$I->addArea('rect', '101,0,200,100', 'page2.html');

echo $I->get('imgmap');

Result:

<img src="my-image.jpg" alt="My Photo" width="200", height="100" usemap="#imgmap"/>
<map name="imgmap">
    <area shape="rect" coords="0,0,100,100" href="page1.html" />
    <area shape="rect" coords="101,0,200,100" href="page2.html" />
</map>