Forums | Mahara Community

Support /
How to embedd an ImageMap?


Conrad Lienhardt's profile picture
Posts: 127

18 July 2012, 17:12

Hi

I tried to embed an ImageMap (hmtl, jpg) but dit not succeed.
There is /lib/pear/Image/Canvas/ImageMap.php but I don't know how to get this working.

I used the html block to embed the html code after I uploaded both (html, jpg). I set the path to jpg in the html code to the absolute path of the jpg - but this did not solve the problem. It seems that the code itself is censored.

I appreciate any help.

Thanks and Kind Regards
Conrad

PS: I am using 1.5.1; for getting the ImageMap I use yEd Graph Editor

Kristina Hoeppner's profile picture
Posts: 4717

18 July 2012, 19:53

Hello Conrad,

Mhh. Good question. The dashboard image in the primary school theme is an image map. Maybe that gives you some clues of how to get an image map into your own Mahara. However, I suspect that the dashboard image and content in a text box works quite differently.

Did you check the HTML code if something was stripped out of your image map?

Cheers

Kristina

Conrad Lienhardt's profile picture
Posts: 127

19 July 2012, 4:46

Hello Kristina,

thanks for your reply. I couldn't see the dashboard image in the primary school theme. But as you mentioned I share your doubt, that content in a text box works similar.

The html code looks like this:

<html>
<head><title>Image map created by yEd</title>
<style type="text/css">
.tooltip {
  font-size:10pt;
  background-color:#FFFFCC;
  border:1px solid black;
  padding:2px
}
</style>
<style type="text/css">
.tooltip {
  position:absolute;
  display:none
}
</style>
</head>
<body>

<script type="text/javascript">
tooltip = null;
document.onmousemove = updateTooltip;
function updateTooltip(e) {
try {
if (document.all) {
if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
x = document.documentElement.scrollLeft + window.event.x;
y = document.documentElement.scrollTop + window.event.y;
}
else { // all other Explorers
x = document.body.scrollLeft + window.event.x;
y = document.body.scrollTop + window.event.y;
}
}
else {
x = e.pageX;
y = e.pageY;
}
if (tooltip != null) {
o = 20;
var sx, sy;
if (self.pageYOffset) { // all except Explorer
sx = self.pageXOffset;
sy = self.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
sx = document.documentElement.scrollLeft;
sy = document.documentElement.scrollTop;
}
else if (document.body) { // all other Explorers
sx = document.body.scrollLeft;
sy = document.body.scrollTop;
}
t = y + o + tooltip.offsetHeight;
w = sy + document.body.clientHeight;
if (t > w) {
y = y - o - tooltip.offsetHeight;
}
else {
y = y + o;
}
t = x + o + tooltip.offsetWidth;
w = sx + document.body.clientWidth;
if (t > w) {
x = x - o - tooltip.offsetWidth;
}
else {
x = x + o;
}
if ((tooltip.style.top == '' || tooltip.style.top == 0) && (tooltip.style.left == '' || tooltip.style.left == 0))
{
tooltip.style.width = tooltip.offsetWidth + 'px';
tooltip.style.height = tooltip.offsetHeight + 'px';
}
tooltip.style.left = x + "px";
tooltip.style.top = y + "px";
}
} catch (error) { error = null; }
}
function showTooltip(id) {
try {
tooltip = document.getElementById(id);
tooltip.style.display = "block";
} catch (error) { error = null; }
}
function hideTooltip() {
try {
tooltip.style.display = "none";
} catch (error) { error = null; }
}
</script>

<div class="tooltip" id="n0">Block 1<br>Exxxx</div>
<div class="tooltip" id="n1">Hier geht's zu mir</div>
<div class="tooltip" id="n2">Syllabus</div>
<div class="tooltip" id="n3">Portfolio Mahara</div>
<div class="tooltip" id="n4">Medias in res</div>
<div class="tooltip" id="n5">Einarbeitung</div>
<div class="tooltip" id="n6">Zwischen <br>Block 1 & 2</div>
<div class="tooltip" id="n7">Recherche Thema</div>
<div class="tooltip" id="n8">ePortfolio</div>
<div class="tooltip" id="n9">Joomla</div>
<div class="tooltip" id="n10">Gruppenbildung</div>

<map name="image1_1">
  <area shape="rect" coords="445,79,481,115" alt="" onmouseout="hideTooltip()" onmouseover="showTooltip('n10')"/>
  <area shape="rect" coords="280,236,375,260" alt="" onmouseout="hideTooltip()" onmouseover="showTooltip('n9')"/>
  <area shape="rect" coords="280,200,375,224" alt="" onmouseout="hideTooltip()" onmouseover="showTooltip('n8')"/>
  <area shape="rect" coords="280,164,375,188" alt="" onmouseout="hideTooltip()" onmouseover="showTooltip('n7')"/>
  <area shape="rect" coords="46,164,118,188" alt="" onmouseout="hideTooltip()" onmouseover="showTooltip('n6')"/>
  <area shape="rect" coords="153,164,242,188" alt="" onmouseout="hideTooltip()" onmouseover="showTooltip('n5')"/>
  <area shape="rect" coords="280,85,375,109" alt="" onmouseout="hideTooltip()" onmouseover="showTooltip('n4')"/>
  <area shape="rect" coords="280,47,375,71" alt="" onmouseout="hideTooltip()" onmouseover="showTooltip('n3')"/>
  <area shape="rect" coords="280,9,375,33" alt="" onmouseout="hideTooltip()" onmouseover="showTooltip('n2')"/>
  <area shape="rect" coords="153,47,242,71" href="http://www.xxxx[anonymized]" alt="" target="_blank" onmouseout="hideTooltip()" onmouseover="showTooltip('n1')"/>
  <area shape="rect" coords="9,46,65,72" alt="" onmouseout="hideTooltip()" onmouseover="showTooltip('n0')"/>
</map>


    <table class="yimagetable" cellspacing="0" cellpadding="0" border="0">
      <tr>
        <td><img class="yimage" src="Aufriss1_1.png" usemap="#image1_1" border="0" alt=""/></td>
      </tr>
    </table>
</body>
</html>

 

I have no clue why this doesn't work.

Hope there will be a way or work around.

Thanks, Conrad

19 July 2012, 11:53

Hello,

Mahara prevents the inclusion of html code in forum posts/journal entries/text or html blocs. This is managed by the text filter plugin.

In 1.5 you can edit a file to allow more <iframe> sources than those provided by default. Read the manual about this feature, here (http://manual.mahara.org/en/1.5/site_admin/extensions.html?highlight=purifier), point 8.6.2.2.

In 1.6 you will be able to do this directly from the site admin console.

By the  way, referring to one of your previous questions, the image of the Primary School theme dashbord is here: theme/primaryschool/static/images.

HTH

-dajan

Conrad Lienhardt's profile picture
Posts: 127

19 July 2012, 13:54

Hello,

thank you for your answer.
There is no external application to be integrated by iframe. The html file was uploaded and does only contain a simple javascript - see above.

So I suppose the "text filter plugin" you mentioned or the "html purifier" may be a way to get the javascript running. Unfortunately I don't know how to get this done. I am no coder. Shall I copy out the java script, load it (where?) and call it from the html file?

Both, the html file and the jpg are uploaded into the mahara group file repository.

Kinde Regards,
Conrad

Kristina Hoeppner's profile picture
Posts: 4717

20 July 2012, 8:45

Hello Conrad,

Yes, you are correct that the javascript is stripped out of the text box by HTML purifier. It's a security measure and can only be circumvented by specifically allowing it via a filter. But as non-developer myself I'm afraid I can't help there.

If you have the primary school theme activated but don't see the image, you most likely have the "Homepage information" turned off in your settings. You can get the image back by ticking the "Homepage information" box again: http://manual.mahara.org/en/1.5/account/account_settings.html#general-account-options

Cheers

Kristina

Conrad Lienhardt's profile picture
Posts: 127

23 July 2012, 10:41

Hello Kristina,

thank you; I got the primary school theme activated. Looks pretty.

So; I hope somebody whith development skills reads this and will support me to get the java scripts running.

Thanks and Kind Regards
Conrad

7 results