[英]Change an image using radio buttons
我試圖弄清楚如何使用單選按鈕將圖像更改為其他圖像。 我想使用javascript和html / css來實現這一點,但是我對javascript的了解還不夠。
我知道他在這里還有其他答案,但是它們似乎主要涉及背景/ div和jQuery,但是我對jQuery的了解並不深。
這是我的代碼:
HTML:
<form action="" id="animals">
<input type="radio" id="bunnybutton" name="animal" value="bunny" onClick="changeSrc()">bunny<br>
<input type="radio" id="kittybutton" name="animal" value="kitty" onClick="changeSrc()">kitty
</form>
<img src="https://pbs.twimg.com/profile_images/447374371917922304/P4BzupWu.jpeg" id="picture" width=600px>
JAVASCRIPT:
function changeSrc() {
if (document.getElementById("bunnybutton").checked) {
document.getElementById("picture").src = "https://pbs.twimg.com/profile_images/447374371917922304/P4BzupWu.jpeg";
} else if (document.getElementById("kittybutton").checked) {
document.getElementById("picture").src = "http://cutewallpaperss.com/wp-content/uploads/2015/01/cute_cats__cats_picture_cute_wallpaperss_hd_for_mobile.jpg";
}
}
在代碼編輯器中,您的代碼運行良好!
function changeSrc() { if (document.getElementById("bunnybutton").checked) { document.getElementById("picture").src = "https://pbs.twimg.com/profile_images/447374371917922304/P4BzupWu.jpeg"; } else if (document.getElementById("kittybutton").checked) { document.getElementById("picture").src = "http://cutewallpaperss.com/wp-content/uploads/2015/01/cute_cats__cats_picture_cute_wallpaperss_hd_for_mobile.jpg"; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <form action="" id="animals"> <input type="radio" id="bunnybutton" name="animal" value="bunny" onClick="changeSrc()">bunny<br> <input type="radio" id="kittybutton" name="animal" value="kitty" onClick="changeSrc()">kitty </form> <img src="https://pbs.twimg.com/profile_images/447374371917922304/P4BzupWu.jpeg" id="picture" width=600px>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.