Agrandire une image au passage de la souris
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème divers :: Archives des problèmes divers
Page 1 sur 1 • Partagez
Agrandire une image au passage de la souris
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
Cordialement
Re: Agrandire une image au passage de la souris
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:
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):
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.
Cordialement.
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.
Cordialement.
Dernière édition par Dr. Karlos le Mar 20 Mar 2012 - 1:50, édité 1 fois
Dr. Karlos- Membre actif
-
Messages : 2623
Inscrit(e) le : 03/01/2012
Re: Agrandire une image au passage de la souris
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
Re: Agrandire une image au passage de la souris
Re,
J'avais fait une petite erreur dans le code, elle est maintenant corrigée dans le premier message.
Utilisez plutôt ce code:
Si ça ne fonctionne toujours pas, pouvez-vous copier ici les codes que vous avez utilisés?
Cordialement.
J'avais fait une petite erreur dans le code, elle est maintenant corrigée dans le premier message.
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- Membre actif
-
Messages : 2623
Inscrit(e) le : 03/01/2012
Re: Agrandire une image au passage de la souris
Je voudrais l'agrandir sans aller dans la feuille de CSS
Re: Agrandire une image au passage de la souris
Bonsoir,
La deuxième solution s'applique donc avec deux images.
Vous pouvez aussi le faire avec du javascript en insérant ce code:
Les paramètres à modifier sont les suivants:
Cordialement.
La deuxième solution s'applique donc avec deux images.
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
- 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"
Cordialement.
Dr. Karlos- Membre actif
-
Messages : 2623
Inscrit(e) le : 03/01/2012
Sujets similaires
» image réactive : modification de l'image au passage de la souris
» Image qui changent au passage de la souris
» Image qui change au passage de la souris
» Agrandir " une " image au passage de la souris
» Changer d'image au passage de la souris
» Image qui changent au passage de la souris
» Image qui change au passage de la souris
» Agrandir " une " image au passage de la souris
» Changer d'image au passage de la souris
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème divers :: Archives des problèmes divers
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum