Images cliquable...

**Angeldu74** · 17/01/2006, 11h53

Salut à tous! En fait je souhaite juste afficher une photo dans ma page html et dès qu'on clic sa l'affiche en grand soit dans une autre page soit dans la même. Est-ce qu'il y a une fonction approprié ou dois-je faire un lien avec la photo concerné pour chaque page???
J'espère que quelqu'un m'a compris...lol
Merci d'avance pour votre aide.
Bonne continuation à tous.
Tcho

**chat hotplug** · 17/01/2006, 12h01

En utilisant juste CSS et XHTML il doit être possible de créer une classe "photos" pour CSS. Avec de petites dimensions. Ensuite on peut toujours tenter un img:hover avec des dimensions plus grandes. Mais cela pourrait ne pas marcher sur certains navigateurs... en plus ce serait juste pendant qu'on survole la photo.

Le mieux quand même c'est une fonction Javascript à appeler dans le lien avec l'évenement onClick.

Ou encore mieux et moins pénibles en terme de copier/coller: un script coté serveur genre PHP.

**Angeldu74** · 17/01/2006, 13h09

D'accord merci je crois que je vais peut être faire du php alors.
Par contre c'est quoi img:hover???
Dès que tu survoles l'image il y a un aperçu plus grand qui apparait???
Pourrais tu m'apporter + de précisions stp.
Et encore merci.
@+

**chat hotplug** · 17/01/2006, 13h53

Oui oui c'est ça:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
.photo img{
  width: 10px;
  height: auto;
}
 
.photo img:hover{
  width: auto;
  height: auto;
}

**Auteur** · 17/01/2006, 15h31

bonjour,

sous IE : la sous-classe hover ne fonctionne que pour la balise <a>

**Angeldu74** · 18/01/2006, 22h16

Okki je crois avoir compris par contre tu pourrais me mettre une synthaxe un peu plus précise stp...
Car j'ai rentré le même code que toi en changeant les sources des images et ça n'a pas marché. Il faut le mettre entre les balises <a> </a>???
Merci d'avance pour votre aide.
@+

**chat hotplug** · 26/01/2006, 15h31

Vous ne connaissez pas le CSS apparement ?
Vous trouverez certainement un bon tutorial express sur ce site.

Le code est à placé dans un fichier .css
Le fichier html concerné dois pointer sur ce fichier.

Mais si vous pouvez faire du PHP c'est surement mieux.

Enfin je vous donne quand même du code:

Mettez ceci dans <head> ... </head>

Code :

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

1
2
 
<link rel="stylesheet" type="text/css" href="styles/design_st.css" media="screen" title="Style par d&eacute;faut" />

Et créez un fichier design_st.css avec le code de mon précédent message.

Mais vous êtes prévenu que ça ne marchera pas sous tous les navigateurs.

**Trunks** · 26/01/2006, 17h30

il suffit de mettre l image entre les balises <a></a> et d'appliquer la pseudo-classe :hover sur celle-ci au lieu de l'appliquer sur <img />, comme ça ça marchera quelque soit le navigateur.

Images cliquable...

HTML

Discussions similaires

Partager

Partager