1. Launch G Web Development Software and navigate
File >> New >> Project. This will create an a new project. Save the project in any desired location.
2. Download the zip folder in the attachment below and unzip it to get the content files.
3. Right click on
WebApp.gcomp to import the content files. The files will be copied to the Web Application document folder.
4. Click
Edit HTML Source to load the HTML code for WebVI front panel.
5. Replace the existing HTML code for the WebVI front panel with snippet code below. Then, click
OK to load the modified HTML code and observe the changes done on the WebVI front panel.
<ni-front-panel control-resize-mode='fixed' layout='absolute' ni-control-id='2'>
<h2> Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
</ni-front-panel>
6. Click
Run in browser to run the WebVI.
7. The WebVI will run automatically on a new internet browser tab. Hover the mouse over the image on the WebVI and click on area where the mouse cursor changes its shape.