+ 2

can images be changed by using function in inner html....

//html... <img class="image" src="example1.png" alt="" onclick=slide()></img> //javascript... function slide(){ var image=getelEmentById("image"); image.innerHTML.src="example2.png";

18th Sep 2017, 6:15 PM
Bhagwan Singh Rajpurohit
Bhagwan Singh Rajpurohit - avatar
13 Respostas
+ 4
nice it's working "yaroslav pieskov" thank uh.....
19th Sep 2017, 9:46 AM
Bhagwan Singh Rajpurohit
Bhagwan Singh Rajpurohit - avatar
+ 1
//html <img id="slider" src="example.jpg"> //js document.getElementById("slider").src = "example 2.jpg"
18th Sep 2017, 6:33 PM
Yaroslav Pieskov
Yaroslav Pieskov - avatar
+ 1
innerHTML is the child node of the tag/element and will go in between opening and closing tags. For instance, if we had a p tag: <p>This is the innerHTML</p> the text node in-between the tags is the innerHTML. With an image, src is an attribute, so you'll need to change the value of the attribute instead. image.innerHTML.src="example2.png"; This line is basically like saying get the child node of the image and set its src attribute.
18th Sep 2017, 7:04 PM
ChaoticDawg
ChaoticDawg - avatar
+ 1
"yaroslav pieskov" and now the task is.... define a fuction onclick of "example2.jpg" and var image is set to "example3.jpg".
19th Sep 2017, 9:53 AM
Bhagwan Singh Rajpurohit
Bhagwan Singh Rajpurohit - avatar
+ 1
no! example1,example2....are different link addresses. so that src="example+ ++i +".jpg"; can not be used
19th Sep 2017, 11:16 AM
Bhagwan Singh Rajpurohit
Bhagwan Singh Rajpurohit - avatar
+ 1
can u give me an example of this????
19th Sep 2017, 11:24 AM
Bhagwan Singh Rajpurohit
Bhagwan Singh Rajpurohit - avatar
+ 1
see previous code
19th Sep 2017, 11:29 AM
Yaroslav Pieskov
Yaroslav Pieskov - avatar
+ 1
<!DOCTYPE html> <html> <head> <title>Page Title</title> <script> //js var i = 1, slider = document.getElementById("slider"), links = ["http://wapkaimage.com/701848/701848064_e9dd80394d.jpg", "http://wapkaimage.com/702373/702373365_270eedd994.jpg", "http://www.planwallpaper.com/static/images/background-designs-13-2014-background-and-wallpaper.jpg"]; slider.addEventListener("click", function(){ i= i+1 >= links.length?0:i+1; slider.src= links[i]; }) </script> </head> <body> <div> <img id="slider" src="http://wapkaimage.com/701848/701848064_e9dd80394d.jpg"></img> </div> </body> </html> not working bro....
19th Sep 2017, 12:34 PM
Bhagwan Singh Rajpurohit
Bhagwan Singh Rajpurohit - avatar
+ 1
Good! it works properly.......
19th Sep 2017, 1:39 PM
Bhagwan Singh Rajpurohit
Bhagwan Singh Rajpurohit - avatar
0
<img id="slider" src="example1.jpg"> -----[EDITED]------ //js var i = 1, slider = document.getElementById("slider"), links = ["link1", "link2", "link3"]; slider.addEventListener("click", function(){ i= i+1 >= links.length?0:i+1; slider.src= links[i]; })
19th Sep 2017, 10:00 AM
Yaroslav Pieskov
Yaroslav Pieskov - avatar
0
so, you can use array with links: links=["link1.jpg", "img/link2.png","images/example3.jpeg"]; i = i<links.length-1?i+1:0; src= links[i];
19th Sep 2017, 11:17 AM
Yaroslav Pieskov
Yaroslav Pieskov - avatar
0
put script in the end of body tag
19th Sep 2017, 12:36 PM
Yaroslav Pieskov
Yaroslav Pieskov - avatar
0
and img is a single tag
19th Sep 2017, 12:38 PM
Yaroslav Pieskov
Yaroslav Pieskov - avatar