1

重複の可能性:
jquery で img src を変更する

タイトルからすると簡単に聞こえるかもしれませんが、おそらくそうです。しかし、私はjsの信じられないほど小さな知識で、それが信じられないほど神経質になっていることに気づきました...基本的に、フォームに設定された写真（img1 img2とimg3としましょう）があり、ユーザーが画像をクリックできるようにして、たとえば、img1 をクリックすると、img1a になります。など、コードは次のとおりです。

<form>
<p align="center">
<input type="checkbox" name="interest1" id="interest1" value="x">
<input type="checkbox" name="interest2" id="interest2" value="x">
<input type="checkbox" name="interest3" id="interest3" value="x"></p>   
<p align="center">
<label for="interest1" id="label-interest1"><img src="/images/img1.jpg" width="781" height="800" /></label>
<label for="interest2" id="label-interest2"><img src="/images/img2.jpg" width="781" height="800" /></label>
<label for="interest3" id="label-interest3"><img src="/images/img3.jpg" width="781" height="800" /></label></P><!-- code making checkbox be an image-->
</form>

現在チェックボックスがありますが、それらは非表示になるため、実際に選択されていることをユーザーに示すためにクリック時に画像を変更する必要があります。

4

2 に答える 2

0

必ずしも別の画像を使用する必要はありません。既存の画像を区別することができます。

CSS クラスを使用します。

<head>
    <style>
        .selected {
            outline: solid 2px blue;
        }
    </style>
</head>
<body>
    <img class="selected" src="http://bugzilla.mozilla.org/extensions/BMO/web/images/mozchomp.gif" />
</body>

javascript を使用して、className を "selected" に変更してハイライト効果を得るか、"" (何もない、空) に変更して選択を解除します。

(またはインライン CSS スタイル属性を使用style="outline: solid 2px blue")

于 2012-12-18T21:31:48.637 に答える
0

画像タグに onclick イベントを追加し、そこに JavaScript を追加して画像ソースを変更します。

<script type="text/javascript">
function func()
{
    var img1= document.getElementById("img1");

    if(img1.name == "on")
    {
        img1.src = "/images/" + "img1a.jpg";
        img1.name = "off";
    }
    else
    {
        img1.src = "/images/" + "img1.jpg";
        img1.name = "on";
    }
}
</script>

<img src="/images/img1.jpg" width="781" height="800" onclick="func()" id="img1" name="on" />
于 2012-12-18T21:27:29.190 に答える