Adding hotspots to ImageMap and detecting mouseclicks

[jediknight]

Hi All,

I am very new to ASP.NET but have used c# for windows very much.

I would like to display an imagemap which has the background as the map
of a city centre and icons denoting important landmarks.
I would like to have some hotspots on these icons so when the user
clicks on them, I can show a little window with some information on it
about that site.

I have been able to create a imagemap with a map of a city centre and
drawn using GDI some icons.

I need to be able to create some hotspots around these icons.

Can someone please help me???

Here is the code I have so far



protected void Page_Load(object sender, EventArgs e)
{
Bitmap Bmp;
Graphics Gfx;
Font Fnt;

DoDatabaseInitialisation();

Rectangle boundingRect = new Rectangle(0, 0, 50, 50);
string filename;

//path to an image/* type of file
filename = (@"C:\Images\city_map.bmp");
Bmp = new Bitmap(filename);
Gfx = Graphics.FromImage(Bmp);

for (int i = 0; i < drawIconObjs.Count; i++)
{
DrawIconObject iconObj = (DrawIconObject)drawIconObjs;
iconObj.Draw(Gfx);
}

Bmp.Save(Response.OutputStream,
System.Drawing.Imaging.ImageFormat.Jpeg);
}



My icon draw method looks like this



public void Draw(Graphics g)
{
Font font = new Font("Verdana", 7, FontStyle.Bold);
StringFormat sf = new StringFormat();
sf.LineAlignment = StringAlignment.Center;
sf.Alignment = StringAlignment.Center;

LinearGradientBrush myLinearGradientBrush = new
LinearGradientBrush(
boundingRect,
Color.AliceBlue,
Color.Silver,
LinearGradientMode.ForwardDiagonal);

g.FillRectangle(myLinearGradientBrush, boundingRect);

Rectangle rc = boundingRect;
rc.Inflate(-1, -1);

g.DrawRectangle(new Pen(SystemColors.Highlight), rc);

int rowHeight = rc.Height / 2;
int x1 = rc.X;
int y1 = rc.Y + 1;
int x2 = rc.Width;
int y2 = rc.Y + 1;

System.Drawing.Image img =
imgs.Images[ImageIndexFromStatus(cpObject.Status)];
g.DrawImage(img, x1, y1, img.Width, rowHeight - 1);

string sCount = cpObject.CurrentCount.ToString() + "/" +
cpObject.TotalSpaces.ToString();
int strWidth1 = (int)g.MeasureString(sCount, font).Width;
if (strWidth1 > 48)
boundingRect.Width = strWidth1 + 5;
else
boundingRect.Width = 50;

x1 = rc.X;
y1 = rc.Y + (rowHeight * 1) + 1;
x2 = rc.Width;
y2 = rc.Y + (rowHeight * 1) + 1;

g.DrawString(sCount, font, new SolidBrush(Color.Black), x1, y1);

g.DrawLine(Pens.Black, rc.X, rc.Y, cp.MapXPosition,
cp.MapYPosition);
}

 

[Guest]

A few ideas ...

- My first technology choice here would be Adobe Flash, which excels at
pixel-precise compositing of multiple elements, asynchronous loading of
external data such as XML, and the kind of UI tricks you're going to want to
do.

- If you're determined not to go the route of Flash/Actionscript, a
server-bound graphics component will ease some of the pain of rendering the
dots in the places you want them. You could use a collection of coordinates
and an imagemap and some Javascript (e.g. the "overlib" script) to render
your popups.

Actionscript would make this all so much easier, since it would all be built
up on the client side from data. I would write an ImageDot Actionscript
class that encapsulated the data and behaviors required.

Good luck. If you do this all in .NET/GDI+, I'd love to see your finished
code as a learning thing.

-KF

Hi All,

I am very new to ASP.NET but have used c# for windows very much.

I would like to display an imagemap which has the background as the map
of a city centre and icons denoting important landmarks.
I would like to have some hotspots on these icons so when the user
clicks on them, I can show a little window with some information on it
about that site.

I have been able to create a imagemap with a map of a city centre and
drawn using GDI some icons.

I need to be able to create some hotspots around these icons.

Can someone please help me???

Here is the code I have so far



protected void Page_Load(object sender, EventArgs e)
{
Bitmap Bmp;
Graphics Gfx;
Font Fnt;

DoDatabaseInitialisation();

Rectangle boundingRect = new Rectangle(0, 0, 50, 50);
string filename;

//path to an image/* type of file
filename = (@"C:\Images\city_map.bmp");
Bmp = new Bitmap(filename);
Gfx = Graphics.FromImage(Bmp);

for (int i = 0; i < drawIconObjs.Count; i++)
{
DrawIconObject iconObj = (DrawIconObject)drawIconObjs;
iconObj.Draw(Gfx);
}

Bmp.Save(Response.OutputStream,
System.Drawing.Imaging.ImageFormat.Jpeg);
}



My icon draw method looks like this



public void Draw(Graphics g)
{
Font font = new Font("Verdana", 7, FontStyle.Bold);
StringFormat sf = new StringFormat();
sf.LineAlignment = StringAlignment.Center;
sf.Alignment = StringAlignment.Center;

LinearGradientBrush myLinearGradientBrush = new
LinearGradientBrush(
boundingRect,
Color.AliceBlue,
Color.Silver,
LinearGradientMode.ForwardDiagonal);

g.FillRectangle(myLinearGradientBrush, boundingRect);

Rectangle rc = boundingRect;
rc.Inflate(-1, -1);

g.DrawRectangle(new Pen(SystemColors.Highlight), rc);

int rowHeight = rc.Height / 2;
int x1 = rc.X;
int y1 = rc.Y + 1;
int x2 = rc.Width;
int y2 = rc.Y + 1;

System.Drawing.Image img =
imgs.Images[ImageIndexFromStatus(cpObject.Status)];
g.DrawImage(img, x1, y1, img.Width, rowHeight - 1);

string sCount = cpObject.CurrentCount.ToString() + "/" +
cpObject.TotalSpaces.ToString();
int strWidth1 = (int)g.MeasureString(sCount, font).Width;
if (strWidth1 > 48)
boundingRect.Width = strWidth1 + 5;
else
boundingRect.Width = 50;

x1 = rc.X;
y1 = rc.Y + (rowHeight * 1) + 1;
x2 = rc.Width;
y2 = rc.Y + (rowHeight * 1) + 1;

g.DrawString(sCount, font, new SolidBrush(Color.Black), x1, y1);

g.DrawLine(Pens.Black, rc.X, rc.Y, cp.MapXPosition,
cp.MapYPosition);
}