如何设置固定图像地图热点点？

Question

在ASP.NET开发的基于Web的应用程序中，使用C＃将发送给所有用户的图像与超链接嵌入到特定区域（热点）中。我可以发送电子邮件并用链接映射图像。现在的问题是，当我使用另一个大小不同的屏幕时，热点会转到另一个地方。我希望它被修复。 那么该怎么做？

我用下面的图像映射：

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>"; 

我的C＃邮件功能：

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

指定宽度和高度图像的大小，则该限制范围内提供的坐标。

为了举例，我将假定您的原始图像大小为1600 X 1200像素。热点，使用你的坐标，像素为coords ='752,394,1394,491'。如果你在'img'标签上指定width = 1600和height = 1200，那么热点应该总是在你想要的地方。

但是如果你需要指定不同的大小，也许你希望它是800×600，你会相应地扩展你的坐标......

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>";