Solved

Drawing image and add hyperlink into the image

Posted on 2006-11-22
4
398 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

U.S. Department of Agriculture and Acronis Access

With the new era of mobile computing, smartphones and tablets, wireless communications and cloud services, the USDA sought to take advantage of a mobilized workforce and the blurring lines between personal and corporate computing resources.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: Najam
Having new technologies does not mean they will completely replace old components.  Recently I had to create WCF that will be called by VB6 component.  Here I will describe what steps one should follow while doing so, please feel free to post any qu…
Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
This Micro Tutorial will teach you how to censor certain areas of your screen. The example in this video will show a little boy's face being blurred. This will be demonstrated using Adobe Premiere Pro CS6.
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…

770 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