getorgchart庫：我怎麼能把圖片上的按鈕/鏈接

-1

我希望有人能幫助我。我想在一張圖片上添加一些帶有不同鏈接的按鈕。我想抓住按鈕事件。getorgchart庫：我怎麼能把圖片上的按鈕/鏈接

我真的很感興趣的代碼示例來做到這一點。非常感謝。

2014-04-06 user3502514

你在看什麼被稱爲圖像地圖看看http://www.w3schools.com/tags/tag_map.asp – MZaragoza

一個辦法是改變你使用

這裏的主題是一個例子：

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-06 22:14:06

謝謝，但如何我可以在您的示例中的「點擊我」行爲中獲得「Ava Field」的Id（id = 2）嗎？ – user3502514

如果你想知道盒子時的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"}] 
});

Try in JSFIDDLE

請注意，您必須下載新版本GetOrgChart 1.2

來源

2014-04-08 19:23:47

什麼你正在尋找被稱爲圖像映射

這裏是一個例子

<!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-13 21:25:50 MZaragoza

getorgchart庫：我怎麼能把圖片上的按鈕/鏈接

回答

相關問題