Link to home
Start Free TrialLog in
Avatar of silterra
silterraFlag for Malaysia

asked on

Drawing image and add hyperlink into the image

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.
Avatar of ozymandias
ozymandias
Flag of United Kingdom of Great Britain and Northern Ireland image

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
      }
}
Avatar of silterra

ASKER

Hi ozymandias,

Thanks for your feedback, let me try it out.

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.
ASKER CERTIFIED SOLUTION
Avatar of ozymandias
ozymandias
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial