Problème hover avec internet explorer 8
tipi75
Messages postés
723
Statut
Membre
-
monkey_monk Messages postés 681 Statut Membre -
monkey_monk Messages postés 681 Statut Membre -
Bonjour,
J'ai un soucis, lors du survol de la souris sur l'image, celle ci devrais zoomer mas ce n'est pas le cas.
Voici mon code php (je gère les pages en dynamiques):
$contenu = '<ul class="thumb">';
$contenu .= '<li><a href="images\tata\black_flower_1.jpg"><img src="images\tata\black_flower_1.jpg" width="100" border="no" alt="Le titre de la photo 1"/></a></li>';
$contenu .= '<li><a href="images\tata\black_flower_2.jpg"><img src="images\tata\black_flower_2.jpg" width="100" border="no" alt="Le titre de la photo 2" /></a></li>';
$contenu .= '<li><a href="images\tata\black_flower_3.jpg"><img src="images\tata\black_flower_3.jpg" width="100" border="no" alt="Le titre de la photo 3" /></a></li>';
$contenu .= '<li><a href="images\tata\black_flower_4.jpg"><img src="images\tata\black_flower_4.jpg" width="100" border="no" alt="Le titre de la photo 4" /></a></li>';
$contenu .= '<li><a href="images\tata\black_flower_5.jpg"><img src="images\tata\black_flower_5.jpg" width="100" border="no" alt="Le titre de la photo 5" /></a></li>';
$contenu .= '</ul>';
Voici le css:
ul.thumb a:hover {
background-image:url('images\image_fond.png') no-repeat center center; /* Image used as background on hover effect*/
/*width:300px;
height:400px;*/
border: none; /* Get rid of border on hover */
}
Voici le javascript:
$("ul.thumb a").hover(function() {
$(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/
$(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
.animate({
marginTop: '-110px', /* The next 4 lines will vertically align this image */
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px', /* Set new width */
height: '174px', /* Set new height */
padding: '20px'
}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
} , function() {
$(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
$(this).find('img').removeClass("hover").stop() /* Remove the "hover" class , then stop animation queue buildup*/
.animate({
marginTop: '0', /* Set alignment back to default */
marginLeft: '0',
top: '0',
left: '0',
width: '100px', /* Set width back to default */
height: '100px', /* Set height back to default */
padding: '5px'
}, 400);
});
Merci pour votre aide.
Si vous voulez plus de précisions sur l'effet voici la page sur lequel je me suis appuyé:
http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/
J'ai un soucis, lors du survol de la souris sur l'image, celle ci devrais zoomer mas ce n'est pas le cas.
Voici mon code php (je gère les pages en dynamiques):
$contenu = '<ul class="thumb">';
$contenu .= '<li><a href="images\tata\black_flower_1.jpg"><img src="images\tata\black_flower_1.jpg" width="100" border="no" alt="Le titre de la photo 1"/></a></li>';
$contenu .= '<li><a href="images\tata\black_flower_2.jpg"><img src="images\tata\black_flower_2.jpg" width="100" border="no" alt="Le titre de la photo 2" /></a></li>';
$contenu .= '<li><a href="images\tata\black_flower_3.jpg"><img src="images\tata\black_flower_3.jpg" width="100" border="no" alt="Le titre de la photo 3" /></a></li>';
$contenu .= '<li><a href="images\tata\black_flower_4.jpg"><img src="images\tata\black_flower_4.jpg" width="100" border="no" alt="Le titre de la photo 4" /></a></li>';
$contenu .= '<li><a href="images\tata\black_flower_5.jpg"><img src="images\tata\black_flower_5.jpg" width="100" border="no" alt="Le titre de la photo 5" /></a></li>';
$contenu .= '</ul>';
Voici le css:
ul.thumb a:hover {
background-image:url('images\image_fond.png') no-repeat center center; /* Image used as background on hover effect*/
/*width:300px;
height:400px;*/
border: none; /* Get rid of border on hover */
}
Voici le javascript:
$("ul.thumb a").hover(function() {
$(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/
$(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
.animate({
marginTop: '-110px', /* The next 4 lines will vertically align this image */
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px', /* Set new width */
height: '174px', /* Set new height */
padding: '20px'
}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
} , function() {
$(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
$(this).find('img').removeClass("hover").stop() /* Remove the "hover" class , then stop animation queue buildup*/
.animate({
marginTop: '0', /* Set alignment back to default */
marginLeft: '0',
top: '0',
left: '0',
width: '100px', /* Set width back to default */
height: '100px', /* Set height back to default */
padding: '5px'
}, 400);
});
Merci pour votre aide.
Si vous voulez plus de précisions sur l'effet voici la page sur lequel je me suis appuyé:
http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/
A voir également:
- Problème hover avec internet explorer 8
- Internet explorer 8 - Télécharger - Navigateurs
- Clé windows 8 - Guide
- Internet explorer - Guide
- Internet explorer 11 - Télécharger - Navigateurs
- Internet explorer 10 - Télécharger - Navigateurs
5 réponses
Peux-tu me dire pourquoi tu utilises jquery pour un effet de remplacement ? Si ce n'est que pour l'animation (effet de transition ou autre) il y a plus simple..
Il devrais y avoir moyen très simplement via css... remplacement de propriété background et redimensionnement via la pseudo class :hover (uniquement sur une balise <a> pour raison de compatibilité).
Ensuite tu peux gérer l'effet de transition via ton script...
Attention tout de même, pour cet effet via le css sur la balise <a>, il ne faut rien mettre dans cette dernière (pas d'image) vu que l'image s'affiche en background.
Juste faire attention à bien lui attribuer display:block et une taille.
J'espère que ça t'aidera ! ;)
Il devrais y avoir moyen très simplement via css... remplacement de propriété background et redimensionnement via la pseudo class :hover (uniquement sur une balise <a> pour raison de compatibilité).
Ensuite tu peux gérer l'effet de transition via ton script...
Attention tout de même, pour cet effet via le css sur la balise <a>, il ne faut rien mettre dans cette dernière (pas d'image) vu que l'image s'affiche en background.
Juste faire attention à bien lui attribuer display:block et une taille.
J'espère que ça t'aidera ! ;)
Je n'ai pas tout compris. J'ai remplacé dans la pseudo classe :hover, la propriété background-image par display-block et j'ai ajouté une taille à l'image. Cepeendant, ça ne marche pas.
Merci pour ton aide
Merci pour ton aide
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Hmmm... un bon dessin vaut mieux qu'un long discours... voyons voir, essaye ceci :
Ca devrais t'aider à comprendre ! ;)
Tu remarqueras que je n'ai rien mis dans ma balise <a> mais elle contient quand même l'image... grace au display:block et aux width/height ainsi que background:url.
A partir de là, tu devrais réussir à "fabriquer" ce que tu veux ! :D
<html>
<head>
<style type="text/css">
span { display:block; width:100px; height:100px; }
a.swap { border:1px solid black; position:absolute; display:block; width:100px; height:100px; background:url(http://boutique.magicfigurines.com/images/tom%20balaie%20jerryV15Z21.bmp) 0 0 no-repeat; }
a.swap:hover { width:282px; height:282px; margin:-100px 0 0 -100px; }
#test { margin:150px 0 0 150px; }
</style>
</head>
<body>
<div id="test">
<p>blablablabla blablablablablablablablabla</p>
<span><a class="swap" href="#" title=""></a></span>
<p>blablablabla blablablablablablablablabla</p>
<p>blablablabla blablablablablablablablabla</p>
</div>
</body>
</html>
Ca devrais t'aider à comprendre ! ;)
Tu remarqueras que je n'ai rien mis dans ma balise <a> mais elle contient quand même l'image... grace au display:block et aux width/height ainsi que background:url.
A partir de là, tu devrais réussir à "fabriquer" ce que tu veux ! :D
