圖像映射區域與javascript引用表單值

我試圖創建一個圖像映射，充當向上/向下的增量/減法控制。圖像是一個簡單的16x16 png文件，其中兩個三角形（一個指向上，另一個指向下），其上半部分爲UP（增量），下半部爲DOWN（遞減）。圖像映射區域與javascript引用表單值

下面的代碼說明了我使用映射區域的href引用表單值時遇到的麻煩。我很疑惑爲什麼對alert函數的調用工作正常，而使用表單值實際遞增/遞減的代碼失敗。我打算實施的實際代碼會有更多的複雜性，但在深入之前，我需要超越這個障礙或改變方法。

因此，我想知道這種方法是否確實可行，以及是否可能只是我的場景中缺少的一點東西，或者如果這可能是一種錯誤的嘗試，可能會以另一種方式更好地完成。當涉及到客戶端編程時，我也會承認我的相對新手地位（好像它不是很明顯），並且提前感謝所有人的溫柔和建設性的指導。

<html> 
<head> 
    <title>ImageMap Test</title> 
</head> 
<body> 
    <form> 
    <fieldset> 
    <legend>ImageMap area href for javascript works for alerts:</legend> 
    <input type='text' name='foo1_filter' size='25' value='123' /> 
    <img src='../img/arrow_up-down.png' title='Up-Down' usemap='#foo1' /> 
    <map name='foo1'> 
    <area shape='rect' coords='0,0,15,7' href='javascript:alert("UP");' /> 
    <area shape='rect' coords='8,0,15,15' href='javascript:alert("DOWN");' /> 
    </map> 
    </fieldset> 
    </form> 
    <p /> 
    <form> 
    <fieldset> 
    <legend>ImageMap area href for javascript does not work when referencing form values:</legend> 
    <input type='text' name='foo2_filter' size='25' value='123' /> 
    <img src='../img/arrow_up-down.png' title='Up-Down' usemap='#foo2' /> 
    <map name='foo2'> 
    <area shape='rect' coords='0,0,15,7' href='javascript:this.form.foo2_filter.value++;' /> 
    <area shape='rect' coords='8,0,15,15' href='javascript:this.form.foo2_filter.value--;' /> 
    </map> 
    </fieldset> 
    </form> 
</body> 
</html>

來源

2012-11-03 Lars

非常感謝安德烈爲他們的建議的圖像映射的底部和kmb385。因此，現在一切都按預期工作。我會很快發佈完成的代碼（我的新手狀態需要等待8小時）。我做出的改變是： 1.明確提及了表單名稱 2.設置href ='＃' 3.將javascript動作放入onclick – Lars

我認爲錯誤是在區域元素中使用this.form。該.FORM屬性只能點擊/使用表單元素時使用，輸入等，字段等嘗試做如下：

添加一個名稱形式，例如：my_form
改變「這個.FORM」到「document.my_form」

喜歡的東西

<form name="my_form"> 
    <fieldset> 
    <legend>ImageMap area href for javascript does not work when referencing form values:</legend> 
    <input type='text' name='foo2_filter' size='25' value='123' /> 
    <img src='../img/arrow_up-down.png' title='Up-Down' usemap='#foo2' /> 
    <map name='foo2'> 
     <area shape='rect' coords='0,0,15,7' href='javascript:document.my_form.foo2_filter.value++;' /> 
     <area shape='rect' coords='8,0,15,15' href='javascript:document.my_form.foo2_filter.value--;' /> 
    </map> 
    </fieldset> 
</form>

問候

來源

2012-11-03 18:43:41 Andrea

減少的值是否重要從未分配給DOM元素的值屬性？ –

其實它是; JavaScript的解析字段和遞增/遞減的值它：FOO ++等於富= FOO + 1 – Andrea

的遞增/遞減值被用作搜索過濾器，並且表單提交時的值被作爲參數傳送到另一個顯示搜索結果的頁面。我看到它最初編碼的錯誤，並且現在它可以正常工作。謝謝！ – Lars

有幾個問題：

DOM元素通過Javascript無法正常訪問。
新值永遠不會分配給DOM元素。
Javascript是內聯的。注*這更多是一個標準問題。

嘗試設置值，如下所示：

<area shape='rect' coords='0,0,15,7' href='javascript:document.forms[0].elements["foo2_filter"].value = --document.forms[0].elements["foo2_filter"].value;' />

有幾件事情需要注意有關該代碼。

使用--前綴遞減運算符，以便在賦值之前減小該值。
運算符=用於將DOM元素的value屬性賦值爲遞減值。

看看這個網頁約的形式引用DOM元素： http://www.javascript-coder.com/javascript-form/javascript-get-form.phtml

來源

2012-11-03 18:46:26

<form name="fooForm2"> 
    <fieldset> 
    <legend>ImageMap area href for javascript referencing form values:</legend> 
    <input type='text' name='foo2_filter' size='25' value='123' /> 
    <img src='../img/arrow_up-down.png' title='Up-Down' usemap='#foo2' /> 
    <map name='foo2'> 
     <area shape='rect' coords='0,0,15,7' href='#' onclick='javascript:document.fooForm2.foo2_filter.value++; return false' /> 
     <area shape='rect' coords='0,8,15,15' href='#' onclick='javascript:document.fooForm2.foo2_filter.value--; return false' /> 
    </map> 
    </fieldset> 
</form>

感謝Andrea和kmb385了他們的建議。因此，現在一切都按預期工作。我做得到它的工作的變化是：

作出了明確提到窗體名稱
集HREF =「＃」
把JavaScript操作到一個onclick
使用適當的DOM元件引用
固定區域COORDS爲

來源

2012-11-04 02:33:36 Lars

圖像映射區域與javascript引用表單值

回答

相關問題