how to set a fixed image map hotspot point?

Question

In the web-based application developed by ASP.NET with C#, an image sent to all users with a hyperlink embedded inside it in a specific area (hotspot). I could be able to send the email and to map the image with the link. The problem now is when I use another screen with different size, the hotspot went to another place. I want it to be fixed. So how to do that?

I used the following to map the image:

 body += "<map id ='clickMap' name='clickMap'> " +
                     "<area shape ='rect' coords ='752,394,1394,491' href ='http://pmv/pssp/StartQuiz.aspx?testid=" + quizid + "' alt='Quiz' /></map>";

My C# Mail Function:

protected void Page_Load(object sender, EventArgs e)
    {
        Send();
    }


    protected void SendEmail(string toAddresses, string fromAddress, string MailSubject, string MessageBody, bool isBodyHtml, AlternateView av)
    {
        SmtpClient sc = new SmtpClient("MAIL Server");
        try
        {
            MailMessage msg = new MailMessage();
            msg.From = new MailAddress("Test@MAILServer.com", "Test");


            msg.Bcc.Add(toAddresses);
            msg.Subject = MailSubject;
            msg.Body = MessageBody;
            msg.IsBodyHtml = isBodyHtml;
            msg.AlternateViews.Add(av);
            sc.Send(msg);
        }
        catch (Exception ex)
        {
            throw ex;
        }

    }

    protected void Send()
    {
        string connString = "Data Source=localhost\\sqlexpress;Initial Catalog=Test;Integrated Security=True";

        using (SqlConnection conn = new SqlConnection(connString))
        {
            var sbEmailAddresses = new System.Text.StringBuilder(2000);
            string quizid = "";

            // Open DB connection.
            conn.Open();

            string cmdText = "SELECT MIN (QuizID) As mQuizID FROM dbo.QUIZ WHERE IsSent <> 1";
            using (SqlCommand cmd = new SqlCommand(cmdText, conn))
            {
                SqlDataReader reader = cmd.ExecuteReader();
                if (reader != null)
                {
                    while (reader.Read())
                    {
                        // There is only 1 column, so just retrieve it using the ordinal position
                        quizid = reader["mQuizID"].ToString();

                    }
                }
                reader.Close();
            }

            string cmdText2 = "SELECT Username FROM dbo.employee";
            using (SqlCommand cmd = new SqlCommand(cmdText2, conn))
            {
                SqlDataReader reader = cmd.ExecuteReader();
                if (reader != null)
                {
                    while (reader.Read())
                    {
                        var sName = reader.GetString(0);
                        if (!string.IsNullOrEmpty(sName))
                        {
                            if (sbEmailAddresses.Length != 0)
                            {
                                sbEmailAddresses.Append(",");
                            }
                            // Just use the ordinal position for the user name since there is only 1 column
                            sbEmailAddresses.Append(sName).Append("@MailServer.com");
                        }
                    }
                }
                reader.Close();
            }

            string cmdText3 = "UPDATE dbo.Quiz SET IsSent = 1 WHERE QuizId = @QuizID";
            using (SqlCommand cmd = new SqlCommand(cmdText3, conn))
            {
                // Add the parameter to the command
                var oParameter = cmd.Parameters.Add("@QuizID", SqlDbType.Int);

                var sEMailAddresses = sbEmailAddresses.ToString();
                string link = "<a href='http://localhost/StartQuiz.aspx?testid=" + quizid + "'> Click here to participate </a>";
                string body = @"Good day, <br /><br />
                                <b> Please participate</b>"
                                    + link +
                                    @"<br /><br /> <h1>Picture</h1><br/><img src='cid:image1' usemap ='#clickMap' alt='Click HERE'>";


                body += "<map id ='clickMap' name='clickMap'> " +
                     "<area shape ='rect' coords ='752,394,1394,491' href ='http://localhost/StartQuiz.aspx?testid=" + quizid + "' alt='Quiz' /></map>";



            }
            conn.Close();
        }
    }

Answer 1

Specify the image size with WIDTH and HEIGHT, then supply coordinates within that constraint.

For the sake of an example, I will assume your original image size is 1600 X 1200 pixels. The hotspot, using your coordinates, is coords ='752,394,1394,491' in pixels. If you specify width=1600 and height=1200 on the 'img' tag, then the hotspot should alway be where you want it.

But if you need to specify a different size, maybe you want it to be 800 x 600, you would scale your coordinates accordingly...

int orig_width = 1600;
int orig_height = 1200;
int design_width = 800;
int design_height = design_width * orig_height / orig_width; // keeps aspect ratio, or just use 600

int coord_x1 = design_width * 752 / orig_width;
int coord_y1 = design_height * 394 / orig_height;
int coord_x2 = design_width * 1394 / orig_width;
int coord_y2 = design_height * 491 / orig_height;

...
string body = @"Good day, <br /><br />   
    <b> Please participate in the new short safety quiz </b>"   
    + link +   
    @"<br /><br /> <h1>Picture</h1><br/><img width='"
    + design_width +
    "' height='"
    + design_height +
    @"' src='cid:image1' usemap ='#clickMap' alt='Click HERE'>";   

// ...

body += "<map id ='clickMap' name='clickMap'> " +   
      "<area shape ='rect' coords ='"
      + coord_x1 + "," + coord_y1 + "," + coord_x2 + "," + coord_y2 +
      "' href ='http://localhost/StartQuiz.aspx?testid="
      + quizid + "' alt='Quiz' /></map>";