Rollover dans colonnes: ajustement automatique de la taille

[memoyu]

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 小马

[FredVig]

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

[memoyu]

Merci FredVig pour ton explication!

Je vais essayer de comprendre.

Bonne continuation,

再见!

[FredVig]

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

[Contenu sponsorisé]