【html】E-mail超連結

許多Blog都會設置一個類似"連絡站長"的按鈕，方便讀者寄信給站長，而其語法也非常的簡單。既然稱做E-mail超連結，型式當然也就是html的<a href>標籤，不過加了一些些的更改。

當然，許多具有Email服務的平台都有提供這個超連結的產生(如:Gmail)，不過相對代價就是Email圖片超連結上肯定有該Email服務平台的字樣，所以就由個人去取決嚕。

 

今天講解的E-mail超連結一共分四種型式，分別為"文字按鈕、圖片按鈕、文字、圖片"。

其中按鈕就是html的button標籤，而文字與圖片超連結相信大家都再熟悉不過了。

(更多有關button按鈕可參閱:【html】按鈕應用)

1.文字E-mail超連結

語法:

<a href="mailto:欲寄往的E-mail網址">超連結文字</a>

解說:

這是一個很典型的文字E-mail超連結，能在文字部分多做修飾。

(文字效果請參閱:【html】文字各式效果)

範例:

<a href="mailto:jasonkkk@kimo.com"><font color="red"><u>連絡站長</font></u></a>

連絡站長

2.圖片E-mail超連結

語法:

<a href="mailto:欲寄往的E-mail網址"><img src="圖片網址"/></a>

解說:

與文字E-mail超連結大同小異，不過是以圖片方式做為超連結。

範例:

<a href="mailto:jasonkkk@kimo.com"><img src="http://e.blog.xuite.net/e/1/e/1/23417172/blog_1953880/txt/38723379/0.gif"/></a>

3.文字按鈕E-mail超連結

語法:

<input type="button" value="按鈕文字" onclick="self.location.href='mailto:欲寄往的E-mail網址'>

解說:

與文字E-mail超連結頗為相似，但是以按鈕方式呈現，一樣能做按鈕的修飾。

(按鈕效果請參閱:【html】按鈕應用)

範例:

<input type="button" value="連絡站長" onclick="self.location.href='mailto:jasonkkk@kimo.com';"style=width:100px;height:40px;color:#0200A0>

3.圖片按鈕E-mail超連結

語法: 

<button onclick="self.location.href='mailto:欲寄往的E-mail網址'"><img src= "圖片網址"></button>

解說:

只是將文字按鈕E-mail超連結改為圖片方式呈現，一樣能做按鈕的修飾。

(按鈕效果請參閱:【html】按鈕應用)

範例:

<button onclick="self.location.href='mailto:jasonkkk@kimo.com';"style=width:130px;height:40px"><img src="http://e.blog.xuite.net/e/1/e/1/23417172/blog_1953880/txt/38723379/0.gif"></button>