單擊使用Javascript后如何更改圖像？

Question

我在使用Javascript將一個圖像更改為另一個圖像時遇到了一些麻煩。 理想情況下，該程序應在單擊時更改圖像，但我認為該命令的語法不正確。 我的圖像位於名為“ images”的文件夾中，程序文件與“ images”文件夾位於同一文件夾中。 我注意到的錯誤是，單擊該圖像后，它會嘗試更改，但是更改源圖像時出現錯誤。

我讀過類似的問題，但是就復雜性而言，答案已經超出了我的腦海。 我正在閱讀一個我想做的事的示例，但是即使我實際上復制了整個代碼，也無法使我的代碼正常工作。

Java腳本

function changeIMG() {
var image = document.getElementById("face");
    if (image.src.match("off")) {
        image.src = "images\on.png";
    } else {
        image.src = "images\off.png";
    }}

的HTML

<body>

<center>
<h3>Welcome to the game.</h3>

<br>



<img src="images\off.png" id="face" onClick="changeIMG()" height="250" width="250">



</center>

Answer 1

使用images/on.png";代替images\\on.png";

您的javascript函數運行良好。

 function changeIMG() { var image = document.getElementById("face"); if (image.src.match("off")) { image.src = "http://dummyimage.com/100x100/000/fff&text=on"; } else { image.src = "http://dummyimage.com/100x100/000/fff&text=off"; }}

 <center> <h3>Welcome to the game.</h3> <br> <img src="http://dummyimage.com/100x100/000/fff&text=off" id="face" onClick="changeIMG()" height="250" width="250"> </center>

Answer 2

這是我以前更改圖像的項目之一：

 $(document).ready(function(){ var btnvalue $("#next").click(function(){ btnvalue = $( this ).attr( "data-dir" ); if (btnvalue == 1) { $( this ).attr( "data-dir","2") $( "ul li:nth-child(1)" ).css( "display", "none" ); $( "ul li:nth-child(2)" ).css( "display", "block" ); $("#image2").slideDown(); } if (btnvalue == 2) { $( this ).attr( "data-dir","3") $( "ul li:nth-child(2)" ).css( "display", "none" ); $( "ul li:nth-child(3)" ).css( "display", "block" ); $("#image3").slideDown( 1000, function() { // Animation complete }); } if (btnvalue == 3) { $( this ).attr( "data-dir","4") $( "ul li:nth-child(3)" ).css( "display", "none" ); $( "ul li:nth-child(4)" ).css( "display", "block" ); $("#image4").slideDown( 1000, function() { // Animation complete }); } if (btnvalue == 4) { $( this ).attr( "data-dir","1") $( "ul li:nth-child(4)" ).css( "display", "none" ); $( "ul li:nth-child(1)" ).css( "display", "block" ); $("#image1").slideDown( 1000, function() { // Animation complete }); } }) // Previous $("#prev").click(function(){ btnvalue = $("#next").attr( "data-dir" ); if (btnvalue == 2) { $("#next").attr( "data-dir","1") $( "ul li:nth-child(2)" ).css( "display", "none" ); $( "ul li:nth-child(1)" ).css( "display", "block" ); $("#image1").slideDown( 1000, function() { // Animation complete }); } if (btnvalue == 3) { $("#next").attr( "data-dir","2") $( "ul li:nth-child(3)" ).css( "display", "none" ); $( "ul li:nth-child(2)" ).css( "display", "block" ); $("#image2").slideDown( 1000, function() { // Animation complete }); } if (btnvalue == 4) { $("#next").attr( "data-dir","3") $( "ul li:nth-child(4)" ).css( "display", "none" ); $( "ul li:nth-child(3)" ).css( "display", "block" ); $("#image3").slideDown( 1000, function() { // Animation complete }); } if (btnvalue == 1) { $("#next").attr( "data-dir","4") $( "ul li:nth-child(1)" ).css( "display", "none" ); $( "ul li:nth-child(4)" ).css( "display", "block" ); $("#image4").slideDown( 1000, function() { // Animation complete }); } }) })

 button{ height : 17px; width : 60px; } #slider-nav{ color : red; padding-top : 0em; } #next{ background-color : red; } #prev{ background-color : yellow; } .slider{ width : inherit; height : 300px; overflow : hidden } .slider ul{ width : 10000px; list-style : none; } .slider li { float : left } .slider ul li:nth-child(1){ position:absolute; width:600px; height:200px; z-index:15; top:50%; left:50%; margin:-100px 0 0 -150px; } .slider ul li:nth-child(2){ position:absolute; width:600px; height:200px; z-index:15; top:50%; left:50%; margin:-100px 0 0 -150px; } .slider ul li:nth-child(3){ position:absolute; width:600px; height:200px; z-index:15; top:50%; left:50%; margin:-100px 0 0 -150px; } .slider ul li:nth-child(4){ position:absolute; width:600px; height:200px; z-index:15; top:50%; left:50%; margin:-100px 0 0 -150px; } .slider ul li:nth-child(2){ display : none } .slider ul li:nth-child(3){ display : none } .slider ul li:nth-child(4){ display : none } .slider { border : 2px solid } body{ width : 600px }

 <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <link rel="stylesheet" href="style.css" /> <script src='script.js'></script> <script src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <div class = "slider"> <ul> <li> <!-- You can change this images if you want in a seperate document by forking my begginer progect--> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdJA38xKrGuTdclgbe0-zgfEaiJELl9nVWH2vGTi4PeRhnLW6EiQ" style="border-style: none; width: 200px; height: 200px; margin-left: -25px;margin-top: -25px;" id = "image1"> </li> <li> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSiXFcdb29GcvK2CmKx07wuU07Ceiwwwqp9Uth1fUZovELuGVqDNnPR9A" style="border-style: none; width: 200px; height: 200px; margin-left: -25px;margin-top: -25px;" id = "image2"> </li> <li> <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR8o6qWq__fEP1-HaIEc28-vl1YWPyKgP0FxewzfK5PYCcgUo23Ba0M4gs" style="border-style: none; width: 200px; height: 200px; margin-left: -25px;margin-top: -25px;" id = "image3"> </li> <li> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQfPNnAdm3ejpo5SE6r4Sd9Y0icOCscELCrs8RWSpLCb76sQ5bATzydvw" style="border-style: none; width: 200px; height: 200px; margin-left: -25px;margin-top: -25px;" id = "image4"> </li> </ul> </div> <div id = "slider-nav"> <button data-dir ="prev" id = "prev">previous</button> <button id = "next" data-dir = "1" >next</button> </div> </body> </html>

單擊使用Javascript后如何更改圖像？

問題描述

2 個解決方案

解決方案1
1 已采納 2015-12-29 02:07:44

解決方案2
0

單擊使用Javascript后如何更改圖像？

問題描述

2 個解決方案

解決方案1 1 已采納 2015-12-29 02:07:44

解決方案2 0

解決方案1
1 已采納 2015-12-29 02:07:44

解決方案2
0