Agrandire une image au passage de la souris

2 participants

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

Résolu Agrandire une image au passage de la souris

Message par etoile pailletée Lun 19 Mar 2012 - 11:18

Je voudrais savoir comment agrandir une image juste au passage de la souris . C'est a dire que quand on passe la souris sur une image sa l'agrandit automatiquement .

Cordialement
avatar

etoile pailletée
**

Messages : 82
Inscrit(e) le : 14/02/2012

http://les-loup-sauvage.creerforumgratuit.com/
etoile pailletée a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Agrandire une image au passage de la souris

Message par Dr. Karlos Lun 19 Mar 2012 - 12:39

Bonjour,

Vous pouvez le faire de plusieurs façons, dont avec deux images de tailles différentes ou avec du CSS.

Vous devez placer votre image dans ce code pour agrandir l'image avec du CSS:
Code:
<img src="ADRESSE DE L'IMAGE" class="zoom"></img>

Pour que le zoom soit fonctionnel, vous devez insérer ce code dans votre CSS (PA | Affichage | Images et couleurs | Couleurs | Feuille de style CSS):
Code:
.zoom{
width: LARGEUR;
height: HAUTEUR;}
 
.zoom:hover{
width: LARGEUR APRÈS;
height: HAUTEUR APRÈS;
}

La première partie du code correspond aux dimensions de l'image sans passage de la souris et la deuxième partie correspond aux dimensions après le passage. Wink


Cordialement.


Dernière édition par Dr. Karlos le Mar 20 Mar 2012 - 1:50, édité 1 fois
Dr. Karlos

Dr. Karlos
Membre actif

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

Dr. Karlos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandire une image au passage de la souris

Message par etoile pailletée Lun 19 Mar 2012 - 16:20

Je voudrais faire agrandir l'image dans les généralités et j'ai essayer cela ne marche pas . Avez vous un autre code pour les Généralités
avatar

etoile pailletée
**

Messages : 82
Inscrit(e) le : 14/02/2012

http://les-loup-sauvage.creerforumgratuit.com/
etoile pailletée a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandire une image au passage de la souris

Message par Dr. Karlos Mar 20 Mar 2012 - 1:51

Re,

J'avais fait une petite erreur dans le code, elle est maintenant corrigée dans le premier message. Embarassed

Utilisez plutôt ce code:
Code:
.zoom{
width: LARGEUR;
height: HAUTEUR;}
 
.zoom:hover{
width: LARGEUR APRÈS;
height: HAUTEUR APRÈS;
}

Si ça ne fonctionne toujours pas, pouvez-vous copier ici les codes que vous avez utilisés?


Cordialement.
Dr. Karlos

Dr. Karlos
Membre actif

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

Dr. Karlos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandire une image au passage de la souris

Message par etoile pailletée Mer 21 Mar 2012 - 19:30

Je voudrais l'agrandir sans aller dans la feuille de CSS
avatar

etoile pailletée
**

Messages : 82
Inscrit(e) le : 14/02/2012

http://les-loup-sauvage.creerforumgratuit.com/
etoile pailletée a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandire une image au passage de la souris

Message par Dr. Karlos Mer 21 Mar 2012 - 23:27

Bonsoir,

La deuxième solution s'applique donc avec deux images. Wink

Vous pouvez aussi le faire avec du javascript en insérant ce code:
Code:
<script language="JavaScript">
<!--
//PLF-http://www.jejavascript.net/
var coeff=4;//Coefficient de reduction
var larg=400;//largeur maximale de l'image
var haut=388;//hauteur maximale de l'image
var coeffinit=coeff;
function changer() {
if (document.image.width < larg) {
coeff = coeff-0.2;
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);
chang=window.setTimeout('changer();',60);//vitesse de l'effet
}
else {window.clearTimeout(chang);}
}
function initial() {
if (document.image.width > larg/coeffinit) {
window.clearTimeout(chang);
coeff = coeff+0.2;
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);

initi=window.setTimeout('initial();',60);//vitesse de l'effet
}
else {window.clearTimeout(initi);}
}
//-->
</script>
<div align="center">
<a href="#img" onMouseOut="initial()" onMouseOver="changer()" ><img src="ADRESSE DE L'IMAGE" border="0" name="image"></a></div>

Les paramètres à modifier sont les suivants:
Code:
var coeff=4;//Coefficient de reduction
var larg=400;//largeur maximale de l'image
var haut=388;//hauteur maximale de l'image
Le coefficient de réduction concerne le nombre de fois que l'image est rapetissée.
Code:
chang=window.setTimeout('changer();',60);//vitesse de l'effet
Code:
initi=window.setTimeout('initial();',60);//vitesse de l'effet
Code:
img src="ADRESSE DE L'IMAGE"
Ce code ne peut par contre pas être inséré dans les messages puisqu'il contient du javascript. Wink


Cordialement.
Dr. Karlos

Dr. Karlos
Membre actif

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

Dr. Karlos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandire une image au passage de la souris

Message par etoile pailletée Ven 23 Mar 2012 - 17:56

Merci Very Happy
avatar

etoile pailletée
**

Messages : 82
Inscrit(e) le : 14/02/2012

http://les-loup-sauvage.creerforumgratuit.com/
etoile pailletée a été remercié(e) par l'auteur de ce sujet.

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