Bonjour,
Je souhaite intégrer une image fixe (loupe) sur le docs pour avertir le lecteur qu'il peut voir l'image en plus grand.
J'ai essayer quelques méthodes de css mais sans aucun succès.
Auriez-vous une solution, svp ?
Merci
Dan
Bonjour,
Je souhaite intégrer une image fixe (loupe) sur le docs pour avertir le lecteur qu'il peut voir l'image en plus grand.
J'ai essayer quelques méthodes de css mais sans aucun succès.
Auriez-vous une solution, svp ?
Merci
Dan
Dan a écrit :
Bonjour,
Je souhaite intégrer une image fixe (loupe) sur le docs pour avertir le
lecteur qu'il peut voir l'image en plus grand.J'ai essayer quelques méthodes de css mais sans aucun succès.
Auriez-vous une solution, svp ?
Merci
Dan
Bonjour,
oui, il faudrait utiliser quelques méthode de css, et aussi faire le
nécessaire au niveau des squelettes. (un problème de chemin relatif?)
Il faudrait que tu nous donnes ton code source, et l'adresse du site
si possible.
A bientôt
Grégoire
Le 26 mai 2009 00:28, Dan <dan.diaconu@noos.fr> a écrit :
Bonjour,
Je souhaite intégrer une image fixe (loupe) sur le docs pour avertir le lecteur qu’il peut voir l’image en plus grand.
J’ai essayer quelques méthodes de css mais sans aucun succès.
Auriez-vous une solution, svp ?
Merci
Dan
Tu peux aussi te servir des fonctions avancées de traitement d’image, il suffit alors de créer un masque (ta loupe) et de filtrer le logo du document : [LOGO_DOCUMENT|imagemasque{loupe.png})] tu as la syntaxe exacte dans la doc de spip que je n’ai pas sous les yeux pour te donner quelque chose d’exact.
–
@+++
Benjamin Farrudja
Webmaster
http://www.vtopo.com
Grégoire a écrit :
Dan a écrit :
Bonjour,
Je souhaite intégrer une image fixe (loupe) sur le docs pour avertir le
lecteur qu'il peut voir l'image en plus grand.J'ai essayer quelques méthodes de css mais sans aucun succès.
Auriez-vous une solution, svp ?
Merci
Dan
Bonjour,oui, il faudrait utiliser quelques méthode de css, et aussi faire le
nécessaire au niveau des squelettes. (un problème de chemin relatif?)Il faudrait que tu nous donnes ton code source, et l'adresse du site
si possible.A bientôt
Grégoire
Bonjour,
pour positionner une petite loupe par-dessus une image-lien, le plus simple est d'utiliser le positionnement absolu de l'image HTML loupe (et d'avoir le code source, effectivement)
Lecture indispensable: http://openweb.eu.org/articles/initiation_absolue/ (les articles 1 et 2 sont également instructifs)
Écueils à éviter:
- le parent doit être positionné (position: relative;) sinon ça ne fonctionnera pas
- tester IE6 qui a des difficultés de compréhension avec ce positionnement-là.
- graphiquement, le format PNG-24 convient tant qu'il n'est pas transparent: ça passera sur IE6 sans modif et ça se verra de toute façon mieux sur l'image! Sinon il faut un GIF servi à IE6 via un commentaire conditionnel [1] ou si tu as Fireworks les PNG-8 qu'il sait créer et qui convient à tous les navigateurs [2]
Le principe est d'avoir un parent (<p>aragraphe ou div ou ...) qui contient dans le lien l'image principale puis la loupe (à la fin du lien ou juste après), de positionner en relatif le parent et en absolu la loupe: la loupe sort du flux du document et se place par-dessus l'image, dans le coin en haut à gauche par défaut.
Puis placer la loupe en bottom: 5px; right: 5px; ou autre.
On peut en plus modifier la forme du curseur (si ce n'est déjà le cas) ou rajouter une bordure au survol/prise de focus si les images sont toujours sur le même fond uni:
CSS
/* feinte: par défaut bordure invisible de 3px sur un fond par exemple blanc */
element_parent a { border: 3px solid white; }
/* gère la navigation à la souris ou au clavier et OK pour IE6 qui n'applique :hover que sur les liens */
element_parent a:hover,
element_aprent a:focus { border: 3px solid #888; }
[1] Astuces - Alsacreations
[2] (en) PNG8 - The Clear Winner — SitePoint
Cordialement,
Felipe
Bonjour,
Merci pour vos réponses.
Pour la partie document, boucle et css sont d’origines (après j’utilise le plugin thickbox, mais c’est une autre histoire)
La boucle
[(#REM) Portfolio : album d’images ]
<B_documents_portfolio>
[(#REM)
Afficher en grand le document demande dans l’URL
]
<BOUCLE_afficher_document(DOCUMENTS)
{id_document}
{id_article}
{mode=document}
{extension IN png,jpg,gif}>
[(#REM)
Si un seul document est joint a l’article, et si le texte est vide,
on incruste automatiquement ce document
]
<BOUCLE_documents_decompte(DOCUMENTS spip_documents_liens articles)
{id_article}
{mode=document}
{texte=‹ ›}
{extension !IN gif,jpg,png}
{vu=non}
[(#TOTAL_BOUCLE|=={1}
|?{[(#INCLURE{fond=modeles/emb}{id_document}
|trim)]})]</BOUCLE_documents_decompte>
[(#REM)
Sinon, liste des autres documents joints
]
<B_documents_joints>
<//B_documents_decompte>
Le css :
img, .spip_logos { margin: 0; padding: 0; border: 0; }
.spip_documents { text-align: center; line-height: normal; }
.spip_documents p { margin: 0.10em; padding: 0; }
.spip_documents_center { display: block; clear: both; width: 100%; margin: 1em auto; }
.spip_documents_left { float: left; margin-right: 15px; margin-bottom: 5px; }
.spip_documents_right { float: right; margin-left: 15px; margin-bottom: 5px; }
.spip_doc_titre { margin-right: auto; margin-left: auto; font-weight: bold; font-size: 0.90em; }
.spip_doc_descriptif { clear: both; margin-right: auto; margin-left: auto; font-size: 0.90em; }
Si je comprends bien la logique, il faudrait mettre dans le css .spip documents { text-align: center; line-height: normal; position: relative; }
Et créer un style pour la loupe, par ex :
.zoom {position : absolute; top: 5%; right : 95%; url(zoom.gif); }
Par contre la div avec la class=« zoom », où va-t-elle ?
Un grand merci pour votre aide
Dan
Le 26 mai 09 à 10:29, Philippe Vayssière a écrit :
Grégoire a écrit :
Dan a écrit :
Bonjour,
Je souhaite intégrer une image fixe (loupe) sur le docs pour avertir le
lecteur qu’il peut voir l’image en plus grand.
J’ai essayer quelques méthodes de css mais sans aucun succès.
Auriez-vous une solution, svp ?
Merci
Dan
Bonjour,
oui, il faudrait utiliser quelques méthode de css, et aussi faire le
nécessaire au niveau des squelettes. (un problème de chemin relatif?)
Il faudrait que tu nous donnes ton code source, et l’adresse du site
si possible.
A bientôt
Grégoire
Bonjour,
pour positionner une petite loupe par-dessus une image-lien, le plus simple est d’utiliser le positionnement absolu de l’image HTML loupe (et d’avoir le code source, effectivement)
Lecture indispensable: http://openweb.eu.org/articles/initiation_absolue/ (les articles 1 et 2 sont également instructifs)Écueils à éviter:
- le parent doit être positionné (position: relative;) sinon ça ne fonctionnera pas
- tester IE6 qui a des difficultés de compréhension avec ce positionnement-là.
- graphiquement, le format PNG-24 convient tant qu’il n’est pas transparent: ça passera sur IE6 sans modif et ça se verra de toute façon mieux sur l’image! Sinon il faut un GIF servi à IE6 via un commentaire conditionnel [1] ou si tu as Fireworks les PNG-8 qu’il sait créer et qui convient à tous les navigateurs [2]
Le principe est d’avoir un parent (
aragraphe ou div ou …) qui contient dans le lien l’image principale puis la loupe (à la fin du lien ou juste après), de positionner en relatif le parent et en absolu la loupe: la loupe sort du flux du document et se place par-dessus l’image, dans le coin en haut à gauche par défaut.
Puis placer la loupe en bottom: 5px; right: 5px; ou autre.On peut en plus modifier la forme du curseur (si ce n’est déjà le cas) ou rajouter une bordure au survol/prise de focus si les images sont toujours sur le même fond uni:
CSS
/* feinte: par défaut bordure invisible de 3px sur un fond par exemple blanc */
element_parent a { border: 3px solid white; }/* gère la navigation à la souris ou au clavier et OK pour IE6 qui n’applique :hover que sur les liens */
element_parent a:hover,
element_aprent a:focus { border: 3px solid #888; }[1] http://www.alsacreations.com/astuce/lire/48-commentaires-conditionnels.html
[2] (en) http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/Cordialement,
Felipe
liste spip
spip@rezo.net - désabonnement : spip-off@rezo.netInfos et archives : http://listes.rezo.net/mailman/listinfo/spip
Documentation de SPIP : http://www.spip.net/
irc://irc.freenode.net/spip ou http://embed.mibbit.com/?server=irc.freenode.net&channel=%23spip