How to load one image on top of another image in

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

Basically I'm looking for a way to create the following in ASP.Net... using Asp.Net.

I'm currently wrecking my head on ways around loading images on top of other images in 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
    LVL 4

    Expert Comment

    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
    LVL 4

    Expert Comment

    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)
    LVL 1

    Author Comment

    I wonder could I use an ImageMap control.
    LVL 4

    Accepted Solution

    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 ;)
    LVL 1

    Author Comment

    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.

    LVL 1

    Author Closing Comment

    Thanks for the heads up on the div layers.

    Featured Post

    Do You Know the 4 Main Threat Actor Types?

    Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

    Join & Write a Comment

    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…
    Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
    In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
    Get a first impression of how PRTG looks and learn how it works.   This video is a short introduction to PRTG, as an initial overview or as a quick start for new PRTG users.

    745 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

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now