• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 422
  • Last Modified:

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.
0
silterra
Asked:
silterra
  • 2
  • 2
1 Solution
 
ozymandiasCommented:
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
 
silterraAuthor Commented:
Hi ozymandias,

Thanks for your feedback, let me try it out.

0
 
silterraAuthor Commented:
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
 
ozymandiasCommented:
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now