Je dois insérer une image à chaque fois que l'utilisateur clique sur un élément spécifié (une autre image), et qu'il soit placé devant cette image. Cela peut-il être fait en javascript? Si non, avec quoi?Insérer une image sur l'emplacement d'un clic souris
Merci
Vous devez envoyer votre code html/structure aussi, mais vous pouvez aller sur quelque chose comme ceci:
var el = document.getElementById('image_id');
var img = document.getElementById('image_id2');
var container = document.getElementById('container_id');
el.onclick = function(){
container.appendChild(img);
};
à moins que vous définissez ne pas utiliser des bibliothèques externes, je prendrais un coup d'oeil à jQuery, ce qui peut rendre votre vie beaucoup plus facile pour ce genre de choses
Bien sûr, le flux de base serait d'ajouter un écouteur d'événements à l'événement onclick. Cet écouteur d'événement ajouterait alors l'image à un conteneur div.
Le point clé est le CSS pour vos images. Assurez-vous que vous êtes en positionnant absolument vos images et que ce serait une bonne idée d'utiliser un index z incrémentiel. Vous pouvez capturer les valeurs de position à partir de l'événement onclick (pour toutes les différentes valeurs, voir: http://www.quirksmode.org/js/events_properties.html#position). Vous devez définir ces valeurs CSS lorsque vous insérez l'image en javascript.
Cela devrait être possible. Personnellement, j'utilise JQuery ce qui rend ces choses assez faciles: http://jquery.com
Cet exemple devrait vous donner une idée de la façon dont vous arriver:
<html>
<head>
<title>My Page></title>
<style type="text/css">
.overlay {
position: absolute;
z-index: 500;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$("#clickable-image").click(function() {
var position = $(this).offset();
$("#overlay-image").offset(position).show();
});
</script>
</head>
<body>
<img id="clickable-image" src="path/to/image" />
<div id="overlay-image" class="overlay" style="display: none;">
<img src="path/to/overlay/image" />
</div>
</body>
</html>
Assurez-vous de l'image dans l'emplacement img src spécifié ...
ne semble pas insérer d'image? :/ des idées? Merci – IceDragon