balise dans css

Dan1 · Décembre 8, 2009, 10:13

Bonjour,

Est-il possible de mettre une balise dans un css ?

Bonne journée

Dan

exemple qui ne fonctionne pas :

#essai a:hover {
background-image: url(#TITRE);
background-repeat:no-repeat;
}

</style>

<body>

<BOUCLE_titres2(ARTICLES){id_rubrique=1}{par date}{inverse}{1,1}>
<div class="listes"><a class="listes" " href="#URL_ARTICLE">[(#LOGO_ARTICLE_RUBRIQUE|center||reduire_image{0,200}|image_recadre{290,200})]</div>
</BOUCLE_titres2>

</body>

3e5e4f242968084de82d · Décembre 8, 2009, 10:53

Dan a écrit :

Bonjour,

Est-il possible de mettre une balise dans un css ?

oui si ce css est dans un squelette (soit inline comme dans ton exemple, soit en créant un css toto.css.html dans squelette et en faisant un <link src="#URL_PAGE{toto.css}")

<style type="text/css">

#essai a:hover {
background-image: url(#TITRE);

=> déjà ca seraitplutot :
background-image: url([(#TITRE*)]);

=> les parentheses sont sinon prises pour celles de la balise, et il cherche alors les crochets...
=> une etoile pour eviter le traitement typographique sur la balise
=> est-ce que tu est dans une boucle à ce niveau, sinon, #TITRE ne risque pas de renvoyer grand chose.

@++

Payet_Teddy · Décembre 8, 2009, 11:05

Le 8 décembre 2009 11:53, Stephane <stephane@rezo.net> a écrit :

Dan a écrit :

Bonjour,

Est-il possible de mettre une balise dans un css ?

oui si ce css est dans un squelette (soit inline comme dans ton exemple, soit en créant un css toto.css.html dans squelette et en faisant un <link src=« #URL_PAGE{toto.css} »)

#essai a:hover { background-image: url(#TITRE);

=> déjà ca seraitplutot :
background-image: url([(#TITRE*)]);

Moi je dirais plutôt :
background-image: url([(#TITRE*|replace{’ ‹ , ›_'})]);
Ça évite ici les espaces dans les noms de fichiers… Mais… euh pas les accents avec ce code…

=> les parentheses sont sinon prises pour celles de la balise, et il cherche alors les crochets…
=> une etoile pour eviter le traitement typographique sur la balise
=> est-ce que tu est dans une boucle à ce niveau, sinon, #TITRE ne risque pas de renvoyer grand chose.

@++

liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
http://archives.rezo.net/spip.mbox/

Documentation de SPIP : http://www.spip.net/

Irc : de l’aide à toute heure : http://spip.net/irc

Dan1 · Décembre 8, 2009, 11:50

Merci,

Oui, j'ai une boucle

<BOUCLE_titres(ARTICLES){id_rubrique=1}{par date}{inverse}{1,1}>
<a class="essai" " href="#URL_ARTICLE">[(#LOGO_ARTICLE_RUBRIQUE|center||reduire_image{0,200}|image_recadre{290,200})]</a>
</BOUCLE_titres>

par contre en css pour un rollover, faut-il obligatoirement utiliser du javascript avec onmouse over et onmouse out ?

Le 8 déc. 09 à 11:53, Stephane a écrit :

Dan a écrit :

Bonjour,
Est-il possible de mettre une balise dans un css ?

oui si ce css est dans un squelette (soit inline comme dans ton exemple, soit en créant un css toto.css.html dans squelette et en faisant un <link src="#URL_PAGE{toto.css}")

<style type="text/css">
#essai a:hover {
background-image: url(#TITRE);

=> déjà ca seraitplutot :
background-image: url([(#TITRE*)]);

=> les parentheses sont sinon prises pour celles de la balise, et il cherche alors les crochets...
=> une etoile pour eviter le traitement typographique sur la balise
=> est-ce que tu est dans une boucle à ce niveau, sinon, #TITRE ne risque pas de renvoyer grand chose.

@++
_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Discuter chez rezo.net

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc

3e5e4f242968084de82d · Décembre 8, 2009, 11:53

Dan a écrit :

Merci,

Oui, j'ai une boucle

Tu n'as pas compris la question : est-ce que ta balise #TITRE est dans une boucle (entre <BOUCLE et </BOUCLE) ?

Dan1 · Décembre 8, 2009, 11:58

Pardon, non, je souhaite la faire apparaître en rollover sous le logo

Le 8 déc. 09 à 12:53, Stephane a écrit :

Dan a écrit :

Merci,

Oui, j'ai une boucle

Tu n'as pas compris la question : est-ce que ta balise #TITRE est dans une boucle (entre <BOUCLE et </BOUCLE) ?

_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Discuter chez rezo.net

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc

3e5e4f242968084de82d · Décembre 8, 2009, 12:03

Dan a écrit :

Pardon, non, je souhaite la faire apparaître en rollover sous le logo

alors tu devrais relire ma premiere reponse....
"est-ce que tu est dans une boucle à ce niveau, sinon, #TITRE ne risque pas de renvoyer grand chose"

Dan1 · Décembre 8, 2009, 2:30

D'accord alors si je souhaite m'amuser avec un onmousover, pourquoi cette boucle ne fonctionne pas ?

<BOUCLE_titres2(ARTICLES){id_rubrique=1}{par date}{inverse}{1,1}>
<a onmouseover="this.value='[#TITRE]'" onmouseout="this.value='[(#LOGO_ARTICLE_RUBRIQUE|center||reduire_image{0,200}|image_recadre{290,200})]'" href="#URL_ARTICLE">[(#LOGO_ARTICLE_RUBRIQUE|center||reduire_image{0,200}|image_recadre{290,200})]</a>
</BOUCLE_titres2>

Le 8 déc. 09 à 13:03, Stephane a écrit :

Dan a écrit :

Pardon, non, je souhaite la faire apparaître en rollover sous le logo

alors tu devrais relire ma premiere reponse....
"est-ce que tu est dans une boucle à ce niveau, sinon, #TITRE ne risque pas de renvoyer grand chose"

_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Discuter chez rezo.net

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc

3e5e4f242968084de82d · Décembre 8, 2009, 2:37

Dan a écrit :

D'accord alors si je souhaite m'amuser avec un onmousover, pourquoi cette boucle ne fonctionne pas ?

et si tu commencais par regarder le code html produit ?

<BOUCLE_titres2(ARTICLES){id_rubrique=1}{par date}{inverse}{1,1}>
<a onmouseover="this.value='[#TITRE]'"

=> onmouseover="this.value='[#TITRE]'"
- this.value ???
- [(#TITRE*)] et pas [#TITRE];

et si je dis pas de betise, #LOGO_XXX, ca retourne un tag <img src=..., il faut donc un |extraire_attribut{src}
et je ne suis pas sur de l'ordre alignement / url donc je ne sait pas si le double pipe doit etre avant ou après center

@++

Dan1 · Décembre 8, 2009, 3:04

Si je comprends bien, j'arrive à cette boucle :

<BOUCLE_titres2(ARTICLES){id_rubrique=1}{par date}{inverse}{1,1}>
<a href="#URL_ARTICLE">
<img src="[(#LOGO_ARTICLE_RUBRIQUE|#URL_ARTICLE|center||reduire_image{0,200}|image_recadre{290,200}|extraire_attribut{src})]" border="0" onMouseOver="[(#TITRE*)]" onMouseOut="[(#LOGO_ARTICLE_RUBRIQUE|#URL_ARTICLE|center||reduire_image{0,200}|image_recadre{290,200}|extraire_attribut{src})]">
</a>
</BOUCLE_titres2>

Le 8 déc. 09 à 15:37, Stephane a écrit :

Dan a écrit :

D'accord alors si je souhaite m'amuser avec un onmousover, pourquoi cette boucle ne fonctionne pas ?

et si tu commencais par regarder le code html produit ?

<BOUCLE_titres2(ARTICLES){id_rubrique=1}{par date}{inverse}{1,1}>
<a onmouseover="this.value='[#TITRE]'"

=> onmouseover="this.value='[#TITRE]'"
- this.value ???
- [(#TITRE*)] et pas [#TITRE];

et si je dis pas de betise, #LOGO_XXX, ca retourne un tag <img src=..., il faut donc un |extraire_attribut{src}
et je ne suis pas sur de l'ordre alignement / url donc je ne sait pas si le double pipe doit etre avant ou après center

@++

_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Discuter chez rezo.net

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc

3e5e4f242968084de82d · Décembre 8, 2009, 3:42

Dan a écrit :

Si je comprends bien, j'arrive à cette boucle :

<BOUCLE_titres2(ARTICLES){id_rubrique=1}{par date}{inverse}{1,1}>
<a href="#URL_ARTICLE">
<img src="[(#LOGO_ARTICLE_RUBRIQUE|#URL_ARTICLE|center||reduire_image{0,200}|image_recadre{290,200}|extraire_attribut{src})]" border="0" onMouseOver="[(#TITRE*)]" onMouseOut="[(#LOGO_ARTICLE_RUBRIQUE|#URL_ARTICLE|center||reduire_image{0,200}|image_recadre{290,200}|extraire_attribut{src})]">

</a>
</BOUCLE_titres2>

plutot du genre (pas testé) :
<BOUCLE_titres2(ARTICLES){id_rubrique=1}{par date}{inverse}{1,1}>
<a href="#URL_ARTICLE">
<img src="[(#LOGO_ARTICLE_RUBRIQUE||reduire_image{0,200}|image_recadre{290,200}|extraire_attribut{src})]" border="0" onMouseOver="[this.src='(#TITRE*)']" onMouseOut="[this.src='(#LOGO_ARTICLE_RUBRIQUE||reduire_image{0,200}|image_recadre{290,200}|extraire_attribut{src})']">

</a>
</BOUCLE_titres2>

Dan1 · Décembre 8, 2009, 4:27

merci, il y a du mieux car l'effet fait bien disparaître le logo...
par contre le titre ne s'affiche pas

Le 8 déc. 09 à 16:42, Stephane a écrit :

Dan a écrit :

Si je comprends bien, j'arrive à cette boucle :

<BOUCLE_titres2(ARTICLES){id_rubrique=1}{par date}{inverse}{1,1}>
<a href="#URL_ARTICLE">
<img src="[(#LOGO_ARTICLE_RUBRIQUE|#URL_ARTICLE|center||reduire_image{0,200}|image_recadre{290,200}|extraire_attribut{src})]" border="0" onMouseOver="[(#TITRE*)]" onMouseOut="[(#LOGO_ARTICLE_RUBRIQUE|#URL_ARTICLE|center||reduire_image{0,200}|image_recadre{290,200}|extraire_attribut{src})]">
</a>
</BOUCLE_titres2>

plutot du genre (pas testé) :
<BOUCLE_titres2(ARTICLES){id_rubrique=1}{par date}{inverse}{1,1}>
<a href="#URL_ARTICLE">
<img src="[(#LOGO_ARTICLE_RUBRIQUE||reduire_image{0,200}|image_recadre{290,200}|extraire_attribut{src})]" border="0" onMouseOver="[this.src='(#TITRE*)']" onMouseOut="[this.src='(#LOGO_ARTICLE_RUBRIQUE||reduire_image{0,200}|image_recadre{290,200}|extraire_attribut{src})']">
</a>
</BOUCLE_titres2>

_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Discuter chez rezo.net

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc

Dan1 · Décembre 8, 2009, 4:33

j'ai trouvé ça aussi :

mais je ne comprends pas où il insert sa boucle script.

Une idée ?

Le 8 déc. 09 à 16:42, Stephane a écrit :

Dan a écrit :

Si je comprends bien, j'arrive à cette boucle :

<BOUCLE_titres2(ARTICLES){id_rubrique=1}{par date}{inverse}{1,1}>
<a href="#URL_ARTICLE">
<img src="[(#LOGO_ARTICLE_RUBRIQUE|#URL_ARTICLE|center||reduire_image{0,200}|image_recadre{290,200}|extraire_attribut{src})]" border="0" onMouseOver="[(#TITRE*)]" onMouseOut="[(#LOGO_ARTICLE_RUBRIQUE|#URL_ARTICLE|center||reduire_image{0,200}|image_recadre{290,200}|extraire_attribut{src})]">
</a>
</BOUCLE_titres2>

plutot du genre (pas testé) :
<BOUCLE_titres2(ARTICLES){id_rubrique=1}{par date}{inverse}{1,1}>
<a href="#URL_ARTICLE">
<img src="[(#LOGO_ARTICLE_RUBRIQUE||reduire_image{0,200}|image_recadre{290,200}|extraire_attribut{src})]" border="0" onMouseOver="[this.src='(#TITRE*)']" onMouseOut="[this.src='(#LOGO_ARTICLE_RUBRIQUE||reduire_image{0,200}|image_recadre{290,200}|extraire_attribut{src})']">
</a>
</BOUCLE_titres2>

_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Discuter chez rezo.net

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc

3e5e4f242968084de82d · Décembre 8, 2009, 4:59

Dan a écrit :

merci, il y a du mieux car l'effet fait bien disparaître le logo...
par contre le titre ne s'affiche pas

Et c'est quoi le code HTML produit ?
si tu ne regarde pas le source, tu ne risque pas de comprendre ce qui ne marche pas....

3e5e4f242968084de82d · Décembre 8, 2009, 5:03

Dan a écrit :

j'ai trouvé ça aussi :

http://www.veille-web.fr/index.php/post/Un-peu-de-Jquery-dans-SPIP

mais je ne comprends pas où il insert sa boucle script.

ce script ne repond à priori pas à ton besoin (enfin, de ce que j'en ai compris, à savoir pas grand chose car je ne comprend pas bien ce que tu mets dans le titre de l'article, un truc du genre /IMG/jpg/monimage.jpg ??), il sert à l'"apparation des titres des articles lors du survol du logo"

@++

Dan1 · Décembre 8, 2009, 5:05

le code HTML produit est celui-ci :

<a href="Diverscope-JR1000-Goldwaters">
<img src="local/cache-gd2/826f54b647bf0ea8e4f34993f0b3e2c0.jpg" border="0" onMouseOver="this.src='Diverscope JR1000 Goldwaters'" onMouseOut="this.src='local/cache-gd2/826f54b647bf0ea8e4f34993f0b3e2c0.jpg'"> 
</a>

« Diverscope-JR1000-Goldwaters » est bien le titre recherché dans mon exemple

Le 8 déc. 09 à 17:59, Stephane a écrit :

Dan a écrit :

merci, il y a du mieux car l’effet fait bien disparaître le logo…

par contre le titre ne s’affiche pas

Et c’est quoi le code HTML produit ?
si tu ne regarde pas le source, tu ne risque pas de comprendre ce qui ne marche pas…

liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
http://archives.rezo.net/spip.mbox/

Documentation de SPIP : http://www.spip.net/

Irc : de l’aide à toute heure : http://spip.net/irc

3e5e4f242968084de82d · Décembre 8, 2009, 5:14

Dan a écrit :

le code HTML produit est celui-ci :

<a href="Diverscope-JR1000-Goldwaters">
<img src="local/cache-gd2/826f54b647bf0ea8e4f34993f0b3e2c0.jpg" border="0" onMouseOver="this.src='Diverscope JR1000 Goldwaters'" onMouseOut="this.src='local/cache-gd2/826f54b647bf0ea8e4f34993f0b3e2c0..jpg'"> </a>

ce qui parait correct vu ce qu'on lui demande de faire...

"Diverscope-JR1000-Goldwaters" est bien le titre recherché dans mon exemple

et donc, tu esperais quoi en fait ?
si tu veux afficher le titre à la place de l'image, je ne vois qu'un solution, c'est en faire une image...
pour ca, tu peux passer le titre par |image_typo.
Mais bon, ca risque de poser probleme au niveau des dimensions selon le titre.
C'est quoi le but au juste ?

@++

Dan1 · Décembre 8, 2009, 5:26

Le but comme tu l'as dit, c'est de remplacer l'image par le titre lors du survol par la souris...

Je vais essayer avec |image_typo

Le 8 déc. 09 à 18:14, Stephane a écrit :

Dan a écrit :

le code HTML produit est celui-ci :
<a href="Diverscope-JR1000-Goldwaters">
<img src="local/cache-gd2/826f54b647bf0ea8e4f34993f0b3e2c0.jpg" border="0" onMouseOver="this.src='Diverscope JR1000 Goldwaters'" onMouseOut="this.src='local/cache-gd2/826f54b647bf0ea8e4f34993f0b3e2c0..jpg'"> </a>

ce qui parait correct vu ce qu'on lui demande de faire...

"Diverscope-JR1000-Goldwaters" est bien le titre recherché dans mon exemple

et donc, tu esperais quoi en fait ?
si tu veux afficher le titre à la place de l'image, je ne vois qu'un solution, c'est en faire une image...
pour ca, tu peux passer le titre par |image_typo.
Mais bon, ca risque de poser probleme au niveau des dimensions selon le titre.
C'est quoi le but au juste ?

@++
_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Discuter chez rezo.net

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc

Dan1 · Décembre 8, 2009, 5:41

Avec l’ajout du filtre typo, la réaction Onmouse over ne se produit plus et on obtient cela pour le résultat html.

<div class="titre"<a href="Diverscope-JR1000-Goldwaters">
<img src="local/cache-gd2/826f54b647bf0ea8e4f34993f0b3e2c0.jpg" border="0" onMouseOver="this.src='<img src='local/cache-texte/b2ad3f2b7c265aeb490418a12effdf8c.png' width='' height='' style='width:px;height:px;' alt='Diverscope JR1000 Goldwaters' />'" onMouseOut="this.src='local/cache-gd2/826f54b647bf0ea8e4f34993f0b3e2c0.jpg'"> 
</a></div>

Le 8 déc. 09 à 18:14, Stephane a écrit :

Dan a écrit :

le code HTML produit est celui-ci :

ce qui parait correct vu ce qu’on lui demande de faire…

« Diverscope-JR1000-Goldwaters » est bien le titre recherché dans mon exemple

et donc, tu esperais quoi en fait ?
si tu veux afficher le titre à la place de l’image, je ne vois qu’un solution, c’est en faire une image…
pour ca, tu peux passer le titre par |image_typo.
Mais bon, ca risque de poser probleme au niveau des dimensions selon le titre.
C’est quoi le but au juste ?

@++

liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
http://archives.rezo.net/spip.mbox/

Documentation de SPIP : http://www.spip.net/

Irc : de l’aide à toute heure : http://spip.net/irc

3e5e4f242968084de82d · Décembre 8, 2009, 5:51

Dan a écrit :

Avec l'ajout du filtre typo, la réaction Onmouse over ne se produit plus et on obtient cela pour le résultat html.

<div class="titre"<a href="Diverscope-JR1000-Goldwaters">
<img src="local/cache-gd2/826f54b647bf0ea8e4f34993f0b3e2c0.jpg" border="0" onMouseOver="this.src='<img src='local/cache-texte/b2ad3f2b7c265aeb490418a12effdf8c.png' width='' height='' style='width:px;height:px;' alt='Diverscope JR1000 Goldwaters' />'" onMouseOut="this.src='local/cache-gd2/826f54b647bf0ea8e4f34993f0b3e2c0..jpg'"> </a></div>

idem que pour #LOGO, image_typo produit un tag image, toi, c'est l'image elle meme (son chemin) qui t'interesse.
=> [(#TITRE*|image_typo|extraire_attribut{src})]

lire Images typographiques - SPIP pour plus de détails sur image_typo (=> fixer la largeur, changer la police...)

@++