Verif script
Résolu
Yvan64320
Messages postés
33
Date d'inscription
Statut
Membre
Dernière intervention
-
adns Messages postés 1094 Date d'inscription Statut Membre Dernière intervention -
adns Messages postés 1094 Date d'inscription Statut Membre Dernière intervention -
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>
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:
- Verif script
- Script vidéo youtube - Guide
- Verif lien - Guide
- Mas script - Accueil - Windows
- Ghost script - Télécharger - Polices de caractères
- Script cmd - Guide
2 réponses
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
Adns
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