Images décalées en survol

**Jules59** · 03/10/2012, 14h55

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.

**Torgar** · 03/10/2012, 15h18

Salut,

Envoyé par Jules59

Comment puis-je faire ?

Nous montrer le code serait déjà un bon début

Merci.

**Jules59** · 03/10/2012, 15h38

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

**FirePrawn** · 03/10/2012, 15h41

Elles sont pas coupées tes images, elles sont tournées

**Jules59** · 03/10/2012, 15h42

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 "

Invité · 03/10/2012, 15h49

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.

**Jules59** · 03/10/2012, 15h53

En effet c'est sympa aussi ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 ?

Invité · 03/10/2012, 16h04

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)

**Jules59** · 03/10/2012, 16h06

Je vais regarder ce système qui me parait pratique

**FirePrawn** · 03/10/2012, 16h09

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

**Jules59** · 03/10/2012, 16h10

Merci de ton aide

Je ne vois pas la différence entre Image Gallery et Slideshow Image gallery

Tu pourrais éclairer ma lanterne ?

Je vais conduire mes filles aux activités, j'essayerais en rentrant

**Jules59** · 03/10/2012, 16h47

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é ?

Invité · 03/10/2012, 18h45

Il faut enlever ton premier script ! (celui qui agrandit l'image au survol)
Et le remplacer par celui de PrettyPhoto :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img onmouseout="this.src='design/mini/minivuedensemble.jpg';" onmouseover="this.src='design/mini/vuedensemble.jpg';" src="design/mini/minivuedensemble.jpg">

devient :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<a href="design/mini/vuedensemble.jpg" rel="prettyPhoto[]">
<img src="design/mini/minivuedensemble.jpg" alt="" />
</a>

Sans oublier de mettre entre <head> et </head> :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<!-- Scripts - jQuery : initialisation -->
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
 
<!-- Scripts + CSS - Photos : prettyPhoto -->
<link type="text/css" rel="stylesheet" media="screen" href="../prettyPhoto/css/prettyPhoto.css" />
<script type="text/javascript" src="../prettyPhoto/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>

En indiquant le bon chemin vers ton dossier "prettyPhoto".

=> Voir la Documentation prettyPhoto (tout est expliqué !)

**Jules59** · 03/10/2012, 19h22

Je te remercie de ton aide, mais j'y comprends rien

Merci encore

Invité · 03/10/2012, 19h37

Envoyé par jreaux62

=> Voir la Documentation prettyPhoto (tout est expliqué !)

Si tu ne comprends pas l'anglais, tu peux toujours traduire les textes avec : http://translate.google.fr/#en/fr/

**Jules59** · 03/10/2012, 19h51

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

**NoSmoking** · 03/10/2012, 21h18

Bonsoir,
ce genre de chose ce fait en 100% CSS.

Images décalées en survol

HTML

Discussions similaires

Partager

Partager