圖片按鈕元件

這個元件不適用於 AMP HTML 廣告、影片廣告和圖像廣告。

圖片按鈕元件是一種能顯示三種型態的按鈕：

• 上方圖片 - 使用者尚未與按鈕互動時的預設圖片
• 覆蓋圖片 - 使用者的游標懸停在按鈕上時顯示的圖片
• 下方圖片 - 使用者點選按鈕後顯示的圖片

您可以運用這個元件來建立能給予視覺效果回應的按鈕，只要指定三張圖片即可。

如何在專案中使用圖片按鈕元件：

1. 依序開啟「元件」面板及「互動」資料夾。
2. 將「圖片按鈕」元件 拖曳至中心區域。
3. 在「屬性」面板的「圖片按鈕」屬性部分中，輸入上方圖片、覆蓋圖片和下方圖片的網址。如果圖片來源檔案位於本機，請按一下欄位中的「瀏覽」 按鈕，選取您電腦中的圖片。

屬性

屬性	說明
名稱	元件名稱。
上方圖片	按鈕在未按下狀態時所顯示圖片的網址，可參照外部網址 (https://www.google.com/example.jpg) 或資源庫中的素材資源 (「assets/example.jpg」)。可繫結至動態資料。
覆蓋圖片	按鈕在滑鼠游標懸停狀態時所顯示圖片的網址，可參照外部網址 (https://www.google.com/example.jpg) 或資源庫中的素材資源 (「assets/example.jpg」)。可繫結至動態資料。
下方圖片	按鈕在已按下狀態時所顯示圖片的網址，可參照外部網址 (「https://www.google.com/example.jpg」) 或資源庫中的素材資源 (「assets/example.jpg」)。可繫結至動態資料。
背景	在圖片小於元件區域時，顯示在圖片下一層的顏色。可繫結至動態資料。
對齊	圖片在元件中的對齊方式： center bottom bottom left bottom right left right top top left top right
縮放	如何顯示與元件尺寸不同的圖片： 配合畫格尺寸調整圖片大小 - 將圖片放大至元件區域可容納的最大尺寸，但不裁剪或延展圖片。 裁剪圖片以填滿畫格 - 裁剪圖片的高度或寬度，將圖片放大至填滿元件區域，但不延展圖片。 無 延展圖片以填滿畫格 - 延展圖片以填滿整個元件區域。
已停用	停用按鈕 (預設為不勾選)。

事件和動作

圖片按鈕元件傳送的事件

您可以透過下列圖片按鈕元件事件觸發其他動作：

事件	說明
圖片按鈕已載入	所有圖片按鈕均已載入後傳送。

如要在「事件」對話方塊中選取以上任一事件，請將圖片按鈕元件設為「目標」。

圖片按鈕元件執行的動作

以下圖片按鈕元件動作可透過其他事件觸發：

動作	設定選項
Toggle enable	無
Set images	Up image source - 新上方圖片的網址。 Over image source - 新覆蓋圖片的網址。 Down image source - 新下方圖片的網址。

在「事件」對話方塊中選取以上任一動作時，請將圖片按鈕元件設為「接收端」。

瞭解如何設定事件。

預覽

您無法在 Google Web Designer 介面中預覽這個元件。如要查看元件的實際運作情形，您可以按一下右上角的「預覽」按鈕 ，在自己慣用的瀏覽器中預覽文件。