Image Map
Permalink 1 user found helpful
Is it possible to use an image map in a C5 image block? And if so, how?
Thank you! This works perfectly for what I need.
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!
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!
For anyone having trouble with this in 5.5.2.1: when I installed this, links were going a level too low, eg my page was at /site.com/category/page, but the block was linking to /category/page.
The fix:
Open controller and replace the getContentAndGenerate() function with this one:
Essentially all I've done is use the navigation helper for getting links to page rather relying on $cObj->cPath.
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') {
Viewing 15 lines of 33 lines. View entire code block.
Essentially all I've done is use the navigation helper for getting links to page rather relying on $cObj->cPath.
Doesn't work in 5.6.1.2, right? I don't see anything to install in the dashboard. Cleared cache several times.
Just did a test then, installed fine for me in 5.2.1.2.
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)
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)
Ah, never did that. Thanks.
cool block, just tried it out. :-)
cool block, just tried it out. :-)
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,...)
...
<?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,...)
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!"http://www.whw1.com/ >
<map id="buynow1" name="BuyNowMap1">
<area href="http://www.whw1.com/" shape="rect" coords="2, 110, 160, 150">
<area href="http://www.whw1.com/Level2/virtual.shtml" shape="rect" coords="4, 170, 160, 218">
</map>
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.
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!"http://www.whw1.com/ >
<map id="buynow1" name="BuyNowMap1">
<area href="http://www.whw1.com/" shape="rect" coords="2, 110, 160, 150">
<area href="http://www.whw1.com/Level2/virtual.shtml" shape="rect" coords="4, 170, 160, 218">
</map>
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.
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...
looks like this...
<div class="printart" id="printart"> <img src="http://www.mysite.com/files/9013/4246/4625/printHMx_01.png" usemap="#Map3" /> <map name="Map3" id="Map3"><area shape="rect" coords="10,30,253,254" href="http://www.mysite.com/p_bronutra.htm" /> <area shape="rect" coords="294,75,295,76" href="#" /><area shape="rect" coords="267,11,511,267" href="http://www.mysite.com/p.brochure.htm" /> <area shape="rect" coords="37,260,284,543" href="http://www.mysite.com/p.brochure.htm" /> <area shape="rect" coords="338,273,543,521" href="http://www.mysite.com/p.brochure.htm" /> </map> </div>
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?
Tx,
Henry
Is there any way to create a scalable image map tied to the scaling of the source image?
Tx,
Henry
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.