Sujet Précédent Sujet Suivant

Transition changement d'image

Résolu/Fermé
MrWhitediamond Messages postés 31 Date d'inscription mardi 6 janvier 2015 Statut Membre Dernière intervention 21 novembre 2015 - 10 janv. 2015 à 17:44
MrWhitediamond Messages postés 31 Date d'inscription mardi 6 janvier 2015 Statut Membre Dernière intervention 21 novembre 2015 - 12 janv. 2015 à 18:26
Bonjour à tous !

J'ai besoin de votre aide car je souhaiterai réaliser une transition lors d'un changement d'image, lors du passage de ma souris sur l'un des liens (voire mon problème : url:"http://project-australia.esy.es/").

CSS du carde image : 
.image {
	background: url(Images/Photo-Header-Main2.png);
	background-repeat: no-repeat;
	background-position: 100% 0%;
	position:relative;
	left:-20px;
	width: 104%;
	height: 279px;
	border-radius:17px;
	box-shadow: 4px 4px 10px #1c1a19;
	text-align:left;
}


Html d'un des liens : 
<a href="Home.html" data-image="Images/Photo-Header-Main2.png" id="Home_link" title="[/download/telecharger-34085672-kipicam Home]">Home</a>


Script Java pour changer l'url au passage de la souris : 
			$(document).ready(function(){
					$('.navigation a').hover(function(){
						$('.image').css('background-image','url('+$(this).data('image')+')');						
					});
			});


Merci d'avance pour votre aide :)

MrWhitediamond

P.S: C'est un blog que je dois réalisé pour mes cours d'anglais.
A voir également:

1 réponse

Réponse 1 / 1
Mirzo Messages postés 75 Date d'inscription mercredi 15 décembre 2010 Statut Membre Dernière intervention 14 octobre 2015 16
Modifié par Mirzo le 12/01/2015 à 14:35
Bonjour MrWhitediamond,

Tu peux simplement utiliser la propriété css "transition" afin de donner un effet de transition simple à tes images. 

transition: background-image 300ms ease;
-webkit-transition: background-image 300ms ease;

Dès que le 
background-image
de ton bloc va changer il va le faire avec les paramètres que tu as donnés dans la propriété 
transition
.

exemple : http://jsfiddle.net/6wbyf5kg/

A propos de la propriété transition : https://www.w3schools.com/css/css3_transitions.asp
--
0
MrWhitediamond Messages postés 31 Date d'inscription mardi 6 janvier 2015 Statut Membre Dernière intervention 21 novembre 2015 1
12 janv. 2015 à 16:31
Merci pour ta réponse mais cela ne fonctionne pas :( J'essaye de régler le problème tous seul et je metterai la solution si je trouve.
0
Mirzo Messages postés 75 Date d'inscription mercredi 15 décembre 2010 Statut Membre Dernière intervention 14 octobre 2015 16 > MrWhitediamond Messages postés 31 Date d'inscription mardi 6 janvier 2015 Statut Membre Dernière intervention 21 novembre 2015
Modifié par Mirzo le 12/01/2015 à 17:58
C'est vrai que cette méthode n'est pas spécialement compatible sur quelques versions de navigateur.

Je te conseil d'essayer de changer ton approche concernant le changement d'image au hover, soit par la structure HTML ou la méthode par laquelle tu change l'image, cela te permettra peut-être de trouver tes propres solutions. Il y a toujours plusieurs façon de faire les choses.

Tu pourras utiliser ceci pendant tes essais qui te permettrons aussi de faire des transitions :
- La fonction "animate" de jQuery : https://api.jquery.com/animate/
- Les fonctions "fadeIn" et "fadeOut" de jQuery : https://api.jquery.com/fadeIn/ https://api.jquery.com/fadeout/
0
MrWhitediamond Messages postés 31 Date d'inscription mardi 6 janvier 2015 Statut Membre Dernière intervention 21 novembre 2015 1
12 janv. 2015 à 17:55
J'utilise firefox 34.0 .......... alors soit j'ai fait un erreur ...... Je vais tester avec chrome ou tester autre chose. Merci
0
MrWhitediamond Messages postés 31 Date d'inscription mardi 6 janvier 2015 Statut Membre Dernière intervention 21 novembre 2015 1
12 janv. 2015 à 17:57
Ok sa fonctionne avec chrome mais pas avec firefox.... Merci quand meme à toi je vais mettre résolu sur le sujet.
0
MrWhitediamond Messages postés 31 Date d'inscription mardi 6 janvier 2015 Statut Membre Dernière intervention 21 novembre 2015 1
12 janv. 2015 à 17:59
Après sa serait cool que tu me fasses le code en javascript car je pus dans ce language :) pour que sa fonctionne dans les 2 navigateurs
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses