Communauté francophone - Jimdo
Bienvenue sur le nouveau forum de discussion officiel de la communauté francophone des utilisateurs de Jimdo.

Ce forum annule et remplace le précédent forum Jimdo, qui a malheureusement dû être fermé pour raisons techniques.

Vous avez un ou plusieurs sites Jimdo ? Enregistrez vous sur le forum, posez vos questions et prenez part aux discussions !

Vous êtes simple visiteur ? Vous pouvez consulter nos pages, mais vous ne pourrez pas laisser de message.

Rollover dans colonnes: ajustement automatique de la taille

Voir le sujet précédent Voir le sujet suivant Aller en bas

Rollover dans colonnes: ajustement automatique de la taille

Message par memoyu le Dim 12 Oct 2014 - 10:07

Bonjour à toutes et à tous.

Je souhaite effectuer sur mon site internet la mise en place de plusieurs "rollover" dans des colonnes.

Mon site est un site pour découvrir le chinois (mandarin) et je voudrais le rentre visuellement plus riche.

Par exemple je pense qu'il peut être super de mettre "des colonnes" avec des images et lorsque l'internaute passe son pointeur sur l'image alors la traduction du caractère apparait ou comme je souhaite le faire par exemple sur cette page: http://www.memoyu.com/le-chinois/la-structure/
,en passant sur une image pour les structures composées alors une autre image avec des couleurs apparaissent pour montrer simplement les éléments ( gauche en rouge / droite en vert par exemple).

Je sais qu'il faut insérer une ligne de code.

J'avais fais une petite recherche sur internet et lorsque j'ai essayé j'ai eu une image surdimensionnée.

Est-il possible d'entrer une ligne de code pour faire un rollover qui ajuste automatiquement la taille de l'image (image 1 + image 2) en s'adaptant à la taille des autres images de la même ligne ?

J'espère que vous comprenez la question.

Bon Dimanche à vous!

Cordialement,

Maxime 小马

memoyu

Messages : 2
Date d'inscription : 12/10/2014

http://www.memoyu.com

Revenir en haut Aller en bas

Re: Rollover dans colonnes: ajustement automatique de la taille

Message par FredVig le Dim 12 Oct 2014 - 13:12

bonjour. Je pense qu'une solution similaire avait été décrite par lefildargent.
Le principe général consistait à créer une feuille de style (.grandeimage) décrivant les modifications que vous désirez (plus grande taille d'image), puis d'indiquer dans le html des colonnes contenant votre image une ligne de code du genre :
<tr onmouseover="this.style.background='grandeimage';" onmouseout="this.style.background='none';">
Vous avez un exemple sur ma page : http://labof.jimdo.com/rollover-player/
Dans ce cas, la modification porte sur l’arrière plan des cellules (background)
Dans votre cas, il faudra cibler les images, dont les dimensions me semblent pilotées par cette combinaison de class :
.cc-imagewrapper.cc-m-width-maxed img {
   height: auto !important;
   width: 100% !important;}
La class que vous devez créer pourrait ressembler à
.grandeimage {width: 120% !important;}
à noter que ce grossissement va avoir des conséquences sur les éléments voisins.
Les autres symboles risquent d'être repoussés par le symbole grossi.
Il faut donc prévoir exactement à l'avance ce à quoi vous voulez parvenir, et créer une structure qui permette de le réaliser, sans effet indésirable.
(images dans des colonnes ? plusieurs div imbriquées ?…)
Ceci ne concerne que la question du grossissement d'une image au survol.

Tout ce qui concerne l'apparition /disparition d'éléments peut être réalisé de diverses manières.
- Sur le même principe : les éléments sont cachés par défaut (visibility:hidden), mais deviennent visible lorsqu'on passe dessus, ou sur un autre élément, intégrant dans son code un onmouseover="this.style.visibility='visible' ou onmouseover="(identifiant de l'élément à faire paraître).style.visibility='visible'
Pour les couleurs signalant les symbole, ce peuvent être des div colorées dont l'opacité est à 0 par défaut, et à 50% au survol.
Elle doivent se superposer au div des symboles, donc, en position relative.

Ce ne sont que des pistes de recherches.
Il ne faut se lancer dans ces modifications qu'avec suffisamment de notions de Html, et lire les tuto jimdo sur la modification du head

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

Messages : 1794
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: Rollover dans colonnes: ajustement automatique de la taille

Message par memoyu le Mer 15 Oct 2014 - 9:53

Merci FredVig pour ton explication!

Je vais essayer de comprendre.

Bonne continuation,

再见!

memoyu

Messages : 2
Date d'inscription : 12/10/2014

http://www.memoyu.com

Revenir en haut Aller en bas

Re: Rollover dans colonnes: ajustement automatique de la taille

Message par FredVig le Sam 26 Sep 2015 - 23:05

Depuis peu, Jimdo a proposé une réponse adaptée aux designs récents dans ses tutos :
Images avec effet de rollover

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

Messages : 1794
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: Rollover dans colonnes: ajustement automatique de la taille

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum