Nouveau cas pour hover et IE

**leFred** · 12/02/2009, 16h32

Désolé je crée un nouveau post pour encore un problème de hover avac ie sur balise a:

j'affecte une image a deux effets (up et down) de 200px de large, le but etant d'afficher l'une ou l'autre partie de l'image;(j'affecte cette image via un background dans un autre fichier css car c'est un png transparent) voici le code

css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
.btnCaddie span{
	display:block;
	position:absolute;
	overflow:hidden;
	float:left;
	width:100px;
	height:29px;
	top:0px;
	left:0px;
	cursor:pointer;
 
}
 
.btnCaddie a:hover span{
	left:-106px;
	padding-left:106px;
}

et le html (qui est en fait une génération via php):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div class='addCart'>
	<div class='btnCaddie'>
		<a href='#'><span></span></a>
	</div>
</div>

ça marche nickel sous FF mais pas IE et le plus étonnant c'est que j'ai fait cet effet sur mon menu et pas moyen de le reproduire; pour voir c'est ici c'est le bouton "commander"

Merci de votre aide

PS : l'action hover est bien prise en compte (je teste en affectant une bordur) mais mon image ne se décale pas....

Je rajoute que ça fonctionne dans le menu du haut mais pas dans ma page principale (qui appelle le menu par un include)

**Macmillenium** · 12/02/2009, 20h15

Bonjour,

Quel hack utilise tu pour corriger le problème des png-24 sous IE6 ?
Le problème (qui est reconnu) vient de sa, ces hacks corrigent le problème mais limitent l'utilisation des propriétés liées aux backgrounds png comme background-position et background-repeat.

Cependant, il existe une librairie magique qui affiche les png en passant par vml ce qui ne pose aucun problème pour IE6

**leFred** · 13/02/2009, 11h22

Bonjour
j'utilise ceci :
* KOIVI PNG Alpha IMG Tag Replacer for PHP (C) 2004 Justin Koivisto
* Version 2.0.12
* Last Modified: 12/30/2005

je vais regarder ta solution, j'espère que c'est pas trop complexe ....
J'ai pas le temps maintenant mais cette solution fonctionne t elle pour les html généré par php ?

**Macmillenium** · 13/02/2009, 11h36

Envoyé par leFred

je vais regarder ta solution, j'espère que c'est pas trop complexe ....

Non tu as une fonction toute prête, il suffit juste de déclarer les éléments sur lesquelles tu utilise des png dans cette fonction.

Envoyé par leFred

J'ai pas le temps maintenant mais cette solution fonctionne t elle pour les html généré par php ?

Oui, pour le code html généré par n'importe quel langage

**leFred** · 13/02/2009, 16h17

ça doit venir de moi mais j'arrive pas a le faire fonctionner ce truc ?!!! non seulement le background ne change pas de position mais je perd mon effet de transparence; je fais :

Dans le php:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<head>
<title>Découverte de notre boutique...</title>
<style type="text/css" media="screen">@import url(styles/showShop.css);</style>
<style type="text/css" media="screen">@import url(styles/behavior.css);</style>
<!--<style type="text/css" media="screen">@import url(alphaCSS_boutique.php);</style>-->
</head>
<!--[if IE 6]>
<script src="DD_belatedPNG.js">
</script>
<script>
 /* EXAMPLE */
  DD_belatedPNG.fix('.btnCaddie');
  
  /* string argument can be any CSS selector */
  /* .png_bg example is unnecessary */
  /* change it to what suits you! */
</script>
<![endif]-->

+ ceci pour generer le code avec les variables

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$aStringResult=$aStringResult."
<div class=$aClass style=$aStyle><Strong>$substrDesignation</strong>
<div class='fondMiniature'>
<div style='position:relative;top:".$top."px;left:".$left."px;'>
<img src=$aPic width=$dst_w  height=$dst_h>
</div>
</div>
<div class='textDesc'>$substrDescriptif</div>
   <div class='addCart'>
     <div class='btnCaddie'>
      <a href='#'><div class='bck'></div></a>
     </div>
   </div>				
</div>";
?>

+ pour simuler le rollover

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
.btnCaddie a:hover .bck {
	left:-106px;
	padding-left:106px;
	border:1px blue solid;
}

D'autre part en admettant que j'arrivre à le faire fonctionner, ceci est pour ie6 mais comment je fais pour faire fonctionner ceci avec les autres version du navigateur ?

**Macmillenium** · 13/02/2009, 22h06

Le png est en background de .bck

donc : DD_belatedPNG.fix('.bck');

Nouveau cas pour hover et IE

Survol d'un élément en CSS (:hover)

Vue hybride

Discussions similaires

Partager

Partager