visjs-network
Version:
A dynamic, browser-based network visualization library.
75 lines (74 loc) • 2.87 kB
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 src='./index.js' type='text/javascript'></script>
</body>
</html>