1

(image1) を (image2) に変更し、チェックボックスをオンにするとすぐに (image1) に戻る JavaScript を探しています。

チェックボックスをオンにすると画像を入れ替え、チェックボックスをオフにすると元の画像に戻るコードがあります。しかし、チェックしたときに画像を変更して元の画像に戻したいのです。誰でも助けることができますか？

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function changePic(){
if (document.form1.check.checked){
document.picture.src="Images/industry_mrt.jpg";
document.picture.src="Images/industry_ps.jpg";
}

else{
document.picture.src="Images/industry_mrt.jpg";
}}
</script>
</head>

<body>
<img src="Images/industry_ps.jpg" id="picture" name="picture"> 
<form name="form1" method="post" action="">
<input type="checkbox" name="check" value="checkbox" onClick="changePic();">
</form>
</body>
</html>
4

1 に答える 1

1

現時点では、コードが望ましい効果を持っていると思います-画像を変更し、チェックボックスをオンにするとすぐに元の画像に戻りますが、これを確認したい場合は、元の画像に戻るのを遅らせる必要があります。

以下を試してください：

<form action="#" method="post">
    <input type="checkbox" onchange="handleChange(this);" />
</form>
<script type="text/javascript">
function handleChange(checkbox)
{
    if(checkbox.checked){
        document.picture.src="Images/industry_mrt.jpg";
        setTimeout(function(){document.picture.src="Images/industry_ps.jpg";}, 2000); // 2 Seconds.

    } else{
        document.picture.src="Images/industry_mrt.jpg";
    }
}
</script>
于 2013-01-15T19:13:19.980 に答える