Solved

Drawing image and add hyperlink into the image

Posted on 2006-11-22
4
391 Views
Last Modified: 2013-12-03
I have a program to draw an image, and within the image itself I need to add some hyperlink into it. For example in the below codes, X, Y & Z will open a new window and link to a file share site, i.e: X link to //fileshare/folder1, Y link to //fileshare/folder2, and Z will link to //fileshare/folder3. My problem here is how to link the X, Y & Z to the related site.

  Bitmap objBitmap;
        Graphics objGraphics;
       
        int XLen = 500;
        int YLen = 500;
        int factor = 27;

        objBitmap = new Bitmap(500, 500);
        objGraphics = Graphics.FromImage(objBitmap);

        objGraphics.Clear(Color.White);

        Pen p = new Pen(Color.Yellow, 0);
        int XRectLen = 520;
        int YRectLen = 520;
        Rectangle rect = new Rectangle(0, 0, XRectLen, YRectLen);

        Rectangle rect1 = new Rectangle(0, 0, 500, 500);
        SolidBrush KhakiBrush = new SolidBrush(Color.Khaki);

        objGraphics.FillEllipse(KhakiBrush, rect1);
       
        FontFamily fontfml = new FontFamily(GenericFontFamilies.Serif);
        Font font = new Font(fontfml, 10);
        SolidBrush brush = new SolidBrush(Color.Blue);

        StringFormat drawFormat = new StringFormat();
        drawFormat.FormatFlags = StringFormatFlags.DirectionVertical;

        objGraphics.DrawString("X", font, brush, 340, 360);
        objGraphics.DrawString("Y", font, brush, 230, 200);
        objGraphics.DrawString("Z", font, brush, 210, 380);
       
        objBitmap.Save(Response.OutputStream, ImageFormat.Gif);
        objBitmap.Save(Server.MapPath("x.jpg"), ImageFormat.Jpeg);
        objBitmap.Dispose();
        objGraphics.Dispose();  


Please help. Thanks.
0
Comment
Question by:silterra
  • 2
  • 2
4 Comments
 
LVL 15

Expert Comment

by:ozymandias
ID: 18003534
You cannot add hyperlinks to an image.
You need to create an Image Map from the image so that when the image is displayed to a user on a web page they can click on the areas in the ikmage that contain the text and go to the hyperlinks.

Here is an example that incorporates your code :

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Text;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace WebImageMap
{
      /// <summary>
      /// Summary description for WebForm1.
      /// </summary>
      public class WebForm1 : System.Web.UI.Page
      {
            private void Page_Load(object sender, System.EventArgs e)
            {
                  System.Web.UI.WebControls.Image myImage = new System.Web.UI.WebControls.Image();
                  myImage.ImageUrl = "x.jpg";
                  myImage.Attributes.Add("usemap","#imagemap1");
                  this.Controls.Add(myImage);

                  HtmlGenericControl map = new HtmlGenericControl("map");
                  map.Attributes.Add("name","imagemap1");
                  Rectangle[] rects = this.MakeImage();
                  foreach(Rectangle rect in rects){
                        HtmlGenericControl area = new HtmlGenericControl("area");
                        area.Attributes.Add("shape","rect");
                        area.Attributes.Add("coords", rect.Left.ToString() + "," + rect.Top.ToString() + "," + (rect.Left + rect.Width).ToString() + "," + (rect.Top + rect.Height).ToString());
                        area.Attributes.Add("href","#");
                        map.Controls.Add(area);
                  }
                  this.Controls.Add(map);
            }


            private Rectangle[] MakeImage(){
                  Bitmap objBitmap;
                  Graphics objGraphics;
       
                  int XLen = 500;
                  int YLen = 500;
                  int factor = 27;
                  Rectangle r1;
                  Rectangle r2;
                  Rectangle r3;

                  objBitmap = new Bitmap(500, 500);
                  objGraphics = Graphics.FromImage(objBitmap);

                  objGraphics.Clear(Color.White);

                  Pen p = new Pen(Color.Yellow, 0);
                  int XRectLen = 520;
                  int YRectLen = 520;
                  Rectangle rect = new Rectangle(0, 0, XRectLen, YRectLen);

                  Rectangle rect1 = new Rectangle(0, 0, 500, 500);
                  SolidBrush KhakiBrush = new SolidBrush(Color.Khaki);

                  objGraphics.FillEllipse(KhakiBrush, rect1);
       
                  FontFamily fontfml = new FontFamily(GenericFontFamilies.Serif);
                  Font font = new Font(fontfml, 10);
                  SolidBrush brush = new SolidBrush(Color.Blue);

                  StringFormat drawFormat = new StringFormat();
                  drawFormat.FormatFlags = StringFormatFlags.DirectionVertical;

                  objGraphics.DrawString("X", font, brush, 340, 360);
                  SizeF textsize = objGraphics.MeasureString("Y", font);
                  r1 = new Rectangle(340, 360, (int)textsize.Width, (int)textsize.Height);
                  textsize = objGraphics.MeasureString("Y", font);
                  objGraphics.DrawString("Y", font, brush, 230, 200);
                  r2 = new Rectangle(230, 200, (int)textsize.Width, (int)textsize.Height);
                  textsize = objGraphics.MeasureString("Z", font);
                  objGraphics.DrawString("Z", font, brush, 210, 380);
                  r3 = new Rectangle(210, 380, (int)textsize.Width, (int)textsize.Height);
       
                  //objBitmap.Save(Response.OutputStream, ImageFormat.Gif);
                  objBitmap.Save(Server.MapPath("x.jpg"), ImageFormat.Jpeg);
                  objBitmap.Dispose();
                  objGraphics.Dispose();  

                  return new Rectangle[]{r1, r2, r3};

            }

            #region Web Form Designer generated code
            override protected void OnInit(EventArgs e)
            {
                  //
                  // CODEGEN: This call is required by the ASP.NET Web Form Designer.
                  //
                  InitializeComponent();
                  base.OnInit(e);
            }
            
            /// <summary>
            /// Required method for Designer support - do not modify
            /// the contents of this method with the code editor.
            /// </summary>
            private void InitializeComponent()
            {    
                  this.Load += new System.EventHandler(this.Page_Load);
            }
            #endregion
      }
}
0
 

Author Comment

by:silterra
ID: 18005504
Hi ozymandias,

Thanks for your feedback, let me try it out.

0
 

Author Comment

by:silterra
ID: 18026360
Hi ozymandias,

Thanks a lot, it's work!!!

But I have a message displayed [object] in the main window after I clicked on the hyperlink, where the hyperlink will open a new browser window. I had changed the code below
      area.Attributes.Add("href","#")
               to
      area.Attributes.Add("href", "javascript:window.open('testX.aspx','Window1','height=550, width=550,status= no, resizable= no, scrollbars=no, toolbar=no,location=no,menubar=no ');");

Advenced thanks for your help.
0
 
LVL 15

Accepted Solution

by:
ozymandias earned 500 total points
ID: 18026739
If you call javascript from the href of an area it seems tp try to valigate to the result of the function.
Even if you return false it causes a problem.
They might be able to help you with this in the HTML Topic Area.
The best I can come up with is this :

-> create a function and call the function from the onClick event of the area.
-> set the href to #
-> when the user clicks on the area they will get the new window and the main window will be refreshed.

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Text;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace WebImageMap
{
      /// <summary>
      /// Summary description for WebForm1.
      /// </summary>
      public class WebForm1 : System.Web.UI.Page
      {
            private void Page_Load(object sender, System.EventArgs e)
            {
                  System.Web.UI.WebControls.Image myImage = new System.Web.UI.WebControls.Image();
                  myImage.ImageUrl = "x.jpg";
                  myImage.Attributes.Add("usemap","#imagemap1");
                  this.Controls.Add(myImage);

                  this.RegisterClientScriptBlock("windowscript", "<script>function OpenTest(){window.open('webform1.aspx','Window1','height=550, width=550,status= no, resizable= no, scrollbars=no, toolbar=no,location=no,menubar=no');return false;}</script>");

                  HtmlGenericControl map = new HtmlGenericControl("map");
                  map.Attributes.Add("name","imagemap1");
                  Rectangle[] rects = this.MakeImage();
                  foreach(Rectangle rect in rects){
                        HtmlGenericControl area = new HtmlGenericControl("area");
                        area.Attributes.Add("shape","rect");
                        area.Attributes.Add("coords", rect.Left.ToString() + "," + rect.Top.ToString() + "," + (rect.Left + rect.Width).ToString() + "," + (rect.Top + rect.Height).ToString());
                        area.Attributes.Add("href", "#");
                        area.Attributes.Add("onClick", "OpenTest();");
                        map.Controls.Add(area);
                  }
                  this.Controls.Add(map);
            }


            private Rectangle[] MakeImage(){
                  Bitmap objBitmap;
                  Graphics objGraphics;
       
                  int XLen = 500;
                  int YLen = 500;
                  int factor = 27;
                  Rectangle r1;
                  Rectangle r2;
                  Rectangle r3;

                  objBitmap = new Bitmap(500, 500);
                  objGraphics = Graphics.FromImage(objBitmap);

                  objGraphics.Clear(Color.White);

                  Pen p = new Pen(Color.Yellow, 0);
                  int XRectLen = 520;
                  int YRectLen = 520;
                  Rectangle rect = new Rectangle(0, 0, XRectLen, YRectLen);

                  Rectangle rect1 = new Rectangle(0, 0, 500, 500);
                  SolidBrush KhakiBrush = new SolidBrush(Color.Khaki);

                  objGraphics.FillEllipse(KhakiBrush, rect1);
       
                  FontFamily fontfml = new FontFamily(GenericFontFamilies.Serif);
                  Font font = new Font(fontfml, 10);
                  SolidBrush brush = new SolidBrush(Color.Blue);

                  StringFormat drawFormat = new StringFormat();
                  drawFormat.FormatFlags = StringFormatFlags.DirectionVertical;

                  objGraphics.DrawString("X", font, brush, 340, 360);
                  SizeF textsize = objGraphics.MeasureString("Y", font);
                  r1 = new Rectangle(340, 360, (int)textsize.Width, (int)textsize.Height);
                  textsize = objGraphics.MeasureString("Y", font);
                  objGraphics.DrawString("Y", font, brush, 230, 200);
                  r2 = new Rectangle(230, 200, (int)textsize.Width, (int)textsize.Height);
                  textsize = objGraphics.MeasureString("Z", font);
                  objGraphics.DrawString("Z", font, brush, 210, 380);
                  r3 = new Rectangle(210, 380, (int)textsize.Width, (int)textsize.Height);
       
                  //objBitmap.Save(Response.OutputStream, ImageFormat.Gif);
                  objBitmap.Save(Server.MapPath("x.jpg"), ImageFormat.Jpeg);
                  objBitmap.Dispose();
                  objGraphics.Dispose();  

                  return new Rectangle[]{r1, r2, r3};

            }

            #region Web Form Designer generated code
            override protected void OnInit(EventArgs e)
            {
                  //
                  // CODEGEN: This call is required by the ASP.NET Web Form Designer.
                  //
                  InitializeComponent();
                  base.OnInit(e);
            }
            
            /// <summary>
            /// Required method for Designer support - do not modify
            /// the contents of this method with the code editor.
            /// </summary>
            private void InitializeComponent()
            {    
                  this.Load += new System.EventHandler(this.Page_Load);
            }
            #endregion
      }
}
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Query datatable in LINQ 6 39
Bubble user-defined Sql RAISERROR(...) to c# exception 14 116
dynamic menu in asp.net c# 11 27
C# TextBox 11 12
Introduction Although it is an old technology, serial ports are still being used by many hardware manufacturers. If you develop applications in C#, Microsoft .NET framework has SerialPort class to communicate with the serial ports.  I needed to…
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…
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…
Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…

706 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

16 Experts available now in Live!

Get 1:1 Help Now