New course! Every coder should learn Generative AI!
Try a free lesson+ 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";
13 Answers
+ 4
nice it's working "yaroslav pieskov" thank uh.....
+ 1
//html
<img id="slider" src="example.jpg">
//js
document.getElementById("slider").src = "example 2.jpg"
+ 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.
+ 1
"yaroslav pieskov" and now the task is....
define a fuction onclick of "example2.jpg" and var image is set to "example3.jpg".
+ 1
no! example1,example2....are different link addresses. so that src="example+ ++i +".jpg"; can not be used
+ 1
can u give me an example of this????
+ 1
see previous code
+ 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....
+ 1
Good! it works properly.......
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];
})
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];
0
put script in the end of body tag
0
and img is a single tag
Often have questions like this?
Learn more efficiently, for free:
Hot today
Cyber security
1 Votes
Bash
0 Votes
Personal chat
1 Votes
Please help
0 Votes
Links of cmy codes
5 Votes
Link
6 Votes
Why exception is not handled
1 Votes
Ruby
2 Votes