Image Map

Permalink 1 user found helpful
Is it possible to use an image map in a C5 image block? And if so, how?

View Replies: View Best Answer
mesuva replied on at Permalink Best Answer Reply 1 Attachment
Not easily, no.

I did actually build a quick block for an image map in the past. I've attached it to this post. Unzip the block into your top level /blocks folder and install it via the dashboard.

It's got a few limitations, in particular it only allows you to link up to 5 links, and only links to pages in the site (not external urls). You'll have to manually put in your values as well.
friedmand replied on at Permalink Reply
Thank you! This works perfectly for what I need.
mesuva replied on at Permalink Reply
You're welcome.

It was one of those blocks that solved a problem I had, but I didn't think it was good enough to put on the marketplace. I had a feeling it would come in handy one day, at least for someone!
Job replied on at Permalink Reply
For anyone having trouble with this in when I installed this, links were going a level too low, eg my page was at /, but the block was linking to /category/page.

The fix:

Open controller and replace the getContentAndGenerate() function with this one:

function getContentAndGenerate() {
         $nh = Loader::helper('navigation');
         $c = Page::getCurrentPage();
         $bID = $this->bID;
         $f = $this->getFileObject();
         $fullPath = $f->getPath();
         $relPath = $f->getRelativePath();         
         $size = @getimagesize($fullPath);
         $sizeStr = $size[3];
         $img = "<img usemap=\"#map{$bID}\" border=\"0\" class=\"ccm-image-map\" alt=\"{$this->altText}\" src=\"{$relPath}\" {$sizeStr} /><map name=\"map{$bID}\" id=\"map{$bID}\">";
          if ($this->shape_1 != '' && $this->shape_1 != 'none') {
             $page = Page::getByID($this->page_1);
             $img .=   '<area shape="'.$this->shape_1.'" coords="'.$this->coords_1.'" href="'. $nh->getCollectionURL($page) .'" alt="'. $page->getCollectionName().'" title="'. $page->getCollectionName().'" />';
          if ($this->shape_2 != '' && $this->shape_2 != 'none') {

Essentially all I've done is use the navigation helper for getting links to page rather relying on $cObj->cPath.
abra100pro replied on at Permalink Reply
Doesn't work in, right? I don't see anything to install in the dashboard. Cleared cache several times.
mesuva replied on at Permalink Reply
Just did a test then, installed fine for me in

This is just a custom block, not a full package, so you'd need to unzip it to the top level /blocks folder, then in the Dashboard go to Block Types - /dashboard/blocks/types/ to install it (not the normal package install)
abra100pro replied on at Permalink Reply
Ah, never did that. Thanks.
cool block, just tried it out. :-)
abra100pro replied on at Permalink Reply
A very small input: I added a line in view.php to every Map entry to help people fill out the fields correctly:

<?php echo $form->text('coords_2',$coords_2);?>
<?php echo (' Valid entry: x1,y1,x2,y2');?>

of course it could be much more detailed, but I guess when someone knows what it's about then he only makes mistakes in this step (comma or period, last value with comma or not,...)
WHW1dotCOM replied on at Permalink Reply
I had the same question, but an answer does not seem to exist in the forum. I just implemented it, and here is some info.

Note that the best way is to just insert the Image Map/Hot Spot info via the html. But you could do a combination of html insert and using the Advanced tab if you already have a map indicated within the html.

Once you are in the Edit Mode. Click on the Edit HTML Source button (HTML), and then look for the line that is related to your image that you want the image map/hot spot on.

Add your map and area code there, or just replace that line with what you have prepared already. Example given below.

Once you have done that, you can see the Map name and id show up in the Advanced section of the image editing feature. You would Right Mouse Button click on the image you want the hot spots on or image map on, and choose Edit Image. Then go to the Advanced tab.

A colleague's Example (which is what is most likely going to be used, but maybe with a little fine tuning):

<img id="buynow1" style="float: left; border: 0pt none;" title="Buy Now - Only 4 Cent Per Day." src="./files/7513/3183/4878/Buy-Now2.gif" usemap="#BuyNowMap1" border="0" height="244"
width="166" alt="$1 Web Hosting - Buy Now!" >
<map id="buynow1" name="BuyNowMap1">
<area href="" shape="rect" coords="2, 110, 160, 150">
<area href="" shape="rect" coords="4, 170, 160, 218">

Also, something that drives a lot of people crazy trying to figure out is that those coords are in the X,Y method. So, they are X1,Y1,X2,Y2 identifying the corners for the region of the hot spot.
apicella replied on at Permalink Reply
i agree with WHW1dotCOM, but i am lazy and not a coder at heart. my shortcut for creating the html is to place an image in a new dreamweaver file, use the image map tool to create the links, then copy the html body and map code into a new C5 html box. you will have to swap in the full url for the image as per its file manager properties.

looks like this...
<div class="printart" id="printart">
<img src="" usemap="#Map3" />
<map name="Map3" id="Map3"><area shape="rect" coords="10,30,253,254" href="" />
<area shape="rect" coords="294,75,295,76" href="#" /><area shape="rect" coords="267,11,511,267" href="" />
<area shape="rect" coords="37,260,284,543" href="" />
<area shape="rect" coords="338,273,543,521" href="" />
HenryLach replied on at Permalink Reply
I'm trying to avoid the image map in a content block option because I suspect it'll lose the responsive scaling feature that the image block offers.

Is there any way to create a scalable image map tied to the scaling of the source image?