Making a tool to select mapped area coordinates from an image in VB.NET

//This tool will allow you to set an image on the pagee and select areas to be mapped. There is a textbox input for setting the mapped area to link to a another location. Each to the Make Link button is pressed, a Session variable concatenates a string for each link/mapped area. You can then use the Session var anywhere else in your project to build your image map areas. The code-behind is setup to receive a return url but it is undefined. You can easily adapt the code-behind to any language you prefer, PHP/RUBY/C# etc. as there is not that much to convert


//Here is the .aspx page for the builder. You need to download JCrop //from and extract it into your sandbox

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="mySSI_buildImageMap.aspx.vb" Inherits="mySSI_buildImageMap" %>

<!DOCTYPE html>

<html xmlns="">
<head runat="server">
<title>SSI Build Image Link Builder</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

<script src="script/JCrop/js/jquery.min.js"></script>
<script src="script/JCrop/js/jquery.Jcrop.js"></script>
<script type="text/javascript">

jQuery(function ($) {

var jcrop_api;

onChange: showCoords,
onSelect: showCoords,
onRelease: clearCoords
}, function () {
jcrop_api = this;

$('#coords').on('change', 'input', function (e) {
var x1 = $('#x1').val(),
x2 = $('#x2').val(),
y1 = $('#y1').val(),
y2 = $('#y2').val();
jcrop_api.setSelect([x1, y1, x2, y2]);


// Simple event handler, called from onChange and onSelect
// event handlers, as per the Jcrop invocation above
function showCoords(c) {

function clearCoords() {
$('#coords input').val('');
<script type="text/javascript">
function appendLink() {
var existingLinks = document.getElementById("links").innerHTML;
var x1 = document.getElementById("x1").value;
var y1 = document.getElementById("y1").value;
var x2 = document.getElementById("x2").value;
var y2 = document.getElementById("y2").value;
var w = document.getElementById("w").value;
var h = document.getElementById("h").value;
var txtBxLinkToHref = document.getElementById("txtBxLinkToHref").value;
var link;
link = existingLinks + 'area shape="rect" coords="' + x1 + "," + y1 + "," + x2 + "," + y2 + '" href="' + txtBxLinkToHref + '" alt="link"|'
document.getElementById("links").innerHTML = link
document.getElementById("x1").value = "";
document.getElementById("y1").value = "";
document.getElementById("x2").value = "";
document.getElementById("y2").value = "";
document.getElementById("w").value = "";
document.getElementById("h").value = "";
document.getElementById("txtBxLinkToHref").value = "";
<!-- This is the image we're attaching Jcrop to -->
<%--<img src="script/JCrop/demos/demo_files/sago.jpg" />--%>
<asp:Image class="map" ID="ImgTarget" runat="server" alt="target image" usemap="Map" />
<map name="Map" id="Map">
<asp:Literal ID="litMapAreas" runat="server"></asp:Literal>
<!-- This is the form that our event handler fills -->
<form id="coords" class="coords" runat="server"> <!--onsubmit="return false;" action=""-->
<div class="inline-labels">
<label>X1 coordinate <asp:TextBox ID="x1" size="4" runat="server"></asp:TextBox></label>
<label>Y1 coordinate <asp:TextBox ID="y1" size="4" runat="server"></asp:TextBox></label>
<label>X2 coordinate <asp:TextBox ID="x2" size="4" runat="server"></asp:TextBox></label>
<label>Y2 coordinate <asp:TextBox ID="y2" size="4" runat="server"></asp:TextBox></label>
<label>Width <asp:TextBox ID="w" size="4" runat="server"></asp:TextBox></label>
<label>Height <asp:TextBox ID="h" size="4" runat="server"></asp:TextBox></label><!--<input type="text" size="4" id="h" name="h" />-->
<br />
<asp:Label ID="labelLink" runat="server" Text="Link this area to: (insert URL)"></asp:Label>
<asp:TextBox ID="txtBxLinkToHref" runat="server" Width="300"></asp:TextBox>
<br />
<br />
<%--<input type="button" name="makeLink" value="Make Link Javascript Type" onclick="appendLink();" />--%>
<asp:Button ID="btnMakeLink" runat="server" Text="Make Link" />
<br />
<br />
<br />
<asp:Button ID="btnFinish" runat="server" Text="Finished" OnClick="btnSubmitLink_Click"/>
<span id="links" runat="server"></span>


//Here is the code behind for the page. It uses a session variable to build a string with the mapped //area coordinates and the href link for each selected area of a picture

Imports System.Net
Imports System.IO
Imports System.Xml
Imports System.Collections.Generic
Imports System.Data
Imports ExpandIT

Partial Class BuildImageMap
Inherits System.Web.UI.Page
Dim returl As String = ""
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
'this page takes a returl and ImgPath var in url
Dim imgPath As String = ""
Dim LinkArray As Array
Dim LinkTagsString As String = ""
imgPath = Request("ImgPath")
ImgTarget.ImageUrl = ""
returl = Request("returl")
If Session("links") <> "" Then
'make array from session links with delimiter |
LinkArray = Split(Session("links"), "|")
'ubound grabs the the counted elements of the array, no dimension specified so defaulted to first i.e Ubound(ArrayName, [,Dimension])
For x = 0 To UBound(LinkArray) - 1
'append the string with proper tags
LinkTagsString = LinkTagsString & "<" & LinkArray(x) & " style='outline: #00FF00 dotted thick;' />"
'set the mapped areas using the literal
litMapAreas.Text = LinkTagsString
End If
End Sub

Protected Sub btnSubmitLink_Click(sender As Object, e As EventArgs) Handles btnFinish.Click
Dim linksMade As String = ""
linksMade = Session("links")
Session("links") = ""
End Sub

Protected Sub btnMakeLink_Click(sender As Object, e As EventArgs) Handles btnMakeLink.Click
Dim theLink As String = ""
theLink = "area shape='rect' coords='" & x1.Text & "," & y1.Text & "," & x2.Text & "," & y2.Text & "' href='" & txtBxLinkToHref.Text & "' alt='link'|"
Dim existingLinks As String = Session("links")
existingLinks = existingLinks & theLink
Session.Add("links", existingLinks)
Response.Redirect("mySSI_buildImageMap.aspx?returl=" & returl)
End Sub
End Class


Tags: responsive image map, tools
Last update:
2015-04-08 16:49
Average rating:0 (0 Votes)

You cannot comment on this entry

Chuck Norris has counted to infinity. Twice.

Records in this category