11540 sujets

JavaScript, DOM et API Web HTML5

Aucun effet Jquery sur ma page

Bonjour tout le monde!

J'ai beaucoup cherché et trouvé des réponses pouvant correspondre à mon problème mais je n'ai toujours pas trouvé la solution. Donc je suis venue demander de l'aide ici Smiley smile

Je crée un site web avec des images sur la page d'accueil et j'aimerais que lorsqu'on passe la souris sur l'image, une étiquette en forme de triangle apparaît. Mon triangle est là au chargement de la page. alors qu'il devrait être caché et apparaître seulement lorsque ma souris est sur l'image.

J'imagine que j'ai du faire un mauvais lien quelque part entre mes différents documents ?

Voilà l'extrait de mon code qui pose problème:

Le docuement HTML:
<!DOCTYPE html>
<html>

    <head>
    	<link rel="stylesheet" type="text/css" href="style.css" />
    	<meta charset="utf-8" />
    	<script type='text/javascript' src='script.js'></script>
        <title>Tram d'histoire</title>
    </head>
	

    <body>

    	<div class="up"></div>
    	
    	<div id="etiquettes"> </div>
    	
    	<div class="tramhistoire">
    	<a href="tramhistoire.html" > <img src="img/tramhistoire.png" border="0"/>
    	</div>


Le docuement CSS:

#etiquettes{
	-ms-transform: rotate(-45deg); /* Internet Explorer */
	-moz-transform: rotate(-45deg); /* Firefox */
	-webkit-transform: rotate(-45deg); /* Safari et Chrome */
	-o-transform: rotate(-45deg); /* Opera */
	font-size: 0px; line-height: 0%; width: 0px;
	border-top: 75px solid #e60233;/* couleur du triangle*/
	border-left: 75px solid transparent; 
	border-right: 75px solid transparent; 
	position: absolute;
	top: 348px;
	left:171px;
}


Le docuement jQuery:

$(document).ready(function() {
    $("#etiquettes").mouseover(function() {
	$(this).slideToggle('slow');
});


J'espère que vous arriverez à m'aider.

Bonne journée à tous!
Modérateur
Bonjour,


Rapidement comme ça je vois 2 soucis :

1) Ton étiquette n'est pas masquée dès le début donc normal qu'elle apparaisse.... un display:none; s'impose....

2) Tu n'inclus pas la bibliothèque JQuery. Ton code JQuery ne peut pas fonctionner comme ca par lui meme ! Smiley ravi exemple : 
<script src="js/jquery-1.11.0.min.js"></script>
en local ou bien en distant 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
à placer avant ton code qui utilise Jquery...
cf : http://jquery.com/download/
Modifié par _laurent (17 Dec 2014 - 14:51)
Sujet clos
Aller à