How to load one image on top of another image in Asp.net

Hi,

Basically I'm looking for a way to create the following in ASP.Net... http://www.geometricglobal.com/Corporate/Locations/index.aspx using Asp.Net.

I'm currently wrecking my head on ways around loading images on top of other images in asp.net. I have a main image and I want to place a marker image on top using X and Y coordinates which I pull from a database. When I hover over the marker image I want a popup to appear to the user.
I managed to get the marker images loading using a handler file........see code, but i can figure out how will i get the hover to work.

Also I want to allow the user to click on the main map image and a marker image will appear on the coordinates the user clicked on.

Thanks

<%@ WebHandler Language="C#" Class="MapHandler" %>
 
using System;
using System.Web;
using System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Text;
using System.IO;
using System.Data;
public class MapHandler : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        CreateImage(context);
    }
    private void CreateImage(HttpContext context)
    {
        System.Drawing.Image image = System.Drawing.Image.FromFile(context.Server.MapPath(@"BuildingA_Front.jpg"));
        System.Drawing.Image imgSold = System.Drawing.Image.FromFile(context.Server.MapPath(@"sold_marker.png"));
        
        Graphics _sold = Graphics.FromImage(imgSold);
        Graphics g = Graphics.FromImage(image);
        Pen p = new Pen(Color.Red);
       // please create rectangle according to the position whith their data from database.
        int x = 0;
        int y = 0;
        foreach (DataRow dr in GetTable().Rows)
        {
            
            x = (dr[0] == null) ? 0 : int.Parse(dr[0].ToString());
            y = (dr[1] == null) ? 0 : int.Parse(dr[1].ToString());
            Point pt = new Point(x,y);
            //Rectangle r = new Rectangle(x, y, 8, 8);
            //Brush b = new System.Drawing.SolidBrush(Color.Red);
            g.DrawImage(imgSold, pt);
            //g.FillEllipse(b, r);
        }
 
        System.IO.MemoryStream ms = new System.IO.MemoryStream();
        image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
        context.Response.ClearContent();
        context.Response.ContentType = "image/Jpeg";
        context.Response.BinaryWrite(ms.ToArray());
        g.Dispose();
        image.Dispose();
    }
    DataTable GetTable()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add(new DataColumn("P_X", typeof(float)));
        dt.Columns.Add(new DataColumn("P_Y", typeof(float)));
        //dt.Rows.Add(10, 50);
        dt.Rows.Add(80, 100);
        //dt.Rows.Add(150, 80);
        return dt;
    }
    public bool IsReusable {
        get {
            return false;
        }
    }
 
}

Select allOpen in new window

conditional-marker.png
floor-plan-thumb.jpg