AGRANDIR IMAGE AU PASSAGE DE LA SOURIS
louis1984
Messages postés
344
Statut
Membre
-
louis1984 Messages postés 344 Statut Membre -
louis1984 Messages postés 344 Statut Membre -
Bonjour,
Je souhaite qu'une image s'agrandisse lorsqu'elle est survolee par la souris, et qu'elle reprenne sa dimention d'origine lorsqu'elle n'est plus survolee par la souris.
J'ai ce code: <img src="image/image.jpg" onmouseover="this.height=200 px; this.width='500 px'">,
Comment je peux faire pour que l'image reprenne sa taille d'origine une fois qu'elle n'est plus survolee par la souris?
Merci.
Je souhaite qu'une image s'agrandisse lorsqu'elle est survolee par la souris, et qu'elle reprenne sa dimention d'origine lorsqu'elle n'est plus survolee par la souris.
J'ai ce code: <img src="image/image.jpg" onmouseover="this.height=200 px; this.width='500 px'">,
Comment je peux faire pour que l'image reprenne sa taille d'origine une fois qu'elle n'est plus survolee par la souris?
Merci.
A voir également:
- AGRANDIR IMAGE AU PASSAGE DE LA SOURIS
- Agrandir une image - Guide
- Quelle touche pour débloquer la souris ? - Guide
- Passage qwerty azerty - Guide
- Agrandir les icones de la barre des taches - Guide
- Image iso - Guide
18 réponses
Salut : en css.
https://lehollandaisvolant.net/errors/404.html#popup < tuto.
Exemple : http://lehollandaisvolant.net/tuto/css/exemple3.html
Si tu veux que ce soit "au passage de la souris", remplace simplement le "active" par "hover" dans le code.
https://lehollandaisvolant.net/errors/404.html#popup < tuto.
Exemple : http://lehollandaisvolant.net/tuto/css/exemple3.html
Si tu veux que ce soit "au passage de la souris", remplace simplement le "active" par "hover" dans le code.
chez moi ça marche dans IE7 et 8. Tiens, chrome non… étrange…
Tentes celui là : https://lehollandaisvolant.net/errors/404.html#popup_bulle
ceux ci marchent sous IE7 et 8 et tout le reste http://lehollandaisvolant.net/tuto/css/exemple9.html
Tentes celui là : https://lehollandaisvolant.net/errors/404.html#popup_bulle
ceux ci marchent sous IE7 et 8 et tout le reste http://lehollandaisvolant.net/tuto/css/exemple9.html
là ok ça fonctionne sous FF, Chrome, IE 8 7 mais sous IE 5.5 & 6 non c'est juste le 'title' qui apparaît
je pense que tu devrais essayer d"améliorer l'autre version qui possède title et alt, car là c'est valable pour les moteurs, mais pour des images, je ne pense pas que ça puisse passer ??? si tu y arrives (avec surtout alt, fais signe !!)
@+
je pense que tu devrais essayer d"améliorer l'autre version qui possède title et alt, car là c'est valable pour les moteurs, mais pour des images, je ne pense pas que ça puisse passer ??? si tu y arrives (avec surtout alt, fais signe !!)
@+
en effet, si l'exemple8.html
Mais si tu regardes bien, ce n'est pas le "title" mais bien un "span" ou un "div" qui devient le popup.
et le 'title' n'est pas configurable, contrairement au div, sur quoi tu fais ce que tu veux.
sinon, pour IE6 et 5.5, c'est pas la peine. IE6 ne comprend pas le "hover". Seul du javascript pourais faire ça.
Mais je ne connais pas… google si.
Je fait tout en CSS moi
Mais si tu regardes bien, ce n'est pas le "title" mais bien un "span" ou un "div" qui devient le popup.
et le 'title' n'est pas configurable, contrairement au div, sur quoi tu fais ce que tu veux.
sinon, pour IE6 et 5.5, c'est pas la peine. IE6 ne comprend pas le "hover". Seul du javascript pourais faire ça.
Mais je ne connais pas… google si.
Je fait tout en CSS moi
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
exemple :
<a href=""><img class="6" src="logo.png" alt="nom de l'image" /></a> Zoomer une image sans border
img.6{border:none}
a:hover img.6 {border:none; width:100px; height:100px}
<a href=""><img class="6" src="logo.png" alt="nom de l'image" /></a> Zoomer une image sans border
img.6{border:none}
a:hover img.6 {border:none; width:100px; height:100px}
peut ton écrir du html/css dans un hébergeur php/mysql
pour notre hollandais volant:
essaie de reprendre ton premier concept et de voir si tu peux le rendre compatible tous navigateurs ...
mais il y a des différences entre les liens sur du texte et ceux sur une image !
l'article de Pascale est une piste, mais elle coince aussi sur les problèmes de compatibilité ...
à mon avis javaScript , oui, css ... pense pas !
@+
essaie de reprendre ton premier concept et de voir si tu peux le rendre compatible tous navigateurs ...
mais il y a des différences entre les liens sur du texte et ceux sur une image !
l'article de Pascale est une piste, mais elle coince aussi sur les problèmes de compatibilité ...
à mon avis javaScript , oui, css ... pense pas !
@+
Ca dépend si tu veux que ça fonctionne avec IE6 aussi ou si on décide que les 20% de malheureux qui sont encore à utiliser ce triste navigateur n'ont pas le droit au zoom....
Parce que sinon, sans se prendre la tête, un petit img:hover c'est carrément le plus simple !
Parce que sinon, sans se prendre la tête, un petit img:hover c'est carrément le plus simple !
C'est ma philosophie aussi : les pécores qui sont encore à IE6, méritent pas les éffets CSS.
Non seulement, leurs ordi n'est pas à jour de ce fait : ils sont vulnérables aux virus plus que les autres. Et les virus se propageant de pc en pc, ce sont eux qui font que l'internet déborde de Spam et de virus.
en gros, ils sont des nids à virus pour les honetes internautes et pour ma part ne méritent pas les zoom sur les images.
:-)
Non seulement, leurs ordi n'est pas à jour de ce fait : ils sont vulnérables aux virus plus que les autres. Et les virus se propageant de pc en pc, ce sont eux qui font que l'internet déborde de Spam et de virus.
en gros, ils sont des nids à virus pour les honetes internautes et pour ma part ne méritent pas les zoom sur les images.
:-)
Sinon, t'as simplement un attribut onmouseout :
<img src="chemin/vers/image" alt="" onmouseover="this.height='200px'; this.width='500px'" onmouseout="this.height='100px'; this.width='250px'" />
Ahem.. ;) : je parle du javascript désactivé en commentaire à la solution "pur js" de spoom...
En d'autres termes : si on désactive le js, on n'a plus de zoom avec une solution qui ne repose que sur le js.
On donc le même pb (pas de zoom) qu'avec une solution pur CSS en cas de désactivation ou non prise en charge (ou prise en charge partielle) des CSS.
En d'autres termes : si on désactive le js, on n'a plus de zoom avec une solution qui ne repose que sur le js.
On donc le même pb (pas de zoom) qu'avec une solution pur CSS en cas de désactivation ou non prise en charge (ou prise en charge partielle) des CSS.
Merci bcp pour vos commentaires. Une derniere question:
J'ai une colonne composee d'images. Comment faire pour que les images ne se decallent pas vers le bas a chaque fois qu'une image est agrandie au passage de la souris? J'aimerais que l'image agrandie deborde legerement sur l'image du dessus et l'image du dessous sans decaller les autres images..
Est-ce possible? Si oui comment faire?
Merci par avance.
J'ai une colonne composee d'images. Comment faire pour que les images ne se decallent pas vers le bas a chaque fois qu'une image est agrandie au passage de la souris? J'aimerais que l'image agrandie deborde legerement sur l'image du dessus et l'image du dessous sans decaller les autres images..
Est-ce possible? Si oui comment faire?
Merci par avance.
Oui c'est possible, mais tu as utilisé le javascript ou le CSS ?
Si ton truc est en CSS, utilise le positionnement relative ou absolute lors de l'agrandissement.
Si ton truc est en CSS, utilise le positionnement relative ou absolute lors de l'agrandissement.
Bjr
Question de point de vue !
Pour moi le CSS doit se cantonner à ce pourquoi il est fait à savoir : le rendu.
Avec cette règle : jamais aucun hack dans le code CSS ou je ne l'utilise pas !
Pour tout le reste je passe par le Javascript :-)
L'utilisateur a désactivé Javascript ? C'est son droit j'espère seulement qu'il a aussi désactivé les activeX et les anims Flash lol
Sinon je dois avoir un script qui zoom une image en Javascript évidemment what else ?
Question de point de vue !
Pour moi le CSS doit se cantonner à ce pourquoi il est fait à savoir : le rendu.
Avec cette règle : jamais aucun hack dans le code CSS ou je ne l'utilise pas !
Pour tout le reste je passe par le Javascript :-)
L'utilisateur a désactivé Javascript ? C'est son droit j'espère seulement qu'il a aussi désactivé les activeX et les anims Flash lol
Sinon je dois avoir un script qui zoom une image en Javascript évidemment what else ?
et après vérification sous IE6 c'est vrai c'est affreux, c'est l'original qui passe mais surtout je viens de tester et :
ça ne passe pas du tout sous IE8 ou 7, ni sous Chrome ... dommage !