Paumé entre CSS et TPL(??): une aide dans mon code?

Répondre
 
Partager Rechercher
Bonjour à tous!

Étant en train de refaire un forum, j'ai décidé de passer au Xooit qui m'a souvent été conseillé.

1ere impression positive: J'ai la sensation d'être vraiment très libre dans la personnalisation du forum.... à condition de travailler sur CSS.
Ça tombe bien, j'éprouve beaucoup de plaisir à m'y mettre.

Comme je suis complètement novice, je lis avec beaucoup d'attention les cours du Site du Zéro qui s'avère être une mine d'information précieuses.
Hélas, ça ne m'empêche pas d'être parfois complètement paumé.

(Au passage c'est quoi un format.TPL?)


Voici ce que je veux faire:

Des boutons du menu principal ("main menu") en haut des pages du forum. Je veux que chacun réagisse au survol de la souris ("mouseover") pour changer d'apparence et afficher une infobulle ("tooltip") décrivant la nature du bouton survolé.
Exemple en image:

Bouton sans survol:

mbnormarmes-115df21.gif

Bouton survolé:

mbenfarmes-115dfe6.gif



Quand il est survolé, la tooltip apparaît:

"FAQ
Frequently Asked Question
Il répond à bien des questions!"

Maintenant voici la phrase d'origine sur le overall_header.tpl:

Code HTML:
<span class="mainmenu">&nbsp;<a href="{U_FAQ}" class="mainmenu"><img src="http://img9.xooimage.com/files/i/c/icon_mini_faq-348a6.gif" border="0" alt="{L_FAQ}" hspace="3" />{L_FAQ}</a></span>
Puis voici la version Tooltip:

Code HTML:
<span class="mainmenu">&nbsp;
<a href="{U_FAQ}" class="tooltip"><img src="http://img5.xooimage.com/files/9/b/2/mbnormarmes-115df21.gif" border="0"><em><span>F.A.Q.</span><br><br>Frequently Asked Question<br>Il répond &agrave; bien des questions!<br>L'image n'est pas la bonne<br> et pas de rollover ici.</em></a>
Pas de souci, elle s'affiche correctement après avoir placé dans le fichier.CSS:
Cliquez ce bouton ou survolez le contenu pour afficher le spoiler
Code HTML:
a.tooltip em {
     display:none;
 }
 a.tooltip:hover {
     border: 0; 
     position: relative; 
     z-index: 500; 
     text-decoration:none;
 }
 a.tooltip:hover em {     
     font-style: normal;
     display: block; 
     position: absolute; 
     top: 20px; 
     left: -10px; 
     padding: 5px; 
     color: #71ffc1; 
     border: 2px solid #ffe83b; 
     background: #000344; 
     width:300px;
     -moz-border-radius:12px;
 }
 a.tooltip:hover em span {
     font-weight: 
     bold;font-size: 16px;
     color: #ffe83b;
     position: absolute; 
     top: 7px; 
     left: 7px;
     height: 20px; 
     width: 290px; 
     background: url('http://img7.xooimage.com/files/7/d/5/testpourfondfun-1140bf0.gif'); 
     margin:0; 
     padding: 0; 
     border: 3px solid #000226;
 } 
a.


Voici maintenant un test de mouseover qui fonctionne (si j'efface ma demande de tooltip) malgré l'absence de <script> qui permet l'affichage du bouton à l'arrivée sur la page (je ne sais pas encore très bien comment il se gère).

Code HTML:
<a href="{U_FAQ}" onmouseover="monrollover.src='http://img8.xooimage.com/files/b/6/9/mbenfarmes-115dfe6.gif';" onmouseout="monrollover.src='http://img9.xooimage.com/files/c/8/1/mbnormfaq-115aeff.gif';">
    <IMG SRC="monrollover.src='http://img9.xooimage.com/files/c/8/1/mbnormfaq-115aeff.gif" name="monrollover" border="0" alt="{U_FAQ}" name="monrollover"</a>
En effet, le survol de souris fait réagir le bouton.


Pourtant, je n'arrive pas à avoir en même temps un bouton qui réagit au mouseover et qui affiche la tooltip.

J'ai essayé pleins de combinaisons à en perdre tous points de repaires, rien ne va :s Que dois-je faire concrètement?

Merci d'avance à ceux qui auront la patience de me donner un petit coup de main
Lien direct vers le message - Vieux 29/07/2009, 16h09
Télécharger les pièces jointes
Je commence à désespérer.

Voilà plusieurs jours que je cherche à régler ce souci qui semble pourtant très simple.... Autant de jours à piétiner, je me sens vraiment ***. :/

Si je comprends bien l'attribut: "alt" ça sert à décrire un lien ou une image quand elle ne s'affiche pas. Autrement dit, je dois l'employer à faire le lien au cas où mon image ne s'affiche pas grâce à l'emplacement {U_FAQ} par exemple.
C'est pourquoi je l'ai placé pour le rollover.

Mais étant donné que vous êtes deux à mentionner ce fameux "alt" puisque quelqu'un d'autre m'a aussi conseillé de l'ajouter pour la tooltip, j'imagine que quelque chose m'échappe.

J'ai donc fait un test en ajoutant alt="tooltip". Dois-je faire quelque chose de particulier?
Quand tu dis "alt="description" qu'as tu en tête? Car si ça se trouve, c'est de là que vient le problème.

Voici le dernier test que j'ai fait:

Code HTML:
<span class="mainmenu">&nbsp;
<a href="{U_FAQ}" onmouseover="monrollover.src='http://img8.xooimage.com/files/b/6/9/mbenfarmes-115dfe6.gif';" onmouseout="monrollover.src='http://img9.xooimage.com/files/c/8/1/mbnormfaq-115aeff.gif';" alt="tooltip" title="le blabla de l'infobulle">
    <IMG SRC="monrollover.src='http://img9.xooimage.com/files/c/8/1/mbnormfaq-115aeff.gif" name="monrollover" border="0" alt="{U_FAQ}" name="monrollover" alt="tooltip" title="le blabla de l'infobulle"></a></span>
Il y a de grandes chances qu'on s'approche du but mais tel quel, voici ce qui ne va pas:
  • Les images ne s'affichent plus du tout, laissant à la place:
    Code HTML:
    faq.php
  • Title impose une tooltip par défaut, donc sans aucun respect de la mise en forme que j'aurai souhaité avoir.
    Comment puis-je faire appel à la fiche.CSS pour que "title" respecte les attributs de
    Code HTML:
    a.tooltip
    ?
Comme je le disais, je suis vraiment novice, mais surtout, le fait de tourner en rond sur ce problème, à effectué des testes parfois absurdes depuis lundi et à force de consulter des tutos, je me sens de plus en plus ignorant :s

En tout cas merci d'avance pour vos réponses
Lien direct vers le message - Vieux 31/07/2009, 04h54
A priori, à vue de nez, le code pour faire les deux devrait être :
Code HTML:
<a class="tooltip" href="{U_FAQ}" onmouseover="monrollover.src='http://img8.xooimage.com/files/b/6/9/mbenfarmes-115dfe6.gif';" onmouseout="monrollover.src='http://img9.xooimage.com/files/c/8/1/mbnormfaq-115aeff.gif';">
    <IMG SRC="monrollover.src='http://img9.xooimage.com/files/c/8/1/mbnormfaq-115aeff.gif" name="monrollover" border="0" alt="{U_FAQ}" name="monrollover">
        <em><span>F.A.Q.</span><br><br>Frequently Asked Question<br>Il répond &agrave; bien des questions!</em>
    </img>
</a>
Est-ce que tu as essayé ça ? ça fait quoi ?
Sinon, je ne comprends pas la valeur initiale de ton <img src="monrollover.src='http://img9.xooimage.com/files/c/8/1/mbnormfaq-115aeff.gif" [...]>
Le champ src d'une balise ne peut pas contenir de code javascript; la valeur initiale devrait être : <img src="http://img9.xooimage.com/files/c/8/1/mbnormfaq-115aeff.gif" [...]><em><span>F.A.Q.</span><br><br>Frequently Asked Question<br>Il répond &agrave; bien des questions!<br>L'image n'est pas la bonne<br> et pas de rollover ici.</em>

De plus dans ton code il manquait la fermeture de balise >[...]</img>
Revenir à la ligne et indenter correctement le code aide à détecter ce genre de problèmes.

Pour finir, sois conscient que le coup de onmouseover="..." appelle du javascript, et ne fonctionnera donc pas avec un navigateur où javascript est désactivé.
Lien direct vers le message - Vieux 31/07/2009, 10h13
Un grand merci à Alleria sans qui je n'aurai pas réussi à agencer ce code!


Toute la clef du problème se trouvait en fait dans l'accroche:

<a class="tooltip" href="{U_FAQ}" (...)
Et en effet ça fonctionne correctement maintenant:

Code HTML:
<span class="mainmenu">&nbsp;
<a class="tooltip" href="{U_PORTAL}" onmouseover="roll_portal.src='http://img4.xooimage.com/files/8/c/0/mbenfportail-11815dd.gif';" onmouseout="roll_portal.src='http://img1.xooimage.com/files/b/0/3/mbnormport-115dfc2.gif';">
    <IMG SRC="http://img1.xooimage.com/files/b/0/3/mbnormport-115dfc2.gif" name="roll_portal" border="0" alt="{U_PORTAL}" name="roll_portal">
        <em><span>PORTAIL</span><br><br>d'un simple coup d'&oelig;il<br>les nouveaut&eacute;s et des modules</em>
    </img>
</a></span>
Et pour répondre à ta question, le SRC doit se rapporter à mon script.
Par exemple: onmouseover="roll_faq.src='lien de l'image';"


Code HTML:
<head>
<SCRIPT LANGUAGE="Javascript">
       <!--
        roll_faq = new Image();

        roll_faq.src = "http://img2.xooimage.com/files/1/2/c/mbenffaq-1181397.gif";



        roll_portal = new Image();

        roll_portal.src = "http://img4.xooimage.com/files/8/c/0/mbenfportail-11815dd.gif";


   (etc...)
//-->
       </SCRIPT>
</head>
Par contre je ne suis pas capable d'expliquer vraiment le fonctionnement, j'ai juste repiqué cette manip sur ce tuto: Tecfa

Citation :
Pour finir, sois conscient que le coup de onmouseover="..." appelle du javascript, et ne fonctionnera donc pas avec un navigateur où javascript est désactivé.
J'ai la sensation que quel que soit le projet de site qu'on veut mettre en place on est toujours face à ce genre de problèmes :/.Mais si je ne me trompe pas, c'est aussi une raison pour laquelle on doit ajouter "alt="description".

Même si ça ne changera pas grand chose, je pense aménager un espace de conseils pour mieux profiter de l'aspect du forum (en recommandant entre autre Firefox, ou pourquoi pas, en conseillant de télécharger des polices spéciales).


Citation :
Tout dépend si c'est du xhtml ou html (c'est écrit en haut du fichier )
Je confirme que c'est bien du HTML ce qui explique que les règles sont un peu moins strictes.
Au passage merci de m'avoir renseigné sur le .TPL. En effet, je ne comprenais pas cette extension alors qu'en tête le document nous étions censé être en HTML.





Maintenant qu'une partie du problème est résolue, je me permets juste de vous demander:

Comment, dans cette même logique, je peux avoir une image et tooltip adéquat, différente en fonction qu'on est déconnecté ou non, ou en fonction qu'on a reçu ou non un message?

(D'ailleurs, est-ce possible de pousser le vice jusqu'à adapter le message de la tooltip en fonction du nombre de messages non lus?)

Encore un grand merci pour vos réponse et vos réponses à venir
Lien direct vers le message - Vieux 31/07/2009, 21h42
Répondre

Connectés sur ce fil

 
1 connecté (0 membre et 1 invité) Afficher la liste détaillée des connectés
Thème visuel : Fuseau horaire GMT +2. Il est actuellement 23h38.
^^ Haut de page ^^