11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Probleme copier/coller HTML + mouseover et Joomla

Bonjour à tous,

J'ai un petit problème.

Je m'essaye en javascript avec le mouseover. J'ai utilisé dreamweaver pour faire des essais de code.
J'ai reussi à obtenir se que je voulais j'ai donc copier/coller le code et je le colle dans joomla (source) mais joomla me change le code et apparement la balise <a> ne lui plaie pas.

Vous trouverez mon code ci dessous :

span.mouseover {
font-size:20px;
padding-top:50px;

}

a.mouseover {
text-decoration:none;
}

a.mouseover :hover {
text-decoration:underline;
color:#FFFFFF;
background-image:none;

}




<div align="center">
<table width="716" height="185px">
<tbody>
  <tr width="716">
    <th width="238" align="center"><a class="mouseover" href="www.ei-technologies.com"><div style="width:168px; height:162px; border:solid 1px #e4e4e7; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; padding-top:20px; line-height:150%;"
    onmouseover="this.innerHTML='ECM <br/> Salesforce <br/> Architecture <br/> Sharepoint <br/> Réseaux Sociaux'; this.style.backgroundColor='#DCB5D2';" 
    onmouseout="this.innerHTML='<span class=mouseover>Transformation Numérique</span>'; this.style.backgroundColor='#B56AA4';"> 
</div> </a></th>
    <th width="238" align="center"><a class="mouseover" href="www.ei-technologies.com"><div style="width:168px; height:162px; border:solid 1px #e4e4e7; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; padding-top:20px; line-height:150%;"
    onmouseover="this.innerHTML='Tests <br/> Méthodologies <br/> Automatisation <br/> Industrialisation <br/> Performance'; this.style.backgroundColor='#CBD86B';" 
    onmouseout="this.innerHTML='<span class=mouseover>Qualité</span>'; this.style.backgroundColor='#A4C400';"> 
</div> </a></th>
    <th width="238"  align="center"><a class="mouseover" href="www.ei-technologies.com"><div style="width:168px; height:162px; border:solid 1px #e4e4e7; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; padding-top:20px; line-height:150%;"
    onmouseover="this.innerHTML='Audit de maturité <br/> Sourcing <br/> Alignement métiers <br/> Conduite du changement'; this.style.backgroundColor='#9CD2DC';" 
    onmouseout="this.innerHTML='<span class=mouseover>Conseils<br/>aux DSI</span>'; this.style.backgroundColor='#40B9C7';"></div> </a></th>
  </tr>
</tbody>
</table>
</div>


Pouvez vous me dire pourquoi Joomla change mon code? il y a peut être des erreurs. Je ne comprends pas aussi car avec dreamweaver dans le navigateur ça fonctionne bien.

Merci de votre aide.

Ln Smiley biggrin
Modifié par Ln4 (23 Dec 2014 - 15:27)
Bonjour,

Je ne connais pas particulièrement Joomla, mais pour des raison de sécurité (faille xss) il faut nettoyer le code html à chaque fois que l'utilisateur peut en insérer.
Le js sera la première chose que l'on supprimera.
Tu veux faire une infobulle c'est cela ?
Tu trouveras plein de ressources sur le net pour le faire via uniquement css ou avec par exemple un plugin jquery que tu auras mis en place dans le template de ton site.
Ce n'est pas une info bulle, c'est un rectangle de couleur avec un terme dedans et quand du passe la souris la couleur change et d'autres mots apparaissent et c'est cliquable.

Je vais chercher sur le net mais je ne sais pas comment s'appelle cette fonction donc c'est assez dure de trouver, j'ai juste trouvé que ça pouvait s'appeler "onmouseover".

Merci de ton aide et bonnes fêtes !
Sujet clos
Aller à