Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2289 connectés 

  FORUM HardWare.fr
  Programmation
  Divers

  Passer souris sur photo pour afficher une image dans un cadre

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Passer souris sur photo pour afficher une image dans un cadre

n°1604649
Yogan94
Posté le 27-08-2007 à 17:25:06  profilanswer
 

Bonjour,
 
Je suis débutant. Après avoir un peut surfer sur le net, j'ai découvert le rollover à distance.
J'aimerais disposer sur le côté droit de ma page web 5 photos (type identité) 2 sur la première rangée et 3 sur la seconde.
Entre les deux rangées je souhaiterais mettre un cadre dans lequel s'afficherait un petit texte (une image associée à chaque portrait).
 
Pourriez-vous m'aider à m'en sortir..
 
 
Merci d'avance
 
Bien cordialement,
 
Yogan

mood
Publicité
Posté le 27-08-2007 à 17:25:06  profilanswer
 

n°1604653
durkheim
Posté le 27-08-2007 à 17:33:33  profilanswer
 

Ok, le plus propre est de le faire en css, mais je suis pas convaincu que ce soit le plus simple.

 

En javascript, il faut que tu donnes à ton cadre un id, je suppose ici que c'est un div:

Code :
  1. <div id="texteperso"> </div>
 

Ensuite pour chaque photo tu déclares une fonction appellée lors du passage de la souris:

 
Code :
  1. <img src="ma photo.jpg" alt="ma photo" onMouseOver="fonction('texte associé');"/>
  2. <img src="autre photo.jpg" alt="autre photo" onMouseOver="fonction('autre texte associé');"/>
 

Tu déclares ensuite une fonction javascript qui met le texte qui va bien la ou il faut:

Code :
  1. <script type="text/javascript">
  2. fonction(texteamettre)
  3. {
  4. document.getElementById('texteperso').value=texteamettre;
  5. }
  6. </script>
 

Et voilou. J'ai codé ça de tête alors je garantit pas la syntaxe au micropoil près, mais sinon ça devrait marcher.

 

Edit: si jamais le truc à mettre dans le cadre est une image et pas un texte, il suffit d'éditer la fonction javascript, d genre:

 
Code :
  1. <script type="text/javascript">
  2. fonction(texteamettre)
  3. {
  4. document.getElementById('texteperso').innerHtml='<img src='+texteamettre+'.jpg'/>';
  5. }
  6. </script>

Message cité 1 fois
Message édité par durkheim le 27-08-2007 à 17:37:24
n°1604690
Yogan94
Posté le 27-08-2007 à 18:09:20  profilanswer
 

Merci bcp, j'essaierai demain.
Bonne soirée
 

durkheim a écrit :

Ok, le plus propre est de le faire en css, mais je suis pas convaincu que ce soit le plus simple.
 
En javascript, il faut que tu donnes à ton cadre un id, je suppose ici que c'est un div:

Code :
  1. <div id="texteperso"> </div>


 
Ensuite pour chaque photo tu déclares une fonction appellée lors du passage de la souris:
 

Code :
  1. <img src="ma photo.jpg" alt="ma photo" onMouseOver="fonction('texte associé');"/>
  2. <img src="autre photo.jpg" alt="autre photo" onMouseOver="fonction('autre texte associé');"/>


 
Tu déclares ensuite une fonction javascript qui met le texte qui va bien la ou il faut:

Code :
  1. <script type="text/javascript">
  2. fonction(texteamettre)
  3. {
  4. document.getElementById('texteperso').value=texteamettre;
  5. }
  6. </script>


 
Et voilou. J'ai codé ça de tête alors je garantit pas la syntaxe au micropoil près, mais sinon ça devrait marcher.
 
Edit: si jamais le truc à mettre dans le cadre est une image et pas un texte, il suffit d'éditer la fonction javascript, d genre:
 

Code :
  1. <script type="text/javascript">
  2. fonction(texteamettre)
  3. {
  4. document.getElementById('texteperso').innerHtml='<img src='+texteamettre+'.jpg'/>';
  5. }
  6. </script>




Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Divers

  Passer souris sur photo pour afficher une image dans un cadre

 

Sujets relatifs
afficher/caché du texte...[resolved]Création d'une image pour valider un formulaire
Labelisation image binaire (apres seuillage)Afficher sur une page web directement le resultat d'une autre page web
Taille d'image avec fo:external-graphicchanger le curseur de la souris
probleme d'image sur un titre (html+css)executer une page php sans rien afficher
Animation photo sur site internetRecherche script de modification et sauvegarde d'image
Plus de sujets relatifs à : Passer souris sur photo pour afficher une image dans un cadre


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR