petite image

Général
1

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

2

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

3

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

4

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

5

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>

<:info_portfolio:>

[ [(#FICHIER |image_reduire{0,60} |inserer_attribut{class,spip_logos} |inserer_attribut{alt,[(#TITRE|couper{80}|texte_backend)]})] ]

[(#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}>

[(#EMBED_DOCUMENT|image_reduire{500,0})] [
(#TITRE)
] [
(#DESCRIPTIF)
]

[(#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>

<:titre_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.net

Infos 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