j'ai deux problèmes le premier je n'arrive pas à faire une fonction Jquery fonctionnelle avec deux paramètres (image et titre) qui me permettra de ne pas traiter image par image. Je vous transmets le code en dessous
Le second problème est un problème de positionnement quand je passe ma souris sur une image j'aimerais que celle-ci ce lève légèrement pour afficher le titre juste en dessous. Le souci c'est que les images qui sont à coté descende je vous donne le lien d'un screen vidéo que j'ai fait qui sera plus simple pour voir le souci. Je pense que ça viens du tableau mais je ne sais pas comment régler le souci.
lien de la vidéo : https://www.youtube.com/watch?v=x1i01ii ... e=youtu.be
code :
- Code: Tout sélectionner
<html>
<head>
<link rel ="stylesheet" type="text/css" href="style.css">
<script src="jquery.js"></script>
</head>
<body>
<?php
include ("menu.php");
?>
<table align="center">
<tr>
<td id="01"> <img src="01.jpg" title="img1" class="img_menu"> <div id="test1" align="center" class="title">Titre</div> </td>
<td id="02"> <img src="01.jpg" title="img2" class="img_menu"> <div id="test2" align="center" class="title">Titre</div> </td>
<td id="03"> <img src="01.jpg" title="img3" class="img_menu"> <div id="test3" align="center" class="title">Titre</div> </td>
</tr>
</table>
<script src="jquery.js"></script>
<script>
$(function() {
//Disparition des titres
$('#test1').hide();
$('#test2').hide();
$('#test3').hide();
//Animations IMAGES
$('[title="img1"]').mouseenter(function() { //au survol de l'image
$('#test1').fadeIn('slow');
});
$('[title="img1"]').mouseout(function() { //au survol de l'image
$('#test1').hide();
});
$('[title="img2"]').mouseenter(function() { //au survol de l'image
$('#test2').fadeIn('slow');
});
$('[title="img2"]').mouseout(function() { //au survol de l'image
$('#test2').hide();
});
$('[title="img3"]').mouseenter(function() { //au survol de l'image
$('#test3').fadeIn('slow');
});
$('[title="img3"]').mouseout(function() { //au survol de l'image
$('#test3').hide();
});
//TRANSPARENCE IMAGES
$('[title="img1"]').mouseenter(function() { //au survol de l'image
$('[title="img1"]').fadeTo('slow','0.5'); //pour afficher lentement peux aussi faire avec des valeurs genre 4000
});
$('[title="img1"]').mouseout(function() { //au survol de l'image
$('[title="img1"]').fadeTo('slow','1');
});
});
</script>
</body>
</html>
