sciences et paysages Index du Forum

sciences et paysages
Ce forum permet aux internautes qui consultent les pages web de Bernard Langellier de réagir. Les sujets concernés sont géologie, biologie, zoologie, botanique, humour, illusions, musée Mac

 FAQFAQ   RechercherRechercher   MembresMembres   GroupesGroupes   S’enregistrerS’enregistrer 
 ProfilProfil   Se connecter pour vérifier ses messages privésSe connecter pour vérifier ses messages privés   ConnexionConnexion 

Clic pour changer une image

 
Poster un nouveau sujet   Répondre au sujet    sciences et paysages Index du Forum -> sciences et paysages -> html5-javascript
Sujet précédent :: Sujet suivant  
Auteur Message
Bernard Langellier
Administrateur

Hors ligne

Inscrit le: 08 Mai 2015
Messages: 88

MessagePosté le: Jeu 10 Mar - 12:14 (2016)    Sujet du message: Clic pour changer une image Répondre en citant

Voici le script qui me paraît être le plus simple pour provoquer d'un clic sur une image son remplacement par une autre.
 
Code:
<script type='text/JavaScript'>
changeImage = function() {
    var image = document.getElementById('grillon');
    var url1 = 'grillon-femelle.jpg';
    var url2 = 'grillon-male.jpg';
    
    if (image.getAttribute('src')==url1) {
       image.setAttribute('src', url2);
    } else {
       image.setAttribute('src', url1);
    }
 }
function preload()
 {image0 = new image; image0.src="grillon-male.jpg";}
 </script>





Code:
<body onload="preload();">




Code:
<img src="grillon-femelle.jpg" alt="grillon" onclick="changeImage();" />





Voici un exemple de page (consulter le code source) :
http://bernard.langellier.pagesperso-orange.fr/orthopteres/grillon.htm

Ce script, contrairement au survol d'une image par le curseur, est compatible avec les écran tactiles (tablettes et smartPhones).
Pour un affichage plus rapide de l'image de remplacement, je propose son pré-chargement (preload).


Revenir en haut
Publicité






MessagePosté le: Jeu 10 Mar - 12:14 (2016)    Sujet du message: Publicité

PublicitéSupprimer les publicités ?
Revenir en haut
Montrer les messages depuis:   
Poster un nouveau sujet   Répondre au sujet    sciences et paysages Index du Forum -> sciences et paysages -> html5-javascript Toutes les heures sont au format GMT + 2 Heures
Page 1 sur 1

 
Sauter vers:  

Index | Panneau d’administration | Creer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Powered by phpBB © 2001, 2005 phpBB Group
Traduction par : phpBB-fr.com