-1

I hope that someone can help me. i would like to add some buttons with differents links on one image. I would like to catch button events.

I'm really interested in code examples to do that. Thanks a lot.

4

3 回答 3

0

一种方法是更改​​您正在使用的主题

这是一个例子:

var image = '<a xlink:href="http://www.GetOrgChart.com/">';   
image += '<text width="330" x="3" y="20">click me</text>';
image += '</a>';

getOrgChart.themes.annabel.image += image;

$("#people").getOrgChart({
    theme: "annabel",
    primaryColumns: ["Name", "Link"],
    dataSource: [
        { id: 1, parentId: null, Name: "Amber McKenzie"},
        { id: 2, parentId: 1, Name: "Ava Field", Image: "http://www.getorgchart.com/GetOrgChart/getorgchart-1.1-demos/images/d-6.jpg"},
        { id: 3, parentId: 1, Name: "Evie Johnson"}]
});

JSFIDDLE中尝试

于 2014-04-06T22:14:06.743 回答
0

您要查找的内容称为图像映射

这是一个例子

<!DOCTYPE html>
<html>
<body>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="http://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

</body>
</html>
于 2014-11-13T21:25:50.413 回答
0

如果您想在单击时知道框的 Id,可以使用renderBoxContentEvent事件

这是一个例子:

$("#people").getOrgChart({  
    renderBoxContentEvent: function( sender, args ) {
        if (args.id == 2)
            args.boxContentElements.push('<a xlink:href="javascript: alert(' + args.id + ')"><text width="330" x="20" y="100">click me</text></a>');
    },
    dataSource: [
        { id: 1, parentId: null, Name: "Amber McKenzie", Title: "CEO", Address: "MyAddress"},
        { id: 2, parentId: 1, Name: "Ava Field", Title: "CTO", Phone: "+359 888 888 888"},
        { id: 3, parentId: 1, Name: "Evie Johnson", Title: "CFO", Car: "BMW"}]
});

在 JSFIDDLE 中尝试

请注意,您必须下载新版本 GetOrgChart v 1.2

于 2014-04-08T19:23:47.610 回答