<!doctype html>
<html>
<head>
</head>
<script>
function OnLoad(){
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var Links = new Array();
var href = "";
ctx.fillStyle = "#0000ff"; // link color - blue
ctx.font = "16px Tahoma"; // link font and size
ctx.textBaseline = "top"; // start point text rendering text - left top
function drawLink(x,y,href,title)
{
var linkTitle = title,
linkX = x,
linkY = y,
linkWidth = ctx.measureText(linkTitle).width,
linkHeight = parseInt(ctx.font);
ctx.fillText(linkTitle, linkX, linkY); // Draw link
// Underline the link
ctx.beginPath();
ctx.moveTo(linkX, linkY + linkHeight);
ctx.lineTo(linkX + linkWidth, linkY + linkHeight);
ctx.lineWidth = 1;
ctx.strokeStyle = "#0000ff";
ctx.stroke();
// Add mouse events
canvas.addEventListener("mousemove", on_mousemove, false);
canvas.addEventListener("click", on_click, false);
// Add link Links() to array
Links.push(x + ";" + y + ";" + linkWidth + ";" + linkHeight + ";" + href);
}
function on_mousemove(event)
{
var x, y;
if (event.layerX || ev.layerX == 0) {
x = event.layerX;
y = event.layerY;
}
// Link hover
for (var i = Links.length - 1; i >= 0; i--)
{
var params = new Array();
params = Links[i].split(";");
var linkX = parseInt(params[0]) + 6,
linkY = parseInt(params[1]) + 5,
linkWidth = parseInt(params[2]),
linkHeight = parseInt(params[3]),
linkHref = params[4];
if (x >= linkX && x <= (linkX + linkWidth) &&
y >= linkY && y <= (linkY + linkHeight))
{
document.body.style.cursor = "pointer";
href = linkHref;
break;
}
else
{
document.body.style.cursor = "";
href = "";
}
};
}
function on_click(event)
{
if (href){
window.open(href); // _blank
//window.location = href; // _self
}
}
drawLink(100, 100, "http://www.seek4info.com/", "Just Search");
}
</script> </head>
<body onload="OnLoad();">
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #eee;">
Canvas is not supported in this browser!
</canvas>
</body>
</html>
