Elles sont dans "images"

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.

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 !

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

Patrice

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

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.

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

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

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.

Bah ! si tu l’dis ! 😎

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