"99901임태형"의 두 판 사이의 차이

jongchon
이동: 둘러보기, 검색
(→‎설명)
2번째 줄: 2번째 줄:
 
* 이 페이지까지 들어왔으면 거의 다 됐습니다.
 
* 이 페이지까지 들어왔으면 거의 다 됐습니다.
 
* 일단 자신의 주소에 들어가면 바로 편집페이지가 나올텐데, 당황하지 말고 파일올리기를 통해 올라간 Html 주소를 링크시킵니다.
 
* 일단 자신의 주소에 들어가면 바로 편집페이지가 나올텐데, 당황하지 말고 파일올리기를 통해 올라간 Html 주소를 링크시킵니다.
 +
 +
==만들어진txt파일을 복사하여 붙여넣기하면 이렇게 됩니다==
 +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 +
<html>
 +
    <head>
 +
    <title>Simple Ontology Visualization</title>
 +
    <style>
 +
      body {font: 10pt 함초롬바탕;}
 +
      p {font: 12pt 맑은 고딕; text-align: center;}
 +
      table {border: 0; width: 100%;}
 +
      tr:nth-child(even){background-color: #efefef;}
 +
    </style>
 +
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 +
    <script type="text/javascript" src="../network/network.js"></script>
 +
    <script type="text/javascript">
 +
      var nodesTable = null;
 +
      var linksTable = null;
 +
      var network = null;
 +
 +
      google.load('visualization', '1');
 +
      google.setOnLoadCallback(draw);
 +
 +
      function draw() {
 +
 +
        nodesTable = new google.visualization.DataTable();
 +
        nodesTable.addColumn('string', 'id');
 +
        nodesTable.addColumn('string', 'group');
 +
        nodesTable.addColumn('string', 'text');
 +
        nodesTable.addColumn('string', 'title');
 +
        nodesTable.addColumn('string', 'style');
 +
        nodesTable.addColumn('string', 'image');
 +
        nodesTable.addColumn('string', 'url');
 +
 +
        nodesTable.addRow(['00000', 'dummy', '', '', '', '', '']);
 +
        nodesTable.addRow(['10005', '남자_image', '김효지', '<a href="http://kadhlab102.com" target="_blank">김효지</a>', 'image', 'man.gif', 'http://kadhlab102.com']);
 +
        nodesTable.addRow(['10006', '남자', '김회', '<a href="http://kadhlab102.com" target="_blank"><img src="man.gif"/></a>', '', 'man.gif', 'http://kadhlab102.com']);
 +
        nodesTable.addRow(['10010', '남자', '김효로', '<a href="http://kadhlab102.com" target="_blank"><img src="man.gif"/></a>', '', 'man.gif', 'http://kadhlab102.com']);
 +
        nodesTable.addRow(['10011', '남자', '김연', '<a href="http://kadhlab102.com" target="_blank">김연</a>', '', 'http://digerati.aks.ac.kr/VR/style/noimage.png', 'http://kadhlab102.com']);
 +
        nodesTable.addRow(['10012', '남자', '김수', '김수', '', 'http://digerati.aks.ac.kr/VR/style/noimage.png', '']);
 +
        nodesTable.addRow(['50063', '사위', '김우', '<a href="http://kadhlab102.com" target="_blank"><img src="sonInLaw.gif"/></a>', '', 'sonInLaw.gif', 'http://kadhlab102.com']);
 +
        nodesTable.addRow(['50064', '사위', '금재', '<a href="http://kadhlab102.com" target="_blank"><img src="sonInLaw.gif"/></a>', '', 'sonInLaw.gif', 'http://kadhlab102.com']);
 +
        nodesTable.addRow(['20037', '부인_image', '김효로 처 이씨', '<a href="http://kadhlab102.com" target="_blank">김효로_처_이씨</a>', 'image', 'wife.gif', 'http://kadhlab102.com']);
 +
        nodesTable.addRow(['20039', '부인_image', '김연 처 조씨', '<a href="http://kadhlab102.com" target="_blank">김연_처_조씨</a>', 'image', 'wife.gif', 'http://kadhlab102.com']);
 +
        nodesTable.addRow(['20040', '부인_image', '김수 처 김씨', '<a href="http://kadhlab102.com" target="_blank">김수_처_김씨</a>', 'image', 'wife.gif', 'http://kadhlab102.com']);
 +
        nodesTable.addRow(['40049', '딸', '김효로 1녀', '<a href="http://kadhlab102.com" target="_blank"><img src="daughter.gif"/></a>', '', 'daughter.gif', 'http://kadhlab102.com']);
 +
        nodesTable.addRow(['40050', '딸', '김효로 2녀', '<a href="http://kadhlab102.com" target="_blank"><img src="daughter.gif"/></a>', '', 'daughter.gif', 'http://kadhlab102.com']);
 +
 +
        linksTable = new google.visualization.DataTable();
 +
        linksTable.addColumn('string', 'from');
 +
        linksTable.addColumn('string', 'to');
 +
        linksTable.addColumn('string', 'color');
 +
        linksTable.addColumn('string', 'style');
 +
        linksTable.addColumn('string', 'title');
 +
 +
        linksTable.addRow(['10005', '10010', 'cyan', 'arrow', 'hasSuccessor']);
 +
        linksTable.addRow(['10006', '10010', 'navy', 'arrow', 'hasSon']);
 +
        linksTable.addRow(['10010', '10011', 'navy', 'arrow', 'hasSon']);
 +
        linksTable.addRow(['10010', '10012', 'navy', 'arrow', 'hasSon']);
 +
        linksTable.addRow(['10010', '20037', 'pink', 'arrow', 'hasWife']);
 +
        linksTable.addRow(['10011', '20039', 'pink', 'arrow', 'hasWife']);
 +
        linksTable.addRow(['10012', '20040', 'pink', 'arrow', 'hasWife']);
 +
        linksTable.addRow(['10010', '40049', 'brown', 'arrow', 'hasDaughter']);
 +
        linksTable.addRow(['10010', '40050', 'brown', 'arrow', 'hasDaughter']);
 +
        linksTable.addRow(['50063', '40049', 'pink', 'arrow', 'hasWife']);
 +
        linksTable.addRow(['50064', '40050', 'pink', 'arrow', 'hasWife']);
 +
 +
        var options = {
 +
            'width': '100',  'height': '440px',  'stabilize': false,  'selectable': true,
 +
            'links': { 'length': 150,  'width': 1, }, 
 +
            'nodes': {  'fontFace': '함초롬바탕', 'fontSize': 15, 'backgroundColor': 'white',  'highlightColor': 'gold',  'fontColor': 'black', },
 +
            'groups': {
 +
                '남자': { 'borderColor': 'red',  'style': 'rect', 'radius': 15 },
 +
                '부인': { 'borderColor': 'blue',  'style': 'circle', 'radius': 15 },
 +
                '딸': { 'borderColor': 'green',  'style': 'rect', 'radius': 15 },
 +
                '사위': { 'borderColor': 'purple',  'style': 'rect', 'radius': 15 },
 +
                'dummy': { 'borderColor': 'white',  'style': 'dot', 'radius': 1 },
 +
            },
 +
        };
 +
 +
      network = new links.Network(document.getElementById('mynetwork'));
 +
      network.draw(nodesTable, linksTable, options);
 +
 +
      network = new links.Network(document.getElementById('mynetwork'));
 +
      google.visualization.events.addListener(network, 'select', onselect);
 +
      network.draw(nodesTable, linksTable, options);
 +
      var selection = [{'row': 0}];
 +
      network.setSelection(selection);
 +
 +
      }
 +
 +
function onselect() {
 +
        var sel = network.getSelection();
 +
        var nodeName = nodesTable.getValue(sel[0].row, 2);
 +
        var image = nodesTable.getValue(sel[0].row, 5);
 +
        var refurl = nodesTable.getValue(sel[0].row, 6);
 +
document.getElementById('info').innerHTML = '';
 +
document.getElementById('info').innerHTML += '<p><a href="' + refurl + '"><img height="100" src="' + image + '"><br/>' + nodeName + '</a></p>';
 +
}
 +
 +
    </script>
 +
</head>
 +
 +
<body>
 +
 +
    <h1 style="text-align: center;">광산김씨 족보</h1>
 +
    <h2 style="text-align: center;">오천가 김효로 중심의 인물들</h2>
 +
 +
    <table>
 +
<tr height="440"><td><div id="mynetwork"></div></td></tr>
 +
<tr height="160"><td><div id="info"></div></td></tr>
 +
    </table>
 +
 +
</body>
 +
</html>

2017년 5월 22일 (월) 19:55 판

설명

  • 이 페이지까지 들어왔으면 거의 다 됐습니다.
  • 일단 자신의 주소에 들어가면 바로 편집페이지가 나올텐데, 당황하지 말고 파일올리기를 통해 올라간 Html 주소를 링크시킵니다.

만들어진txt파일을 복사하여 붙여넣기하면 이렇게 됩니다

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Simple Ontology Visualization

광산김씨 족보

오천가 김효로 중심의 인물들

원본 주소 "http://dh.aks.ac.kr/~jongchon/wiki/index.php?title=99901임태형&oldid=18"