Verif script

Résolu/Fermé
Yvan64320 Messages postés 33 Date d'inscription jeudi 28 juillet 2011 Statut Membre Dernière intervention 25 août 2011 - 28 juil. 2011 à 15:53
adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 - 28 juil. 2011 à 16:21
Bonjour,
j'ai testé de faire ce tuto: http://www.tefdesign.fr/tutoriels/creer-une-infobulle-a-la-sauce-coda-panic/#comment-989

mais mon infobulle ne s'affiche pas.

voici mon script:

style.css:

@charset "utf-8";
/* CSS Document */



#container .content{
background: url(image/11-07-19-meteo-ici-tele-pau.jpg) no-repeat;
width:320px;
height:180px;
display: inline-block;
margin-left:100px;
margin-right:150px;
margin-top:300px;
cursor:pointer;
position: relative;
}

#container .content em {

background: url(image/infobulle.png) no-repeat;
width:238px;
height:216px;
margin-left:-10px;
margin-top: -20px;

padding-left: 80px;
padding-top:30px;
line-height:40px;
display:none;
position:absolute;
top: -100px;




}

index.html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>essais bulle</title>
<link charset="utf-8" href="style.css" rel="stylesheet" media="screen" type="text/css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="application/x-javascript">

$(function(){
var popupHide = 0;
$(".content").hover(function(){
if(popupHide==0){
$('em',this).animate([opacity: "show",top: "-80"],"slow");
popupHide = 1;
} else{
$('em',this).animate([opacity: "hide",top: "-100"],"fast");
popupHide = 0;




})


});
});





</script>
</head>

<body>

<div id="container">
<div class="content"> <em> <strong> Type: </strong>Ressources <br /> <strong> Titre:</strong> Theme </em> </div>
<div class="content"> <em> <strong> Type: </strong>Ressources <br /> <strong> Titre:</strong> Theme2 </em> </div>

</div>


</body>
</html>
A voir également:

2 réponses

adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
28 juil. 2011 à 16:00
Bonjour,

les options se mettent entre accolade {opacity ...} et non entre crochets [opacity...]


Ensuite tu as un problème d'organisation il y à une parenthèse en trop.
Le fait d'indenter ton code te permettra de mieux voir se genre d'erreur.

Correction
$(function(){

	var popupHide = 0;
	$(".content").hover(function(){
		if(popupHide==0){
			$('em',this).animate({opacity: "show",top: "-80"},"slow");
			popupHide = 1;
		} else{
			$('em',this).animate({opacity: "hide",top: "-100"},"fast");
			popupHide = 0;
		}
	});
});


Adns
2
Yvan64320 Messages postés 33 Date d'inscription jeudi 28 juillet 2011 Statut Membre Dernière intervention 25 août 2011
28 juil. 2011 à 16:11
Merci de ta réponse cela marche bien !!
et merci du conseil pour le fait d'indenter j'y tacherais à l'avenir,

Bonne journée à toi
0
adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
28 juil. 2011 à 16:21
pense a mettre ton sujet en résolu ;)
0