Retour à Forum de programmation

Changement de style avec onMouseOver

  • pompei
  • Graduate
  • Graduate
  • No Avatar
  • Inscription: Déc 19, 2003
  • Messages: 117
  • Status: Offline

Message Mars 28th, 2004, 6:40 am

Salut,

Donc je peux faire des trucs faciles comme ceci:

Code: [ Select ]
<tr onMouseOver=this.style.backgroundColor='#DBDDDE'>


de sorte que lorsque la souris passe sur cette ligne de tableau particulier, son contexte change de couleur.

Mais comment puis-je obtenir effectivement une ligne de table différente pour modifier ses couleurs quand je vais sur une ligne? par exemple

Code: [ Select ]
<tr name='highlightme'><td>Some stuff in here
<tr onMouseOver=gettherowwithnamehighlightme.style.backgroundColor='#DBDDDE'><td>Some stuff in here that highlights row above when mouse over it
  1. <tr name='highlightme'><td>Some stuff in here
  2. <tr onMouseOver=gettherowwithnamehighlightme.style.backgroundColor='#DBDDDE'><td>Some stuff in here that highlights row above when mouse over it


J'ai pensé qu'il pourrait être atteint en nommant la suite, mais je ne sais pas comment obtenir la carte des changements à la ligne nommée.

Quelqu'un connaît la bonne syntaxe?

Merci pour toute aide
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Mars 28th, 2004, 6:40 am

  • rtm223
  • Mastermind
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Mar 24, 2004
  • Messages: 1855
  • Loc: Uk
  • Status: Offline

Message Mars 28th, 2004, 7:11 am

Tout d'abord, fermez toujours votre tags (si vous faites cela, mais étaient trop paresseux lors de la publication de bonne guerre :wink: )

essayez le code suivant:

Code: [ Select ]
<TR ID="colorChanger">
    <TD>Some Text here</TD>
    <TD>Some more text here</TD>
</TR>
<TR onMouseOver="document.getElementById('colorChanger').style.backgroundColor='#ff0000'">
    <TD >MouseOver here or</TD>
    <TD>Here to change color</TD>
</TR>
  1. <TR ID="colorChanger">
  2.     <TD>Some Text here</TD>
  3.     <TD>Some more text here</TD>
  4. </TR>
  5. <TR onMouseOver="document.getElementById('colorChanger').style.backgroundColor='#ff0000'">
  6.     <TD >MouseOver here or</TD>
  7.     <TD>Here to change color</TD>
  8. </TR>


La raison Ive utilisé
document.getElementById ( "colorChanger")
c'est parce que son seul moyen que j'ai trouvé qui fonctionne toujours dans tous les navigateurs et ne me donne pas un mal de tête gif "alt =": D "title =" très heureux "/>
(il existe des raccourcis qui peuvent être utilisés, mais certains travaux dans IE et pas Netscape etc - Je viens de s'en tenir à cette façon de faire.)
Hope this helps you out.

Méfiez-vous des casse des caractères.
  • pompei
  • Graduate
  • Graduate
  • No Avatar
  • Inscription: Déc 19, 2003
  • Messages: 117
  • Status: Offline

Message Mars 28th, 2004, 7:36 am

Merci beaucoup rtm223!

Après avoir fouillé le net depuis un certain temps, j'ai finalement compris une version qu'on utilise

Code: [ Select ]
onMouseOver=document.all['idname'].style.backgroundColor='#DBDDDE'


mais j'ai été prochain va demander si cela était compatible tous navigateurs autres que IE. Mais bien sûr, vous étiez déjà en avance sur le jeu et a recommandé la getElementById lieu :D
  • gsv2com
  • Professor
  • Professor
  • Avatar de l’utilisateur
  • Inscription: Jan 25, 2004
  • Messages: 776
  • Loc: Nippon
  • Status: Offline

Message Mars 28th, 2004, 7:39 am

html si votre minuscules.
  • rtm223
  • Mastermind
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Mar 24, 2004
  • Messages: 1855
  • Loc: Uk
  • Status: Offline

Message Mars 28th, 2004, 7:54 am

howcome minuscules html? :?

J'ai pensé qu'il était insensible à la casse et il a été simplement une personl chose (ou est-ce quelque chose qui est censé être, mais les navigateurs ne sont pas pris)?
J'ai tendance à utiliser les majuscules, de sorte que la structure (tags) de la page se détache plus.

EDIT / / plus valide, il sort sur la validation du w3c?
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Inscription: Fév 10, 2004
  • Messages: 13455
  • Loc: Florida
  • Status: Offline

Message Mars 28th, 2004, 11:29 am

RTM, essayez de valider une page XHTML avec onMouseOver w3c, il vous donnera une erreur qui vous fait penser onMouseOver n'existe plus. Maintenant, si vous essayez de valider la même page, mais cette fois avec onmouseover minuscules il valider.
Strong with this one, the sudo is.
  • lostinbeta
  • Guru
  • Guru
  • Avatar de l’utilisateur
  • Inscription: Juin 26, 2003
  • Messages: 1402
  • Loc: Philadelphia, PA
  • Status: Offline

Message Mars 28th, 2004, 11:36 am

XHTML est plus strict que le HTML, toutes les balises et attributs doivent être écrites en minuscules.

BTW: Je tiens à utiliser quelque chose comme cela pour la situation ..

Code: [ Select ]
<html>
<head>
<style>
.norm { background-color: #FFD0A0 }
.over { background-color: #D0F0FF }
</style>
</head>
<body>

<table width="100" border="0"><tr>
  <td class="norm" onmouseover="this.className='over'" onmouseout="this.className='norm'">Rollover me</td>
</tr></table>

</body>
</html>
  1. <html>
  2. <head>
  3. <style>
  4. .norm { background-color: #FFD0A0 }
  5. .over { background-color: #D0F0FF }
  6. </style>
  7. </head>
  8. <body>
  10. <table width="100" border="0"><tr>
  11.   <td class="norm" onmouseover="this.className='over'" onmouseout="this.className='norm'">Rollover me</td>
  12. </tr></table>
  14. </body>
  15. </html>
  • rtm223
  • Mastermind
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Mar 24, 2004
  • Messages: 1855
  • Loc: Uk
  • Status: Offline

Message Mars 28th, 2004, 12:47 pm

ah HA! Ainsi, il est valide HTML :D * Est-ce que la danse d'être peu à droite à cause d'une technicallity *

Plus sérieusement, Im heureux qui ont été, auraient confondu l'enfer de moi quand je commence à avoir sur XHTML, si vous remercie d'avoir fait cela.

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 8 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 122 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC