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

jmund · 7 Septembre 2014

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

Supermaury · 8 Septembre 2014

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>

@++!

jmund · 9 Septembre 2014

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. :/

Schwarzer Stern · 9 Septembre 2014

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 ?

++

jmund · 9 Septembre 2014

Schwarzer Stern a dit:
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 ?

++

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

! du coup : background:url("images/rub5.png") et tout fonctionne à merveille !

Merci. Je vais pouvoir m'amuser, maintenant :mrgreen: