Il y a actuellement 71 visiteurs
Vendredi 30 Juillet 2021
accueilactualitésdossierscomparer les prixtélécharger gratuitement vos logicielsoffres d'emploiforum informatique
Connexion
Créer un compte

Positionnement et Fonction Jquery

Besoin d'aide pour configurer un serveur ? Vous souhaitez obtenir des conseils pour référencer votre site ? Un petit souci pour accéder à votre FTP ? Des soucis de programmation en PHP / ASP / HTML / XHTML / XML / XSLT / CSS / ReactJS / AngularJS / VueJS / CGI / PERL / C / MySQL / PostgreSQL ??? Nous avons peut-être la solution dans ce forum ...

Positionnement et Fonction Jquery

Message le 09 Mar 2015 20:30

Bonjour,

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>

jedeb
Visiteur
Visiteur
 
Messages: 6
Inscription: 16 Mar 2014 22:10
 


Re: Positionnement et Fonction Jquery

Message le 23 Mar 2015 13:43

Bonjour,

Voici une piste :

HTML
Code: Tout sélectionner
<div id="gallerie">
  <a class="lien" href="/page/page1.html"> Titre 1</a>
  <img src="/images/photo1"/>
</div>

<div id="gallerie">
  <a href="/page/page2.html"> Titre 1</a>
  <img class="lien" src="/images/photo2"/>
</div>


CSS

Code: Tout sélectionner
#gallerie { width:100px; height:100px; position:relative; }
#gallerie a { position:absolute; bottom:0; left:0; }


Jquery

Code: Tout sélectionner
$(document).ready(function(){

$(".lien").hover(function(){

  $(this).animate({'margin-top' : '-15px'})

});

});

Ne pas faire demain ce que tu peux faire aujourd'hui !!!
Image
Avatar de l'utilisateur
webdesigner
PC-Infopraticien
PC-Infopraticien
 
Messages: 3376
Inscription: 13 Aoû 2008 13:46
Localisation: Vernou la Celle sur Seine
 



Sujets similaires

Message Fonction "Recherche" Windows 7.
Bonjour.J'ai une problématique avec la fonction "Recherche" sous Windows 7. Celle-ci ne me trouve que les programmes et pas les fichiers personnels.J'avais ouvert un topic ici sur ce forum où l'on m'a conseillé de faire cette analyse et de la poster ici dans ce topic.Voici le lien de mon t ...
Réponses: 12

Message Fonction "Rechercher" défectueuse.
Bonjour à chacune et à chacun.Si vous me le permettez, j'aurais une question à vous soumettre sur une problématique concernant l'informatique. Cette problématique concerne la fonction "Rechercher".Chaque fois que je recherche un fichier, seuls les fichiers des programmes sont reconnus. J'e ...
Réponses: 5

Message Fonction restreinte pour acceder à un forum.
BonjourJe suis inscrit sur un forum de discussion (géré par forumactif)Je peux me connecterJe peux répondre aux discussions mais sans pouvoir modifier les messages (mettre B i etc)Je peux recevoir un message privé mais sans pouvoir y répondre ni en envoyer un à un autre utilisateur.Je ne peux plus c ...
Réponses: 11

Message Fonction "Alt" devenue inactive
Bonjour !J'ai créé deux sites dont l'un pour mes camarades de promotion: p24.fr.Je ne suis pas un expert en html et une page de ce site fonctionnait bien, il s'agit de la "répartition sur le territoire" (France.html).A l'aide de la fonction "Alt", si le curseur de la souris passa ...
Réponses: 2

Message Conseil pour achat pc en fonction du futur
Bonjour à tous!Je sais, le titre peut paraître bizarre mais je suis un peu indécis quant à mon futur achat.Je sais qu'en 2016 doit sortir une génération intermédiaire de cg chez nvidia, et qu'ensuite il faut attendre 2018 pour une vraie nouvelle génération (de ce que j'ai compris).Du coup, je ne sai ...
Réponses: 6

Message jQuery: créer une playlist vidéos
Bonjour,Je cherche à mettre en place sur mon site Internet un lecteur vidéo accompagné à sa droite de la playlist des vidéos d'une chaîne youtube. Si ce n'est pas clair voici un exemple de ce que je cherche à faire: http://ibacor.com/demo/jquery-youtube-channels-playlistCe site qui met à disposition ...
Réponses: 0

Message onclick + onload en jQuery
Bonjour,J'ai cette superbe fonction :Code: Tout sélectionner<script type="text/javascript" language="Javascript">    head.js("http://code.jquery.com/jquery-1.9.0.min.js",      function(){         $(f ...
Réponses: 2


Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité


.: Nous contacter :: Flux RSS :: Données personnelles :.