18010 sujets

Questions générales et questions de débutants

[Résolu] Liens qui ne fonctionnent pas - javascript

Bonjour,

J'aimerais avoir quelques conseils car je n'arrive pas à résoudre mon problème toute seule.

Depuis que j'ai ajouté du javascript à mon code, des liens que j'avais fait sur des images ne fonctionnent plus.

C'est la première fois que j'utilise javascript, peut-être que quelque chose de simple m'échappe.
Je vous remercie de bien vouloir me donner un coup de main Smiley smile

Voici mon javascript : 

$(document).ready(function() {
       
        var move = -15;
        var zoom = 1.2;
 
        $('.item').hover(function() {
            
          
            width = $('.item').width() * zoom;
            height = $('.item').height() * zoom;
            
            
            $(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
            $(this).find('div.caption').stop(false,true).fadeIn(200);
        },
        function() {
             
            $(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});  
            $(this).find('div.caption').stop(false,true).fadeOut(200);
        });
    });


La partie html de mes liens : 
<div class="item">
        <a href="pages/raconteuneville.html"><img src="images/tampon.png" alt="raconteuneville" title="" width="250" height="200"/></a>
        <div class="caption">
            <a href="">RACONTE UNE VILLE</a>
            <p>Tampons<br>Participatif</br></p>
        </div>
    </div>


La partie css : 
.item {
      text-align: center;
        width: 250px;
        height:200px;    
        margin-left: 30px;
        margin-bottom:30px;
        overflow:hidden; 
        position:relative;
        float:left;
    }

    .item .caption {
        width: 250px;
        height:200px;
        background:#000;
        color:#fff;
        position:absolute;
        left:0;
        display:none;
        filter:alpha(opacity=80);
        -moz-opacity:0.8;
        -khtml-opacity: 0.8; 
        opacity: 0.8;
    }
    .item .caption a {
        text-decoration:none;
        color:49FFEB;
        font-size: 15px;
        font-weight: lighter;   
        padding:30px;
        display:block;
    }
    .item .caption p {
        font-weight: lighter;
        padding:5px;
        line-height:15px;    
        margin:0;
        font-size:12px;
    }
    .item img {
        border:0;
        position:absolute;
    }
    
    .clear {
        clear:both;    
    }



Je vous remercie pour votre aide
Salut jujubey,

Je ne suis pas sûr du résultat que tu souhaites obtenir, cependant l'ensemble du code JS (utilisant jQuery) peut être fait beaucoup plus simplement avec les transitions CSS3.

J'ai repris un peu ton code, l'ai allégé et je n'ai pas utilisé du tout de JS.
Voici le code : 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Test hover</title>
	<style type="text/css">
	.item {
		display: block;
      	text-align: center;
        width: 250px;
        height:200px;    
        margin-left: 30px;
        margin-bottom:30px;
        overflow:hidden; 
        position:relative;
        float:left;
    }
    .item img {
        border: none;
        transition: transform 0.2s;
    }
    .item:hover img{
    	transform: scale(1.2);
    }
    .item:hover .caption{
    	opacity: 0.8;
    }

    .item .caption {
    	text-decoration: none;
    	display: block;
        width: 250px;
        height:200px;
        background:#000;
        color:#fff;
        position:absolute;
        left:0;
        top: 0;
        filter:alpha(opacity=0);
        -moz-opacity:0;
        -khtml-opacity: 0; 
        opacity: 0;
        transition: opacity 0.2s;
    }
    .item .caption h3 {
        text-decoration:none;
        color: #49FFEB;
        font-size: 15px;
        font-weight: lighter;   
        padding:30px;
        display:block;
    }
    .item .caption p {
        font-weight: lighter;
        padding:5px;
        line-height:15px;    
        margin:0;
        font-size:12px;
    }
    
	</style>
</head>
<body>
<a class="item" href="http://lorempixel.com/output/city-q-c-250-200-6.jpg">
  <img src="http://lorempixel.com/output/city-q-c-250-200-6.jpg" alt="raconteuneville" width="250" height="200"/>
  <div class="caption">
    <h3>RACONTE UNE VILLE</h3>
    <p>Tampons<br>Participatif</p>
  </div>
</a>

</body>
</html>

Et ci dessous un lien vers une démo avec 3 blocs :
http://matthieurebillard.fr/test/hover-css.html

Je te laisse regarder ça et reviens vers moi si ça répond à ton besoin (ou pas).
Depuis HTML5, les balises <a> peuvent contenir tout ce que tu veux.
Mieux vaut opter pour "transform: scale()" pour les transformations centrées.
Utilise les transitions CSS, c'est cool !

Bonne soirée
Matthieu
Modifié par MatthieuR (26 Oct 2014 - 22:58)
Whouaa mais c'est super !!
Ça simplifie les choses pour le même résultat. Je vais me renseigner un peu plus sur les transitions css
Merci beaucoup Matthieu pour ton aide précieuse Smiley smile
Sujet clos
Aller à