Piwigo.org

AkaiKen · 2008-05-13 09:28:07

Bonjour à vous,

je cherche à faire un rollover un peu particulier : j'ai une image affichée et je voudrais qu'en passant la souris dessus elle laisse la place à un texte. Mais un vrai texte, non image, qui puisse être sélectionné, recherché dans la page, etc.
Un peu comme s'il était derrière l'image et qu'elle s'efface onMouseOver ^^

Quelqu'un aurait une idée ?

Merci d'avance.

(et si je ne suis pas assez claire, faites-le moi savoir, je vous en prie)

Dernière modification par AkaiKen (2008-05-17 10:00:53)

ddtddt · 2008-05-13 09:40:19

Une petite question

Une image "quelconque" de la galerie ou un image par exemple dans une page additionnel ?

AkaiKen · 2008-05-13 09:44:01

Au temps pour moi, ce seraient des images dans une page additionnelle.

http://akaiken.free.fr/site/index.php?/ … nal_page/2

Les textes seraient les commentaires des cartes.

AkaiKen · 2008-05-15 11:10:02

Je me permets de remonter le sujet =)

ddtddt · 2008-05-15 23:53:03

une première solution à améliorer (notamment pour cacher le texte au chargement de la page) :

<body onLoad="document.getElementById('tex').style.display='none'"; >

<div id="Rollover"

onmouseover="document.getElementById('ima').style.display='none';
document.getElementById('tex').style.display='inline' "

onmouseout="document.getElementById('ima').style.display='inline'
;document.getElementById('tex').style.display='none'" >

<img id="ima" src="XXX" width="XX%" alt="XXX">

<div id="tex">YYYYY</div>

</div>

N'oublie pas de fixer la taille de ton <div id="tex"> dans ton "template/yoga/local-layout.css " en cohérence avec la taille de ton image

AkaiKen · 2008-05-16 09:25:43

Ohh merci ! Ça fait tout à fait ce que je cherchais !

Trois choses :
1) je ne connais absolument pas le javascript =( donc s'il y a des problèmes je ne saurais les résoudre seule...
2) tu dis de fixer la taille de <div id="tex"> dans local-layout, quelle est la syntaxe à utiliser ? La taille fixée sera-t-elle en hauteur et largeur ?
3) en html simple je pouvais afficher deux cartes de front (elles font 336px de large, ma page en fait 700), et avec ce code, plus qu'une seule. D'où cela peut-il venir ?

ddtddt · 2008-05-16 10:32:39

AkaiKen a écrit:
1) je ne connais absolument pas le javascript =( donc s'il y a des problèmes je ne saurais les résoudre seule...

Moi non plus avant ta demande ! (et il y a peut être plus simple)

AkaiKen a écrit:
2) tu dis de fixer la taille de <div id="tex"> dans local-layout, quelle est la syntaxe à utiliser ? La taille fixée sera-t-elle en hauteur et largeur ?

je dirais en % de largeur pour que ton <div> et la même largeur que ton image

La syntaxe et le CSS pour les ID

exemple pour l'image 1:

div#tex1 {
float : left;
width : 40%;
padding: 4px 8px;
margin-right: 3px;
. . . . .
}

img#ima1 {
float : left;
width : 40%;
border : solid 2px white;
. . . . .
}

AkaiKen a écrit:
3) en html simple je pouvais afficher deux cartes de front (elles font 336px de large, ma page en fait 700), et avec ce code, plus qu'une seule. D'où cela peut-il venir ?

de la définition de la largeur de l'image (je te conseils en % pour que cela s'adapte à l'utilisateur)

ddtddt · 2008-05-16 10:37:24

[hs] tu peux dupliquer ton Additional Pages et la rendre visible simplement de toi pour tes test [/hs]

P@t · 2008-05-16 13:45:03

A mon avis, il y a moyen de faire ca uniquement en CSS

Je ne sais pas si ca te conviendrait, mais on peut faire par exemple une infobulle en CSS: http://www.peutetreunereponse.net/article-6614978.html
J'utilise cette méthode dans Plugin Manager et Py GVideo.
On ppeut très facilement adapter ce code pour que l'infobulle recouvre entièrement la photo (c'est très facile à faire)

Dernière modification par P@t (2008-05-16 13:46:07)

AkaiKen · 2008-05-16 23:10:51

P@t > mais mais mais c'est que ça me conviendrait tout à fait (tiens, le blog de PêUR, je connais ^^), je suppose qu'on peut fixer la taille de l'infobulle via la CSS. Je vais tester, tiens =) merci du conseil, je ne voyais pas du tout dans cette optique-là.

Hop, je teste.

EDIT de minuit : et le test est concluant ! Reste à mettre en page tout ça, j'aime beaucoup, merci P@t !

Dernière modification par AkaiKen (2008-05-17 00:14:22)

P@t · 2008-05-17 03:20:13

Après un petit passage sur ta page de test....
C'est ok sous FF, mais sous IE... je te laisse constater ;-)

AkaiKen · 2008-05-17 08:06:30

Argl... comment ça se résout, ça oO ? J'ai 'simplement' bidouillé la CSS, et je viens de regarder sur un blog de ma connaissance qui utilise les mêmes infobulles sans modifs, et c'est pareil sous FF et sous IE... Où ai-je bien pu cafouiller ? *AkaiKen retourne chercher*

VDigital · 2008-05-17 08:47:21

La syntaxe CSS est rigoureuse, le moindre écart et cela ne marche pas.
Courage.
8-)

AkaiKen · 2008-05-17 08:50:44

Oui... mais je teste en direct avec WebDevelopper sous Firefox, je vais devoir le faire à l'aveugle avec Internet Explorer =P (puisque ça marche avec Firefox je ne vois pas où est l'erreur ^^')
Merci !

VDigital · 2008-05-17 08:53:53

On commence par corriger le HTML ( ça ):

Result: 11 erreurs / 0 avertissements

line 70 column 20 - Erreur: ID "NAV" already defined
line 67 column 8 - Info: ID "NAV" first defined here
line 78 column 12 - Erreur: ID "NAV" already defined
line 67 column 8 - Info: ID "NAV" first defined here
line 201 column 27 - Erreur: an attribute value must be a literal unless it contains only name characters
line 202 column 186 - Erreur: "EST" is not a member of a group specified for any attribute
line 202 column 189 - Erreur: "UN" is not a member of a group specified for any attribute
line 202 column 197 - Erreur: "MUSHISHI" is not a member of a group specified for any attribute
line 202 column 197 - Erreur: character "," not allowed in attribute specification list
line 202 column 197 - Erreur: element "GINKO" undefined
line 204 column 80 - Erreur: required attribute "ALT" not specified
line 212 column 11 - Erreur: required attribute "ALT" not specified
line 212 column 101 - Erreur: required attribute "ALT" not specified

Piwigo.org

Annonce

#1 2008-05-13 09:28:07

Rollover d'image vers texte [en cours, et en CSS ^^]

#2 2008-05-13 09:40:19

Re: Rollover d'image vers texte [en cours, et en CSS ^^]

#3 2008-05-13 09:44:01

Re: Rollover d'image vers texte [en cours, et en CSS ^^]

#4 2008-05-15 11:10:02

Re: Rollover d'image vers texte [en cours, et en CSS ^^]

#5 2008-05-15 23:53:03

Re: Rollover d'image vers texte [en cours, et en CSS ^^]

#6 2008-05-16 09:25:43

Re: Rollover d'image vers texte [en cours, et en CSS ^^]

#7 2008-05-16 10:32:39

Re: Rollover d'image vers texte [en cours, et en CSS ^^]

AkaiKen a écrit:

AkaiKen a écrit:

AkaiKen a écrit:

#8 2008-05-16 10:37:24

Re: Rollover d'image vers texte [en cours, et en CSS ^^]

#9 2008-05-16 13:45:03

Re: Rollover d'image vers texte [en cours, et en CSS ^^]

#10 2008-05-16 23:10:51

Re: Rollover d'image vers texte [en cours, et en CSS ^^]

#11 2008-05-17 03:20:13

Re: Rollover d'image vers texte [en cours, et en CSS ^^]

#12 2008-05-17 08:06:30

Re: Rollover d'image vers texte [en cours, et en CSS ^^]

#13 2008-05-17 08:47:21

Re: Rollover d'image vers texte [en cours, et en CSS ^^]

#14 2008-05-17 08:50:44

Re: Rollover d'image vers texte [en cours, et en CSS ^^]

#15 2008-05-17 08:53:53

Re: Rollover d'image vers texte [en cours, et en CSS ^^]

Pied de page des forums