Forum du site

Rollover
Patrice MOREL le 16 mars à 19:31	Rappel du sujet : Bonjour, Je cherche le moyen de faire un rollover sur des images en partie texte. Intégrer un code CSS en partie texte ? Est-ce possible ? Une fonction ou pluging spécial ? Voici un exemple d’images sur le lequel j’aimerais faire çà, mais il y en aurait plusieurs par article... Une idée ? Merci Patrice Collectif Jean de Neyman
Patrice MOREL le 16 mars à 19:32	Rollover (suite) Elles sont dans "images"
Jean Christophe Villeneuve le 16 mars à 20:03	Rollover hmm intéressant comme exercice ! Je vais réfléchir à ça.
Jean Christophe Villeneuve le 16 mars à 23:23	Rollover Bon voici un premier jet : 1ère étape : tu crées un fichier rollover.html dans /squelettes/modeles avec ce contenu : <BOUCLE_document (DOCUMENTS) {id_document=#ENV{doc1}}> [(#SET{width,[(#FICHIER\|image_reduire{[(#CONFIG{escal/config/largeurimage,400})]}\|extraire_attribut{width} )]} )] [(#SET{height,[(#FICHIER\|image_reduire{[(#CONFIG{escal/config/largeurimage,400})]}\|extraire_attribut{height} )]} )] </BOUCLE_document> <style> .rollover { width: #GET{width}px; height: #GET{height}px; margin: auto; background: url("<BOUCLE_document1 (DOCUMENTS){id_document=#ENV{doc1}}>#FICHIER</BOUCLE_document1>"); background-size: cover; } .rollover:hover { background: url("<BOUCLE_document2 (DOCUMENTS){id_document=#ENV{doc2}}>#FICHIER</BOUCLE_document2>"); background-size: cover; } </style> <div class="rollover"> </div> La première boucle récupère la largeur et la hauteur d’une des 2 images après traitement par `image-reduire` en fonction de la valeur définie dans la configuration d’Escal. Ensuite, on définit la taille de la div "rollover" en fonction de ces valeurs, on centre avec `margin:auto` et on définit comme fond le doc1 qui couvre toute la div. Puis on remplace ce doc1 par le doc2 au survol. 2ème étape : Dans un article, tu téléverses tes 2 images et tu mets ce raccourci où tu veux : <rollover\|doc1=XX\|doc2=YY> où XX et YY sont les numéros/identifiants des 2 images.
Patrice MOREL le 17 mars à 12:03	Rollover Bonjour Jean-Christophe, Un grand merci : https://collectif-jeandeneyman.fr/ecrire/?exec=article&id_article=35 Tu viens de me faire un beau cadeau pour la Saint-Patrick :-)) (je boirai un whisky à ta santé ce midi). Reste un détail (enfin je crois %-) ) à régler si tu peux : Titre, Description et Crédit ne s’affichent pas ! Patrice
Jean Christophe Villeneuve le 17 mars à 13:16	Rollover Ah mais ce n’était pas précisé dans la commande ! ;-) Rajoute ce code à la fin du fichier rollover.html <BOUCLE_afficher (DOCUMENTS) {id_document=#ENV{doc1}}> <div class="spip_documents spip_documents_center"> <figcaption class='spip_doc_legende'> [<div class='spip_doc_titre'><strong>(#ENV{titre,#TITRE\|supprimer_numero}\|propre\|ptobr)</strong></div>] [<div class='spip_doc_descriptif'>(#ENV{descriptif,#DESCRIPTIF}\|propre\|PtoBR)</div>] [<div class='spip_doc_credits'>(#ENV{credits,#CREDITS}\|propre\|PtoBR)</div>] </figcaption> </div> </BOUCLE_afficher> et hop !
Patrice MOREL le 17 mars à 14:42	Rollover J’ai pas le crédit centré (même avec des essais de "center" et n’ai pas besoin de l’hyperlien :’-( Patrice
Patrice MOREL le 17 mars à 14:47	Rollover Je n’ai pas besoin de l’hyperlien sur le Titre, Descriptif et Crédit... Patrice
Jean Christophe Villeneuve le 17 mars à 16:16	Rollover Le lien c’est toi qui le met ! [<rollover\|doc1=373\|doc2=372>->doc371] Pour le centrage, je regarde ce soir.
Patrice MOREL le 17 mars à 17:29	Rollover Coucou, Si je m’en réfère à ce qui se passe d’habitude `[<doc372>->doc371]` cela ne met pas de lien sur le texte (voir exemple sur mon article 35) @+ Patrice
Patrice MOREL le 17 mars à 19:21	Rollover Je viens de m’apercevoir que tous les crédits sont alignés à droite (par exemple : article 31)
Jean Christophe Villeneuve le 17 mars à 19:51	Rollover Sauf que là, le lien est sur l’ensemble du modèle rollover donc aussi sur le texte. Pour le centrage des crédits, ce sera corrigé dans la prochaine version d’Escal. En attendant, un .spip_doc_credits { margin: auto; } dans ton perso.css doit corriger le problème.
Patrice MOREL le 18 mars à 09:50	Rollover (crédit à droite) Bonjour, Je viens de m’apercevoir que tous les crédits sont alignés à droite, mais cela vient d’une commande que j’avais fait dans mon perso : `.spip_doc_credits { font-size: 10px; margin-right: 20px; margin-left: auto; }` J’ai rectifié en ne laissant que font-size : 10px ; Désolé pour le dérangement sur ce code. Patrice
Patrice MOREL le 18 mars à 09:52	Rollover (hyperlien) Je vais essayer de trouver le code pour enlever l’hyperlien sur les textes du doc en le gardant sur la photo... Si je bloque, j’appelle au secours. Patrice
Jean Christophe Villeneuve le 18 mars à 10:00	Rollover (hyperlien) A mon avis, 2 solutions : séparer le modèle rollover en 2 modèles : 1 pour les images, 1 pour les titre, descriptif et crédits ajouter un paramètre "lien" au modèle Je te laisse plancher là-dessus...
Patrice MOREL le 18 mars à 10:29	Rollover (hyperlien) Yessss, C’est fait avec un second modèle : rollover_descriptif.html où j’ai mis ton code : `<BOUCLE_afficher (DOCUMENTS) {id_document=#ENV{doc1}}> <div class="spip_documents spip_documents_center"> <figcaption class='spip_doc_legende'> [<div class='spip_doc_titre'><strong>(#ENV{titre,#TITRE\|supprimer_numero}\|propre\|ptobr)</strong></div>] [<div class='spip_doc_descriptif'>(#ENV{descriptif,#DESCRIPTIF}\|propre\|PtoBR)</div>] <center>[<div class='spip_doc_credits'><center>(#ENV{credits,#CREDITS}\|propre\|PtoBR)</div>]</center> </figcaption> </div> </BOUCLE_afficher>` Voir article 35. Merci Patrice
Patrice MOREL le 19 mars à 17:16	Rollover Bonjour Jean-Christophe, J’ai beau mettre des photos différentes sur une page, c’est toujours la même qui s’affiche ! Voir les photos de classe, article 31. Le cache a été vidé :’-( Patrice
Jean Christophe Villeneuve le 19 mars à 17:55	Rollover Ah oui, en effet, ça ne fonctionne pas avec plusieurs fois le modèle car c’est le background en css et donc le dernier qui prend la main. Je vais réfléchir à une autre solution.
Jean Christophe Villeneuve le 19 mars à 18:00	Rollover C’était simple en fait, il suffisait de personnaliser la class rollover avec le numéro du premier document par exemple. En tout cas j’aime bien ton idée d’avoir une image différente au survol qui cible la personne puis une photo agrandie au clic, ça rend bien.
Patrice MOREL le 19 mars à 18:14	Rollover Bah ! si tu l’dis ! B-) Merci pour le travail et le compliment ! (Du coup j’ai mis à jour mon article webmestre (6) au cas où quelqu’un ou quelqu’une en aurait besoin.) @+ et encore merci. Patrice

Patrice MOREL
le 16 mars
à 19:31

Rappel du sujet :

Bonjour,

Je cherche le moyen de faire un rollover sur des images en partie texte. Intégrer un code CSS en partie texte ? Est-ce possible ? Une fonction ou pluging spécial ?
Voici un exemple d’images sur le lequel j’aimerais faire çà, mais il y en aurait plusieurs par article...
Une idée ?
Merci
Patrice
Collectif Jean de Neyman

Patrice MOREL
le 16 mars
à 19:32

Rollover (suite)

Elles sont dans "images"

Jean Christophe Villeneuve
le 16 mars
à 20:03

Rollover

hmm intéressant comme exercice !
Je vais réfléchir à ça.

Jean Christophe Villeneuve
le 16 mars
à 23:23

Rollover

Bon voici un premier jet :
1ère étape :
tu crées un fichier rollover.html dans /squelettes/modeles avec ce contenu :

<BOUCLE_document (DOCUMENTS) {id_document=#ENV{doc1}}>
	[(#SET{width,[(#FICHIER|image_reduire{[(#CONFIG{escal/config/largeurimage,400})]}|extraire_attribut{width} )]} )]
	[(#SET{height,[(#FICHIER|image_reduire{[(#CONFIG{escal/config/largeurimage,400})]}|extraire_attribut{height} )]} )]
</BOUCLE_document>


<style>
.rollover {
	width: #GET{width}px;
	height: #GET{height}px;
	margin: auto;
	background: url("<BOUCLE_document1 (DOCUMENTS){id_document=#ENV{doc1}}>#FICHIER</BOUCLE_document1>");
	background-size: cover;
}
.rollover:hover {
	background: url("<BOUCLE_document2 (DOCUMENTS){id_document=#ENV{doc2}}>#FICHIER</BOUCLE_document2>");
	background-size: cover;
}
</style>

<div class="rollover">
</div>

La première boucle récupère la largeur et la hauteur d’une des 2 images après traitement par image-reduire en fonction de la valeur définie dans la configuration d’Escal.
Ensuite, on définit la taille de la div "rollover" en fonction de ces valeurs, on centre avec margin:auto et on définit comme fond le doc1 qui couvre toute la div.
Puis on remplace ce doc1 par le doc2 au survol.

2ème étape :
Dans un article, tu téléverses tes 2 images et tu mets ce raccourci où tu veux :

<rollover|doc1=XX|doc2=YY>

où XX et YY sont les numéros/identifiants des 2 images.

Patrice MOREL
le 17 mars
à 12:03

Rollover

Bonjour Jean-Christophe,

Un grand merci : https://collectif-jeandeneyman.fr/ecrire/?exec=article&id_article=35
Tu viens de me faire un beau cadeau pour la Saint-Patrick :-)) (je boirai un whisky à ta santé ce midi).

Reste un détail (enfin je crois %-) ) à régler si tu peux :
Titre, Description et Crédit ne s’affichent pas !

Patrice

Jean Christophe Villeneuve
le 17 mars
à 13:16

Rollover

Ah mais ce n’était pas précisé dans la commande ! ;-)
Rajoute ce code à la fin du fichier rollover.html

<BOUCLE_afficher (DOCUMENTS) {id_document=#ENV{doc1}}>
<div class="spip_documents spip_documents_center">
<figcaption class='spip_doc_legende'>
	[<div class='spip_doc_titre'><strong>(#ENV*{titre,#TITRE*|supprimer_numero}|propre|ptobr)</strong></div>]
	[<div class='spip_doc_descriptif'>(#ENV*{descriptif,#DESCRIPTIF*}|propre|PtoBR)</div>]
	[<div class='spip_doc_credits'>(#ENV*{credits,#CREDITS*}|propre|PtoBR)</div>]
</figcaption>
</div>
</BOUCLE_afficher>

et hop !

Patrice MOREL
le 17 mars
à 14:42

Rollover

J’ai pas le crédit centré (même avec des essais de "center" et n’ai pas besoin de l’hyperlien :’-(

Patrice

Patrice MOREL
le 17 mars
à 14:47

Rollover

Je n’ai pas besoin de l’hyperlien sur le Titre, Descriptif et Crédit...

Patrice

Jean Christophe Villeneuve
le 17 mars
à 16:16

Rollover

Le lien c’est toi qui le met !

[<rollover|doc1=373|doc2=372>->doc371]

Pour le centrage, je regarde ce soir.

Patrice MOREL
le 17 mars
à 17:29

Rollover

Coucou,

Si je m’en réfère à ce qui se passe d’habitude
[<doc372>->doc371]
cela ne met pas de lien sur le texte (voir exemple sur mon article 35)

@+
Patrice

Patrice MOREL
le 17 mars
à 19:21

Rollover

Je viens de m’apercevoir que tous les crédits sont alignés à droite (par exemple : article 31)

Jean Christophe Villeneuve
le 17 mars
à 19:51

Rollover

Sauf que là, le lien est sur l’ensemble du modèle rollover donc aussi sur le texte.

Pour le centrage des crédits, ce sera corrigé dans la prochaine version d’Escal. En attendant, un

.spip_doc_credits {
	margin: auto;
}

dans ton perso.css doit corriger le problème.

Patrice MOREL
le 18 mars
à 09:50

Rollover (crédit à droite)

Bonjour,

Je viens de m’apercevoir que tous les crédits sont alignés à droite, mais cela vient d’une commande que j’avais fait dans mon perso :

.spip_doc_credits {
	font-size: 10px;
        margin-right: 20px;
        margin-left: auto;
}

J’ai rectifié en ne laissant que font-size : 10px ;

Désolé pour le dérangement sur ce code.

Patrice

Patrice MOREL
le 18 mars
à 09:52

Rollover (hyperlien)

Je vais essayer de trouver le code pour enlever l’hyperlien sur les textes du doc en le gardant sur la photo...
Si je bloque, j’appelle au secours.

Patrice

Jean Christophe Villeneuve
le 18 mars
à 10:00

Rollover (hyperlien)

A mon avis, 2 solutions :

séparer le modèle rollover en 2 modèles : 1 pour les images, 1 pour les titre, descriptif et crédits
ajouter un paramètre "lien" au modèle

Je te laisse plancher là-dessus...

Patrice MOREL
le 18 mars
à 10:29

Rollover (hyperlien)

Yessss,

C’est fait avec un second modèle : rollover_descriptif.html où j’ai mis ton code :

<BOUCLE_afficher (DOCUMENTS) {id_document=#ENV{doc1}}>
<div class="spip_documents spip_documents_center">
<figcaption class='spip_doc_legende'>
	[<div class='spip_doc_titre'><strong>(#ENV*{titre,#TITRE*|supprimer_numero}|propre|ptobr)</strong></div>]
	[<div class='spip_doc_descriptif'>(#ENV*{descriptif,#DESCRIPTIF*}|propre|PtoBR)</div>]
	<center>[<div class='spip_doc_credits'><center>(#ENV*{credits,#CREDITS*}|propre|PtoBR)</div>]</center>
</figcaption>
</div>
</BOUCLE_afficher>

Voir article 35.

Merci

Patrice

Patrice MOREL
le 19 mars
à 17:16

Rollover

Bonjour Jean-Christophe,

J’ai beau mettre des photos différentes sur une page, c’est toujours la même qui s’affiche !
Voir les photos de classe, article 31.
Le cache a été vidé

:’-(

Patrice

Jean Christophe Villeneuve
le 19 mars
à 17:55

Rollover

Ah oui, en effet, ça ne fonctionne pas avec plusieurs fois le modèle car c’est le background en css et donc le dernier qui prend la main.

Je vais réfléchir à une autre solution.

Jean Christophe Villeneuve
le 19 mars
à 18:00

Rollover

C’était simple en fait, il suffisait de personnaliser la class rollover avec le numéro du premier document par exemple.

En tout cas j’aime bien ton idée d’avoir une image différente au survol qui cible la personne puis une photo agrandie au clic, ça rend bien.

Patrice MOREL
le 19 mars
à 18:14

Rollover

Bah ! si tu l’dis ! B-)

Merci pour le travail et le compliment !

(Du coup j’ai mis à jour mon article webmestre (6) au cas où quelqu’un ou quelqu’une en aurait besoin.)

@+ et encore merci.
Patrice

Edito