2013-04-17 25 views
0

我如何使用HTML <a href> -Tag將Zend表單中的圖像元素包圍起來?我特別不想要JS onClick() - 事件,因爲它似乎不能在我的情況下正常工作(請參閱問題Zend: Redirect from form without validation)。Zend窗體:如何用超鏈接包圍圖像元素?

這是我如何添加圖像元素的表單中,現在的超級鏈接顯示爲文本「鏈接」旁邊的形象:

$this->addElement('image', 'btnBack', array (
     'name' => 'btnBack', 
     'id' => 'btnBack', 
     'label' => '', 
     'title' => 'Go back', 
     'alt' => 'Go back', 
     'src' => '/img/undo.png' 
    )); 
    $this->getElement('btnBack') 
      ->setDescription('<a href="/admin/groupoverview">Link</a>') 
      ->setDecorators(array(
       'ViewHelper', 
       array('Description', array('escape' => false, 'tag' => false)), 
       array('HtmlTag', array('tag' => 'dd')), 
       array('Label', array('tag' => 'dt')), 
       'Errors', 
      )); 

回答

1

這聽起來像一個壞主意。從你的另一個問題的角度來看,你想要的只是一個圖像「按鈕」,它轉到特定的URL。您不應該嘗試使用圖像輸入來完成此操作,因爲這是一種提交按鈕,因此單擊它即可提交表單。如果您試圖用JavaScript重寫此文件,或者用HTML鏈接包裝整個文件,那麼您試圖解決錯誤的問題。

最簡單的方法可能是使用按鈕輸入。然後,您可以使用CSS對其進行設計,使其看起來像一個圖像,並添加您的javascript onclick動作,使其按照您的需要進行操作。由於輸入類型=「按鈕」元素默認情況下不會執行任何操作,因此您不應該遇到以前遇到的任何問題。

$this->addElement('button', 'btnBack', array(
    'id' => 'btnBack', 
    'label' => 'Go back', 
    'onclick' => "window.location='/admin/groupoverview'" 
)); 

然後在樣式表中(取代的寬度和高度與正確的圖象尺寸):

#btnBack { 
    background-image: url(/img/undo.png); 
    width: 123px; 
    height: 123px; 
    border: 0; 
    text-indent: -1000px; 
    cursor: pointer; 
} 

文本縮進移動的文本標籤移出視野。如果你絕對不想在你的樣式表中使用這些規則,你可以通過傳遞樣式屬性來將它們嵌入到表單元素中。

+0

非常感謝!這似乎比我在其他問題中發佈的'解決方案'更清晰,檢查是否設置了按下圖像的_x座標 – Daniel