我正在创建表单页面,我想在单击图像时隐藏文本区域框以及交换图像,反之亦然。现在我可以隐藏/显示div但是当隐藏文本区域框时图像不会显示,也不会返回到第一个图像。有两个脚本,一个用于div show / hide,另一个用于交换图像。
1. image: output before click
2. image: after hitting on an image
<script>
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
} else {
obj.style.display = "none";
}
}
}
var onImg= "testim.png, valm.png";
var offImg= "testip.png, valp.png";
</script>
<div style="margin-top: 10px; text-align: center;">
<ul id="text_type_tab" name="text_type_tab">
<li id="PR_TEXT_TAB" class="tab_active"> <a href="javascript:showhide('textInputField1');"><img src="testim.png" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);" align="middle"/></li></a>
</ul>
</div>
<table id="hidden_content" width="80%" align="center" style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px">
<tr>
<td colspan="2">
<textarea id="textInputField1" name="textInputField1" style="resize:vertical; width: 900px;" rows="15" cols="105" wrap="pre" onblur="onTextSubmitFunction('Apply')"></textarea>
</td>
</tr>
</table>
Please help.
Thanks a lot, in advance!
[1]: http://i.stack.imgur.com/7PwdK.png
[2]: http://i.stack.imgur.com/5j6FE.png
答案 0 :(得分:1)
指针1
将以下变量更改为图像的绝对链接
var onImg= "testim.png, valm.png"; //this should be one link
var offImg= "testip.png, valp.png"; //this should be one link
(只是为了测试测试的安全性)
例如
var onImg= "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSHrNNGyEGlgXtd5u4fq1eQ18z8TMXHCZqf_4zI9yz6uo7N8KeXuFVRr-tR";
var offImg= "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR8x25Dihzxt-pilDC6-SAVJ8JEVB4VItyjJhRFFuAGNFPx5YBbR5rQST01";
<小时/> 指针2
变化
<li id="PR_TEXT_TAB" class="tab_active"> <a href="javascript:showhide('textInputField1');"><img src="testim.png" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);" align="middle"/></li></a>
</ul>
到这个
<li id="PR_TEXT_TAB" class="tab_active"> <a href="javascript:showhide('textInputField1');"><img src="testim.png" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);" align="middle"/></a></li>
</ul>
它应该是</a></li>
而不是</li></a>
指针3
更改此
<a href="javascript:showhide('textInputField1');">
到这个
<a href="#" onclick="javascript:showhide('textInputField1')">
将其直接附加到onclick事件,因为href属性只是指向一个位置。
这是一个片段
- <script>
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
obj.style.display == "none"?obj.style.display = "":obj.style.display = "none";
// if (obj.style.display == "none"){
// obj.style.display = "":;
// }
//else {
// obj.style.display = "none";
//}
}
}
var onImg= "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSHrNNGyEGlgXtd5u4fq1eQ18z8TMXHCZqf_4zI9yz6uo7N8KeXuFVRr-tR";
var offImg= "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR8x25Dihzxt-pilDC6-SAVJ8JEVB4VItyjJhRFFuAGNFPx5YBbR5rQST01";
</script>
<div style="margin-top: 10px; text-align: center;">
<ul id="text_type_tab" name="text_type_tab">
<li id="PR_TEXT_TAB" class="tab_active"> <a href="#" onclick="javascript:showhide('textInputField1')"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR8x25Dihzxt-pilDC6-SAVJ8JEVB4VItyjJhRFFuAGNFPx5YBbR5rQST01" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);" align="middle"/></a></li>
</ul>
</div>
<table id="hidden_content" width="80%" align="center" style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px">
<tr>
<td colspan="2">
<textarea id="textInputField1" name="textInputField1" style="resize:vertical; width: 900px;" rows="15" cols="105" wrap="pre" onblur="onTextSubmitFunction('Apply')"></textarea>
</td>
</tr>
</table>