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

Posted on 2009-04-22
Medium Priority
Last Modified: 2013-12-17

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.


<%@ 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) {
    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.ContentType = "image/Jpeg";
    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;

Open in new window

Question by:Eamon
  • 3
  • 3

Expert Comment

ID: 24203350
Why not load the second image (png with transparancy would be good) into a div with a z-order higher that the div the main image is in. you can position the top div using coordinates based on the top and left position on the main div relative to the page

Expert Comment

ID: 24203370
addition, you get the relative position by tracking the mouse position on the page using javascript, loads of script around that will give you that for all main browsers (bear in mind, using the png in IE6 on a dynamic layer/div with look bad, and you cant use the microsoft IE png fix because it only works on images within divs with position:absolute)

Author Comment

ID: 24205628
I wonder could I use an ImageMap control.
Free recovery tool for Microsoft Active Directory

Veeam Explorer for Microsoft Active Directory provides fast and reliable object-level recovery for Active Directory from a single-pass, agentless backup or storage snapshot — without the need to restore an entire virtual machine or use third-party tools.


Accepted Solution

bhermer earned 2000 total points
ID: 24212829
not sure why that would help? at best is would be a very course grid, putting a div layerr over the top with a transparent png file is a perfectly valid thing to do.

Your other option is to use flash, not the best option for interacting with a database ;)

Author Comment

ID: 24221070
I have created a custom usercontrol which contains a Imagebutton and a panel. I dynamically load the usercontrol into a div with the z-index higher than the main div.  

I have added attributes to the imagebutton on the usercontrol for onmouseover and onclick. On the mouseover i display the panel for the current image.


Author Closing Comment

ID: 31573157
Thanks for the heads up on the div layers.

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
Are you ready to place your question in front of subject-matter experts for more timely responses? With the release of Priority Question, Premium Members, Team Accounts and Qualified Experts can now identify the emergent level of their issue, signal…
Is your OST file inaccessible, Need to transfer OST file from one computer to another? Want to convert OST file to PST? If the answer to any of the above question is yes, then look no further. With the help of Stellar OST to PST Converter, you can e…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question