<html> <head> <title>Network | Selected/Unselected Image</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"> body { font: 10pt arial; } #mynetwork { width: 600px; height: 600px; border: 1px solid lightgray; } </style> </head> <body> <div id="mynetwork"></div> <script type="text/javascript"> // create an array with nodes var nodes = new vis.DataSet([{ id: 1, shape: 'image', size: 20, label: 'No select image', image: './unselected.svg', }, { id: 2, shape: 'image', size: 20, label: 'Select image broken', image: { unselected: './unselected.svg', selected: './BROKEN_LINK/selected.svg', }, }, { id: 3, shape: 'image', size: 20, label: 'Select works!', image: { unselected: './unselected.svg', selected: './selected.svg', }, shapeProperties: { borderDashes: [15, 5], interpolation: false, } }]); // create an array with edges var edges = new vis.DataSet([ {from: 1, to: 2}, {from: 2, to: 3}, ]); // create a network var container = document.getElementById('mynetwork'); // provide the data in the vis format var data = { nodes: nodes, edges: edges }; var options = { layout:{ randomSeed: 5 }, nodes: { brokenImage: './broken-image.png', } }; // initialize! var network = new vis.Network(container, data, options); </script> </body> </html>