Délai d'affichage d'une image avec "onmouseover"

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par jmund, 7 Septembre 2014.

  1. jmund
    jmund Nouveau WRInaute
    Inscrit:
    7 Septembre 2014
    Messages:
    3
    J'aime reçus:
    0
    Bonjour à tous,

    J'espère que quelqu'un pourra m'aider.
    Je suis un pur amateur autodidacte et je développe sous SPIP (pour rendre service à des amis, surtout) un certain nombre de sites web en lien avec la création littéraire ou artistique. On trouvera des liens quand j'aurais le droit d'en poster :mrgreen:
    Pour l'heure, vous voudrez bien cop/coll l'url suivante : http://www.fibrillations.net/ pour comprendre l'objet de ma demande. Il s'agit de mon modeste site perso (je précise que je n'ai rien à vendre).
    Si je prends la première image à gauche (partie revue du site), j'ai dans mon squelette de page-sommaire le code suivant (avec la syntaxe abrégée et les balises propres à SPIP) :

    Code:
    <a href="#URL_RUBRIQUE{41}"><div style="text-align:right;" ><img src="#CHEMIN{images/rub5t.png}" name="image" onmouseover="javascript:this.src='#CHEMIN{images/rub5.png}'" onmouseout="javascript:this.src='#CHEMIN{images/rub5t.png}'" width="150" height="150" alt="revue" /></div></a>
    Ce code fonctionne très bien en soi, mais j'aimerais savoir si on peut modifier le délai d'affichage de la seconde image appelée par le onmouseover. Je voudrais faire un genre de fondu/enchainé, quoi. Y a-t-il un réglage à niveau du js (et je ne connais rien de rien de rien au js) ?

    Merci pour vos réponses s'il y en a, et bonne fin de dimanche.

    JM
     
  2. Supermaury
    Supermaury WRInaute discret
    Inscrit:
    25 Mars 2009
    Messages:
    144
    J'aime reçus:
    5
    Bonjour JM.

    Il existe des milliers de façons de gérer cet effet.

    Le javascript n'est même pas nécessaire puisque tu as les transitions css à ta disposition.

    Exemple :

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    		<style>
    			body {background-color:#000}
    			a {outline:0}
    			img {border:0}
    			.fading {
    				display:block;
    				margin:5px;
    				padding:0;
    				float:left;
    				overflow:hidden
    			}
    			.fading img {
    				webkit-transition: opacity 1s ease-in-out;
    				-moz-transition: opacity 1s ease-in-out;
    				-o-transition: opacity 1s ease-in-out;
    				transition: opacity 1s ease-in-out
    			}
    			.fading img:hover  {
    				opacity:0;
    				filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    				filter: alpha(opacity=0)
    			}
    			.rub5 {background:url(rub5.png) 0 0 no-repeat}
    			.rub7 {background:url(rub7.png) 0 0 no-repeat}
    		</style>
    	</head>
    	<body>
    		<a class="fading rub5" href="#"><img src="rub5t.png" width="150" height="150" /></a>
    		<a class="fading rub7" href="#"><img src="rub7t.png" width="150" height="150" /></a>
    	</body>
    </html>
    
    @++!
     
  3. jmund
    jmund Nouveau WRInaute
    Inscrit:
    7 Septembre 2014
    Messages:
    3
    J'aime reçus:
    0
    Bonjour,
    et merci pour ta réponse.

    Je vais essayer de bidouiller à partir du code que tu m'as donné. je ne connaissais pas la propriété fading qui ouvre des perspectives intéressantes.
    Seul problème : ici, j'ai un fondu au noir. ce que je voudrais, c'est un fondu entre deux images (partir de l'image sombre, et que le onmouseover déclenche la plus claire avec un fading).

    J'ai testé un :
    Code:
    <a class="fading rub5t" href="#URL_RUBRIQUE{41}"><img src="#CHEMIN{images/rub5t.png}" onmouseover="#CHEMIN{images/rub5.png}" onmouseout="#CHEMIN{images/rub5t.png}" width="150" height="150" /></a>
    mais sans succès.

    J'ai dû rater quelque chose. :/
     
  4. Schwarzer Stern
    Schwarzer Stern WRInaute impliqué
    Inscrit:
    16 Mai 2010
    Messages:
    640
    J'aime reçus:
    2
    Salut,
    fading n'est pas une propriété, juste une classe qui aurait pu s'appeler "tartempion" ;)
    Je viens de tester et le code donné par Supermaury fonctionne chez moi, as-tu pensé à modifier les URL des 2 dernières lignes de son CSS ? Ça pourriat expliquer que tu partes d'un fond noir (si j'ai bien compris ton problème).
    .rub5 {background:url(images/rub5.png) 0 0 no-repeat}
    .rub7 {background:url(images/rub7.png) 0 0 no-repeat}

    Ensuite, je ne connais pas SPIP, mais as-tu besoin des onmouseover et onmouseout dans le rendu final ?

    ++
     
  5. jmund
    jmund Nouveau WRInaute
    Inscrit:
    7 Septembre 2014
    Messages:
    3
    J'aime reçus:
    0
    Non, aucun besoin de onmouseover/onmouseout, en fait. Aucun besoin de js non plus.
    J'avais bien renommé les URL du CSS mais en oubliant les guillemets :oops: ! du coup : background:url("images/rub5.png") et tout fonctionne à merveille !

    Merci. Je vais pouvoir m'amuser, maintenant :mrgreen:
     
Chargement...
Similar Threads - Délai affichage image Forum Date
Analytics et délai d'affichage Google Analytics 18 Janvier 2012
Delais d'affichage des backlinks Netlinking, backlinks, liens et redirections 7 Octobre 2003
Délai d'affichage des backlinks dans Google Référencement Google 6 Novembre 2002
Outil pour déterminer délai mise en cache navigateur Développement d'un site Web ou d'une appli mobile 8 Juin 2022
Search Console Délai entre modification sur les pages et son positionnement Crawl et indexation Google, sitemaps 8 Avril 2022
Délai désactivation compte Ad-Sense AdSense 19 Novembre 2020
modification Favicon : délai de mise à jour Google Développement d'un site Web ou d'une appli mobile 23 Janvier 2020
Playstore : délai de publication allongé Développement d'un site Web ou d'une appli mobile 29 Août 2019
Délai de prise en compte changement robots.txt plus long Crawl et indexation Google, sitemaps 18 Mai 2019
Délai avant (re)référencement après changements ? Problèmes de référencement spécifiques à vos sites 30 Avril 2019
Optimisation du délai d'indexation de pages Crawl et indexation Google, sitemaps 12 Janvier 2019
Délai rétractation internet Droit du web (juridique, fiscalité...) 4 Septembre 2018
Amélioration du site et SEO : délai effets Google Référencement Google 4 Août 2018
RGPD : délai de conservation des données (de connexion) Droit du web (juridique, fiscalité...) 30 Avril 2018
Message aux parisiens et bordelais qui sortent Demandes d'avis et de conseils sur vos sites 14 Mars 2018
GA temps réel : quel délai ? Google Analytics 7 Novembre 2017
Délais Google URL Rewriting et .htaccess 25 Août 2017
Erreurs 500 et délais de convalescence . Référencement Google 13 Mars 2015
Délai pour bien référencer un site Problèmes de référencement spécifiques à vos sites 9 Mars 2015
Délai désindexation Débuter en référencement 27 Novembre 2014