stackoom
  简体   繁体   中英

How can I change an image upon clicking using Javascript?

 原文  2015-12-29 02:03:54  4   2    javascript/ html

Question

I am having some trouble changing one image to another with Javascript. Ideally, the program should change the image upon being clicked, but I believe the syntax of the command is incorrect. My images are in a folder called "images" and the program files are found in the same folder as the "images" folder. The error I've noticed is that, when clicked, the image attempts to change, but there is an error with changing the source image.

I've read similar questions, but the answers were over my head, as far as complexity goes. I was reading an example of what I wanted to do, but I can't get my code to work, even though I practically copied the whole code.

Javascript 

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>

2 answers

solution1
 1 ACCPTED  2015-12-29 02:07:44

use images/on.png"; instead of images\\on.png";

your javascript function is working well. 

 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>

solution2
 0  

Here is one of my previous projects of changing images: 

 $(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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How can I change the background of my li element upon clicking it? How to get dialogue to change upon clicking on an image? How can I store an html element class or id in a varibale upon clicking on said element using only javascript (no libraries)? How can I change the profile image on clicking the existing image in angularjs? How can I traverse through cookie and then upon clicking a button change the url depending on values from cookie How can I display an image upon selecting through options and clicking submit button? How can I change the daily image on a homepage using JavaScript? How can I change image source in javascript using “this”? How can i return img.src by clicking on an image with javascript? How do I change a icon upon clicking it in Bootstrap 4?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM