Version imprimable
Salut tout le monde,
J'ai un souci, j'ai créé un tableau avec deux colonnes et des images qui s'agrandissent au survol de la souris.
Celles de gauche sont entières, mais celles de droites sont coupées.
Le tout en html.
Comment puis-je faire ?
Je suis débutant, alors si vous pourriez parler français ça m’arrangerait. ;)
Merci @ vous.
Salut,
Nous montrer le code serait déjà un bon début ;)Citation:
Envoyé par Jules59
Merci.
Je vous mets le lien :
http://les-trieuses-oxylane.olympe.i...os-melody.html
Je me suis servi du tuto pour créer mon tableau, tuto très bien fait
Elles sont pas coupées tes images, elles sont tournées :koi:
En fait, la première à droite est coupée, les autres quand tu les survoles, elles apparaissent dans le bon sens
J'aurais aimé mettre une troisième colonne, et lors du survol que la photo se centre dans la page
Car là le tableau se " déforme "
Bonjour,
ton problème est que ton tableau fait une largeur LIMITEE par la largeur du conteneur (la page).
[largeur image gauche/petite] + [largeur image droite/grande] > [largeur totale disponible].
Donc, ca dépasse, et l'image est, non pas coupée, mais "masquée" par la limite de la page.
Voici de quoi faire un affichage plus... moderne : PrettyPhoto (Tout est bien expliqué)
Ou encore sous forme de galerie-photos : galleria
Un exemple d'utilisation ici.
En effet c'est sympa aussi ça
Code:<a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="This is the description"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="This is the title" /></a>
Le 2.jpg est la miniature et la t_2.jpg est le résultat ?
C'est ça, mais le contraire.
Regarde dans les "DEMOS" => la démo et le code pour "image gallery".
Dans le même genre : LightBox2 (tout aussi facile à utiliser)
Je vais regarder ce système qui me parait pratique
En réalité c'est l'inverse ;)
Si tu regardes bien le code, l'image miniature est bien celle qui est nommée t_2.jpg et qui a un lien pointant vers l'image "fullscreen" 2.jpg ;)
Merci de ton aide
Je ne vois pas la différence entre Image Gallery et Slideshow Image gallery 8O
Tu pourrais éclairer ma lanterne ?
Je vais conduire mes filles aux activités, j'essayerais en rentrant
J'ai essayé, ça me donne ça
http://les-trieuses-oxylane.olympe.i...os-melody.html
J'ai laissé le tableau
Il y a quelque chose que j'ai raté ?
Il faut enlever ton premier script ! (celui qui agrandit l'image au survol)
Et le remplacer par celui de PrettyPhoto :
devient :Code:<img onmouseout="this.src='design/mini/minivuedensemble.jpg';" onmouseover="this.src='design/mini/vuedensemble.jpg';" src="design/mini/minivuedensemble.jpg">
Sans oublier de mettre entre <head> et </head> :Code:
2
3
En indiquant le bon chemin vers ton dossier "prettyPhoto".Code:
2
3
4
5
6
7
8
9
10
11
=> Voir la Documentation prettyPhoto (tout est expliqué !)
Je te remercie de ton aide, mais j'y comprends rien
Merci encore
Si tu ne comprends pas l'anglais, tu peux toujours traduire les textes avec : http://translate.google.fr/#en/fr/Citation:
Envoyé par jreaux62
Je pense plutôt que je ne comprends pas le contexte du script , comment faire etc .....
Mais je vais débrouiller avec le tuto tableau que j'ai trouvé sur ce site
Merci @ toi
Bonsoir,
ce genre de chose ce fait en 100% CSS.