Add your desired buttons inside the html section, then attach onclick listeners to handle when the button is clicked. I think the cleanest way to do this would be to give your buttons individual ids, and then add event listeners in a js file.
For example, to change the image (give id=”img”) with the click of button that has id “button”:
const img = document.getElementById('img');
const button = document.getElementById('button');
button.addEventListener('click', () => {
img.src = "add-img-src-here"
});
Maybe you need to add some of HTML code with jQuery in the HTML:
<img src='' id='image_1' alt='There is a problem'><button id='but_1'></button>
$(document).ready(function(){
$('#but_1').click(function(){
$('#image_url').attr('src','url');
});
});
Or, you can use this code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").attr("src", "url");
});
});
</script>
</head>
<body>
<img src="" alt="there some problem here">
<button>Click Here To Change Picture</button>
</body>
</html>
yes you can use specific id to change any property .Ok
again you can use this code good luck.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var id = '';
$("img").click(function(){
id = $(this).attr('id');
src = $(this).attr('src');
alert("id: "+id+" src: "+ src);
$("#"+id).attr("src", "url");
$("#"+id).attr("alt", "Changed");
});
});
</script>
</head>
<body>
<div class="container">
<h1>Just Click On Image </h1>
<table class="table table-hover">
<thead>
<tr>
<th>image</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="class.png" alt="There Is Some Problem Here"id="img-1"></td>
</tr>
<tr>
<td><img src="class.png" alt="There Is Some Problem Here"id="img-2"></td>
</tr>
<tr>
<td><img src="class.png" alt="There Is Some Problem Here"id="img-3"></td>
</tr>
</tbody>
</table>
</body>
</html>
i will need some help with some coding if possible. I would like to have when each button is clicked the picture shown to change. I have uploaded a picture how i would like to have the buttons and the picture positioned, also to be responsive on mobile (buttons below, picture above).
I have also uploaded the code i am using at the moment. Thank you very much for the time spent!
* {
box-sizing: border-box;
}
.imagebox {
width: 50%;
float: left;
height: 300px;
position: relative;
}
.imagebox img {
position: relative;
top: 50%;
transform: translateY(-50%);
overflow: hidden;
width: 100%;
}
.textbox-cont {
width: 50%;
height: 300px;
float: right;
position: relative;
overflow: hidden;
}
.textbox {
color: #000000;
position: absolute;
text-align: center;
width: 100%;
padding: 20px;
top: 50%;
transform: translateY(-50%);
}
@media only screen and (max-width: 700px) {
.imagebox,
.textbox-cont {
width: 100%;
height: 200px;
}
<div class="imagebox" class="col-lg-12 scrollReveal sr-bottom sr-ease-in-out-quad sr-delay-1">
<img src="http://cdns2.freepik.com/free-photo/twitter-logo_318-40459.jpg" width="400px" heigh="358px" />
</div>
<div class="textbox-cont">
<div class="textbox">
<p style="margin">Pick a Color Scheme</p>
<p></p>
<div></div>
<a href="#">Read More</a>
</div>
</div>
“col-lg-12′ looks like a Bootstrap style. Are you using Bootstrap?
How do i put several pictures with different id’s? Didn not quite get that. Thank you for your time!
