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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [résolu] changement de texte à un endroit précis avec _ onmouseover

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[résolu] changement de texte à un endroit précis avec _ onmouseover

n°1632012
le_phoenix
Posté le 26-10-2007 à 22:48:15  profilanswer
 

Bonjour!
 
J'aimerais que dons mon site, quand je survole des icones une description apparaisse dans un tableau, sous forme de texte dynamique.
J'ai essayé d'utiliser du code javascript trouvé sur internet, mais il y a un problème...
 
Pouvez vous m'aider SVP?
 
Liens:

Code :
  1. <a href="javascript:;" onmouseover='changetext("description,1" )'><img src="boutons/forum.jpg" width="51" height="43" border="0"></a>
  2. <a href="javascript:;" onmouseover='changetext("description,2" )'><img src="boutons/videos.jpg" width="51" height="43" border="0"></a>


 
zone changement de texte

Code :
  1. <td id='description' colspan="3" rowspan="2" bgcolor="#000000">
  2. <script type='text/javascript'>
  3. function changetext(id,choix)
  4. {
  5. if(choix==1){
  6. area = document.getElementById(id);
  7. area.innerHTML="texte1";
  8.  }
  9. if(choix==2){
  10. area = document.getElementById(id);
  11. area.innerHTML="texte2";
  12.  }
  13. }
  14. </script>
  15. texte 0
  16. </td>


Message édité par le_phoenix le 29-10-2007 à 12:05:15
mood
Publicité
Posté le 26-10-2007 à 22:48:15  profilanswer
 

n°1632048
gatsu35
Blablaté par Harko
Posté le 27-10-2007 à 00:55:53  profilanswer
 

Code :
  1. <a onmouseover='changetext("description,1" )'>


tu te plantes avec les guillemets, tu fous tes 2 parametres entre guillement donc ta fonction ne recoit qu'un seul parametre du coup
ben ca plante :D
donc il faut faire ceci :

Code :
  1. <a onmouseover="changetext('description',1 )">



Message édité par gatsu35 le 27-10-2007 à 00:56:06
n°1632125
le_phoenix
Posté le 27-10-2007 à 14:07:50  profilanswer
 

Merci!
 
En effet maintenant ça fonctionne très bien! Je me doutais que ce n'était pas grand chose, mais ça suffit pour tout faire planter...
alors merci pour cette rectification Gatsu35!
 
Pour ceux que ça intéresserait de pouvoir changer le texte à un endroit précis de la page en passant la souris sur une image,  
voici le code correct:
 
Tout d'abord placez ce script entre <head> et </head> :  

Code :
  1. <script type='text/javascript'>
  2. function changetext(id,choix)
  3. {
  4. if(choix==1){
  5. area = document.getElementById(id);
  6. area.innerHTML="texte1";
  7.  }
  8. if(choix==2){
  9. area = document.getElementById(id);
  10. area.innerHTML="texte2";
  11.  }
  12. }
  13. </script>


if(choix==1) correspond à la première image avec la fonction changetext qui a comme 2e paramètre "1"
choix==2 >> image avec le paramètre 2
etc...
 
Deuxième étape, faire le lien sur l'image à survoler (ou un texte ou un tableau...)
 
pour des images:

Code :
  1. <a href="javascript:;" onmouseover="changetext('textdynamic',1)"><img src="image1.jpg" ></a>
  2. <a href="javascript:;" onmouseover="changetext('textdynamic',2)'><img src="image2.jpg"></a>


ajoutez autant de fois la ligne que vous voulez, en changeant bien le numéro à chaque fois!
Pour ajouter un lien cliquable, rajouter un événement onclick
 
 
Pour changer le texte dans la page, ajoutez une id à un objet (cellule, span, div, etc...).
Cette id doit porter le même nom que le premier paramètre de la fonction dans le lien (ici ma zone s'appelle description, mais vous pouvez choisir un autre endroit de la page et donner une autre id)
 
exemple:
zone changement de texte 1 = endroit de la page avec position absolue
 :non: bien utiliser à chaque fois la balise SPAN sinon ce ne sera pas compatible avec IE
 

Code :
  1. <span id="textdynamic" style="position:absolute; left:263px; top:123px; width:294px; height:186px; z-index:5; visibility: visible">
  2. ici se trouve le texte (html) avant qu'il soit changé par le passage de la souris sur les images <br>
  3. vous pouvez y mettre des images ou tout ce que vous voulez en format html!
  4. </span>


 
 
zone changement de texte 2 = autre endroit n'importe où dans la page: (à mettre par exemple à l'intérieur d'un tableau, ou n'importe où!!!)

Code :
  1. <span id='zone2' >
  2. <b>passez la souris sur l'une des icones</b>
  3. </span>


En n'oubliant pas de mettre dans le lien:
onmouseover="changetext('zone2',1)"


Message édité par le_phoenix le 29-10-2007 à 12:13:26
n°1632803
le_phoenix
Posté le 29-10-2007 à 12:15:59  profilanswer
 

J'ai corrigé un problème d'incompatibilité avec Internet Explorer.
 
Apparemment avec IE, seule la balise SPAN permet une bonne éxécution du script, si on met <td id='zone2'> ça ne fonctionne qu'avec Firefox!
 
Je mettrai bientôt une page d'exemple ;)


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [résolu] changement de texte à un endroit précis avec _ onmouseover

 

Sujets relatifs
vba - userform - composant calendrier RESOLU[RESOLU] ouverture et fermeture d'une popup
[SQL,ORACLE]Message d'erreur mutating, trigger....(RESOLU)[Résolu] Fonction allergique à une requête MySQL
[Resolu] Problème sur realbox[Résolu] Soucis avec toggle Javascript
[Résolu] Lister les fichiers d'un dossier[résolu] Recherches parallèles LDAP
[resolu]Affichier resultat de ma requete dans un cadre de ma page PHPCréer un texte dont chaque mot pointe vers une note.
Plus de sujets relatifs à : [résolu] changement de texte à un endroit précis avec _ onmouseover


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