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.
Configuration: Windows Vista Internet Explorer 7.0
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. -
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-
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 !!)
@+- 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
-
-
le holandais c'est toi qui la créer sur quel hébéregeur pliz
-
oui, le site ci dessus, est entierrement de moi. Il est hébergé chez Webou.net
-
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
c'est gratuit
-
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} -
et on a combien d'espace
-
Webou c'est fermer jusqua decembre
-
le href c'était pour faire une image cliquable , au cas où , sinon enlève le.
-
-
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 !
@+ -
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 !-
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.
:-)
-
-
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'" />
-
Du pur javacript comporte les mêmes écueils que du pur CSS : on désactive le js (perso ça m'arrive souvent quand j'en ai marre des pubs intrusives) et pouf : plus de zoom.
- 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.
-
-
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. -
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. -
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 ?
-
Bonjour PhP,
Pourrais-tu me filer ton script javascript?
Merci
