Je vais avoir besoin d'aide avec un certain codage si possible. Je voudrais avoir lorsque chaque bouton est cliqué sur l'image montrée pour changer. J'ai téléchargé une image comment je voudrais avoir les boutons et la photo positionné, également pour être réactif sur mobile (boutons ci-dessous, image ci-dessus).
J'ai également téléchargé le code que j'utilise pour le moment. Merci beaucoup pour le temps passé! P>
p>
<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>3 Réponses :
Ajoutez les boutons souhaités à l'intérieur de la section HTML, puis fixez les auditeurs OnCliquez sur la prise lorsque vous cliquez sur le bouton. Je pense que le moyen le plus propre de le faire serait de donner à vos boutons individuels individuels, puis d'ajouter des auditeurs d'événements dans un fichier JS. Par exemple, pour changer l'image (donner ID = "img") en cliquant sur le bouton "Bouton":
const img = document.getElementById('img');
const button = document.getElementById('button');
button.addEventListener('click', () => {
img.src = "add-img-src-here"
});
Merci, je vais essayer ça!
Peut-être que vous devez ajouter une partie du code HTML avec jQuery dans le HTML:
![Il y a un problème]()
-
xxx ou, vous pouvez utiliser ce code: xxx
Comment puis-je mettre plusieurs images avec des identifiants différents? N'a pas vraiment compris ça. Merci pour votre temps!
( Stackoverflow. com / questions / 62392639 / ... )
Désolé si je suis en retard pour répondre à votre question. Donc, oui, vous pouvez utiliser des identifiants spécifiques pour changer de propriété .OK Encore une fois, vous pouvez utiliser ce code bonne chance.
p>
<!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>Laquelle de vos réponses est la bonne en fonction de votre?
"COL-LG-12 'ressemble à un style bootstrap. Utilisez-vous bootstrap?
oui j'utilise bootstrap