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

changement de texte à un endroit précis avec _ onmouseover [résolu] - HTML/CSS - Programmation

Marsh Posté le 26-10-2007 à 22:48:15    

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
Reply

Marsh Posté le 26-10-2007 à 22:48:15   

Reply

Marsh Posté le 27-10-2007 à 00:55:53    

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
Reply

Marsh Posté le 27-10-2007 à 14:07:50    

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
Reply

Marsh Posté le 29-10-2007 à 12:15:59    

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 ;)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed