<!doctype html>
<html>
<head>
<title>Network | Cursor Change</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<p>Here is a simple network with nodes and edges that demonstrates how to change the cursor on hover for nodes and edges.</p>
<p>Use the dropdowns and button below to change the cursor type bound to an event.</p>
<div>
Event Type -
<select id="eventType">
<option value="hoverNode">hoverNode</option>
<option value="blurNode">blurNode</option>
<option value="hoverEdge">hoverEdge</option>
<option value="blurEdge">blurEdge</option>
<option value="dragStart">dragStart</option>
<option value="dragging">dragging</option>
<option value="dragEnd">dragEnd</option>
</select>
Cursor Type -
<select id="cursorType">
<option value="auto">auto</option>
<option value="default">default</option>
<option value="context-menu">context-menu</option>
<option value="help">help</option>
<option value="pointer">pointer</option>
<option value="progress">progress</option>
<option value="wait">wait</option>
<option value="cell">cell</option>
<option value="crosshair">crosshair</option>
<option value="text">text</option>
<option value="vertical-text">vertical-text</option>
<option value="alias">alias</option>
<option value="copy">copy</option>
<option value="move">move</option>
<option value="no-drop">no-drop</option>
<option value="not-allowed">not-allowed</option>
<option value="all-scroll">all-scroll</option>
<option value="col-resize">col-resize</option>
<option value="row-resize">row-resize</option>
<option value="n-resize">n-resize</option>
<option value="e-resize">e-resize</option>
<option value="w-resize">w-resize</option>
<option value="s-resize">s-resize</option>
<option value="ne-resize">ne-resize</option>
<option value="nw-resize">nw-resize</option>
<option value="se-resize">se-resize</option>
<option value="sw-resize">sw-resize</option>
<option value="ew-resize">ew-resize</option>
<option value="ns-resize">ns-resize</option>
<option value="nesw-resize">nesw-resize</option>
<option value="nwse-resize">nwse-resize</option>
<option value="zoom-in">zoom-in</option>
<option value="zoom-out">zoom-out</option>
<option value="grab">grab</option>
<option value="grabbing">grabbing</option>
</select>
<button onClick="changeEventCursor(document.getElementById('eventType').value,document.getElementById('cursorType').value);">Change Cursor for Event</button>
</div>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {interaction:{hover:true}};
var network = new vis.Network(container, data, options);
//Get the canvas HTML element
var networkCanvas = document.getElementById("mynetwork").getElementsByTagName("canvas")[0]
function changeCursor(newCursorStyle){
networkCanvas.style.cursor = newCursorStyle;
}
function changeEventCursor(eventName,cursorType){
network.on(eventName, function() {
changeCursor(cursorType);
});
}
network.on('hoverNode', function () {
changeCursor('grab');
});
network.on('blurNode', function () {
changeCursor('default');
});
network.on('hoverEdge', function () {
changeCursor('grab');
});
network.on('blurEdge', function () {
changeCursor('default');
});
network.on('dragStart', function () {
changeCursor('grabbing');
});
network.on('dragging', function () {
changeCursor('grabbing');
});
network.on('dragEnd', function () {
changeCursor('grab');
});
</script>
</body>
</html>