comment grossir une image au passage de la souris
Hors ligneKoytlo2 Le 23/05/2014 à 17:36 Profil de Koytlo2 Configuration de Koytlo2

Fidèle à VIC. Ancien

salut  Heureux

si je veux créér une page web avec des images comment puis-je créer le script (ou en auto si çà existe) qui me permettrait de grossir cette image pour qu'elle soit lisible en plein écran par ex ?

c'est pour gagner de la place car il y aura un nombre conséquent d'images sur une seule page.

est-ce que si je fais une page sur un site gratuit spécifique à cet usage, je pourrais intégrer par la suite de manière manuelle le script qui permet de grossir ces images ?

salut

Hors ligneAnthony Le 23/05/2014 à 17:48 Profil de Anthony Configuration de Anthony

Admin

Salut Koytlo :)

Grossir quoi, et comment ?

--

Hors ligneKoytlo2 Le 23/05/2014 à 19:11 Profil de Koytlo2 Configuration de Koytlo2

Fidèle à VIC. Ancien

salut

si c'est le contexte que tu ne comprends pas je vais te l'expliquer. Il y a certaines pages internet que j'aimerais faire mais pas pour avoir une adresse mais pour une présentation sur pc. En effet les page html offre d'immense possibilité. 

En fait je rassemble des idées et je vois jusqu'à quel point c'est crédible pour un novice en la matière comme moi.

donc au niveau des images  je vais t'expliquer 

par ex 

l'image sans le passage de la souris se présente comme ceci à gauche puis au passage de la souris comme cela à droite :

             

un autre exemple montre la photo de gauche suffisament représentative pour savoir de quoi il s'agit sans pouvoir lire et la photo de droite la photo agrandi dans un format pré déterminé (identique à toutes les images ou au contraire égale à l'image originale).

          

est-ce que tu comprends ? C'est juste au passage de la souris le temps delire la page. si on enlève le pointeur de la souris çà redevient petit.

salut

Hors ligneAnthony Le 23/05/2014 à 19:22 Profil de Anthony Configuration de Anthony

Admin

Tes images font les mêmes dimensions ou pas ?

--

Hors ligneKoytlo2 Le 23/05/2014 à 20:39 Profil de Koytlo2 Configuration de Koytlo2

Fidèle à VIC. Ancien

re

l'image de réf est la grande . si tu me dits qu'il faut redimensionner je peux le faire après c'est la meilleure façon ou tout du moins la plus simple qui prime. la petite image sert juste de vignette (d'appel). 

salut

Hors ligneAnthony Le 23/05/2014 à 22:13 Profil de Anthony Configuration de Anthony

Admin

Ok, donc tes images ne font pas la même dimension. Si elles faisaient la même dimension il y aurait eu un moyen très simple avec le langage  CSS. Là, il faudrait mieux passer par du Java cript et je te conseille d'utiliser le framework Jquery. Tu as des plugins tout faits qui te permettent de faire ce que tu souhaites, par exemple fancybox.

Ce plugin, à partir d'une page très simple html et d'un peu de Java cript (tout est affiché sur leur site) te permet de faire ce que tu souhaites, sans prise de tête Sourire N'hésite pas si tu as besoin d'aide Ok

--

Hors ligneKoytlo2 Le 24/05/2014 à 14:06 Profil de Koytlo2 Configuration de Koytlo2

Fidèle à VIC. Ancien

salut  Heureux

si je comprends bien dans le lien que tu m'as donné, l'intégration et l'animation des image données en exemple peuvent être programmer en javascript ou en html (voir les divers onglets) ?

si je faisais un post sur vic par ex est-ce que je pourrais intégrer ce genre de code (en html) pour que les effets soient identiques ?

est-ce que si je créé une page sur un site sur lequel on peut gratuitement et facilement construire une page web, est-ce que je pourrais en faisant un script comme tu m'as dit rajouter les images ? en effet je part du principe qu'une fois que le site est construit par le biais d'un log ou d'un site en ligne il est impossible de rajouter un script . ai-je raison ?

en ce qui me concerne ce que je souhaite faire n'est de cliquer pour faire apparaitre l'image en plus gros (ce qui n'est déjà pas mal j’admets) mais plutôt de créer une animation comme un zoom. JUSTE AU PASSAGE DE LA SOURIS L'IMAGE DOIT GROSSIR ET DES QUE L'ON ELOIGNE LA SOURIS L'IMAGE REDEVIENT PETITE.

remarque : tu sembles dépendre de ce que les tailles de mes images seraient différentes ou pas. Moi je te dis que je m'en fou. En effet si tu estimes qu'il faut changer la taille des images tu me le dits. Si tu mes dis que les images doivent etre les meme je fais en sorte que c'est les meme.

salut

Hors ligneAnthony Le 25/05/2014 à 14:51 Profil de Anthony Configuration de Anthony

Admin
Koytlo2 a écrit:

salut  Heureux

si je comprends bien dans le lien que tu m'as donné, l'intégration et l'animation des image données en exemple peuvent être programmer en javascript ou en html (voir les divers onglets) ?

C'est bien ça, c'est du HTML pour toute la partie qui va afficher les images sur ton navigateur, la partie CSS s'occupe de mettre en forme la page web (rendu visuel) tandis que la partie javascript va s'occuper des effets lorsque tu cliques sur une image (affichage de l'image dans une boîte).  Heureux 

Koytlo2 a écrit:

si je faisais un post sur vic par ex est-ce que je pourrais intégrer ce genre de code (en html) pour que les effets soient identiques ?

Non car il s'agirait d'une faille de sécurité importante. Le javascript et CSS ne sont pas permis sur VIC (ni sur n'importe quel forum digne de ce nom). Par contre, je pourrais faire en sorte que l'on puisse cliquer sur les images, ça serait beaucoup mieux oui  Sourire 

Koytlo2 a écrit:

est-ce que si je créé une page sur un site sur lequel on peut gratuitement et facilement construire une page web, est-ce que je pourrais en faisant un script comme tu m'as dit rajouter les images ? en effet je part du principe qu'une fois que le site est construit par le biais d'un log ou d'un site en ligne il est impossible de rajouter un script . ai-je raison ?

Si tu as accès au compte FTP du site, tu peux faire presque tout ce que tu veux, y compris donc rajouter des images.

Si tu souhaites pouvoir rajouter les images directement (un peu comme VIC) de manière dynamique, en mettant un champ "parcourir" il faut que tu utilises un langage dynamique tel que PHP. Tu peux regarder ce lien : Uploader des images en PHP.

Koytlo2 a écrit:

en ce qui me concerne ce que je souhaite faire n'est de cliquer pour faire apparaitre l'image en plus gros (ce qui n'est déjà pas mal j’admets) mais plutôt de créer une animation comme un zoom. JUSTE AU PASSAGE DE LA SOURIS L'IMAGE DOIT GROSSIR ET DES QUE L'ON ELOIGNE LA SOURIS L'IMAGE REDEVIENT PETITE.

C'est simple à faire avec fancybox, au lieu d'appeler l'évènement (affichage de la boîte) au clic de la souris comme c'est le cas par défaut, tu appelles l'évènement (affichage de la boîte) au survol de la souris. Avec Jquery, l'évènement de clic de souris s'appelle click et l'évènement survol s'appelle mouseover.

Un exemple un peu bidon :

<img src="image.png" alt="" class="image_zoom">
<script>
$(document).ready(function(){
       $('.image_zoom').mouseover(function(){
             alert('mon curseur passe sur l\'image.');
       });
});
</script>
Koytlo2 a écrit:

remarque : tu sembles dépendre de ce que les tailles de mes images seraient différentes ou pas. Moi je te dis que je m'en fou. En effet si tu estimes qu'il faut changer la taille des images tu me le dits. Si tu mes dis que les images doivent etre les meme je fais en sorte que c'est les meme.

En fait je te demandais ça car quand tu as des images de mêmes dimensions tu peux faire un zoom classique sans javascript avec uniquement du CSS : zoom en CSS sur une image.

Si tu souhaites faire un zoom non maximal (en gros faire un zoom *2 par exemple mais qui n'affiche pas forcément l'image en taille réelle), tu peux toujours utiliser les CSS. Ca évite d'utiliser du javascript, c'est plus léger et plus élégant. On en revient au code que je t'ai montré sur le lien ci-dessus.

--

Hors ligneKoytlo2 Le 25/05/2014 à 20:38 Profil de Koytlo2 Configuration de Koytlo2

Fidèle à VIC. Ancien

salut  Lunettes

çà devient plus complexe que je croyais mais en même temps plus clair. J'adore ton tour d'horizon Heureux. Ma question est en effet simple (dans sa demande explicite ) mais compliqué par son coté implicite et contextuel. En effet je ne pouvais préciser dans quel contexte exact je voulais intégrer ma demande car çà dépendait de ce que l'on peut faire.

aujourd'hui je peux répondre à çà 1- par connaissance générale 2- pour faire un projet que j'ai abandonné depuis qui consistait à faire un panneau d'affichage sur un seul écran pc (vu la place çà m'aurait arrangé) 3- pour faire un post (ou article) sur VIC en ce qui concerne un projet que j'avais il y a quelques temps déjà si tu te souviens bien : améliorer mon pc de fond en comble et mettre des graphiques pour exprimer l'évolution des choses à chaque étape. Ce qui suggère 3 ou 4 graphiques par étapes (30 à 50).

C'est bien ça, c'est du HTML pour toute la partie qui va afficher les images sur ton navigateur, la partie CSS s'occupe de mettre en forme la page web (rendu visuel) tandis que la partie javascript va s'occuper des effets lorsque tu cliques sur une image (affichage de l'image dans une boîte). Heureux

en fait j'avais mal compris car je croyais que l'on pouvais tout programmer dans un langage ou un autre (chacun bien sûr avec ses limites) et qu'il fallait juste faire le choix entre un langage ou un autre. En fait de toute evidence il faut choisir un langage suivant le contexte (site, forum, ..) ou en fonction du type de programmation (caractère, type d'animation, images, ...). Est-ce çà ?

Par contre, je pourrais faire en sorte que l'on puisse cliquer sur les images, ça serait beaucoup mieux oui Sourire

si çà te dérange pas çà me plairais bien pour la 3e raison que j'ai évoqué plus haut. Mais pour ton confort et le mien (au vu du nombre conséquent de graphiques résultats ou de scores) il vaudrait mieux que tu m'indiques comment l'intégrer au post. Par ex en passant pas le bouton "<>" (code html).

est-ce qu'elle peut être stockée sur le pc ou elle doit être stocké sur le cloud de VIC par ex ? 

Mais de toute façon de manière plus générale je trouverais intéressant, dans le cadre aussi de l'optimisation de VIC, de mettre un bouton qui pourrait intégrer les images de cette façon. Je trouverai l'animation super intéressante. Par contre je n'en ai pas vraiment mesuré l'intérêt réel.

Si tu as accès au compte FTP du site, tu peux faire presque tout ce que tu veux, y compris donc rajouter des images.

Si tu souhaites pouvoir rajouter les images directement (un peu comme VIC) de manière dynamique, en mettant un champ "parcourir" il faut que tu utilises un langage dynamique tel que PHP. Tu peux regarder ce lien : Uploader des images en PHP.

je le regarderai mieux plus tard. Ce qui manque pour moi c'est des contexte précis qui justifie que l'on ne puisse pas employer d'autre langage (mais j'avoue que j'ai pas bien lu) et surtout il manque des images comme ex. Sinon je suis vite perdu. Je fonctionne comme un robot : une animation + contexte = script particulier (dans un langage particulier). Mais merci tout de meme je te dirais ce que j'en pense une fois que je l'aurais bien lu.

C'est simple à faire avec fancybox, au lieu d'appeler l'évènement (affichage de la boîte) au clic de la souris comme c'est le cas par défaut, tu appelles l'évènement (affichage de la boîte) au survol de la souris. Avec Jquery, l'évènement de clic de souris s'appelle click et l'évènement survol s'appelle mouseover.

le problème est que je manque de vocabulaire à ce niveau . De plus j'ai un soucis car si tu dis "image1.jpg" comment indique-ton où est l'image ? est-ce qu'elle peut être stockée sur le pc ou elle doit être stocké sur le cloud de VIC par ex ? 

En fait je te demandais ça car quand tu as des images de mêmes dimensions tu peux faire un zoom classique sans javascript avec uniquement du CSS : zoom en CSS sur une image.

Si tu souhaites faire un zoom non maximal (en gros faire un zoom *2 par exemple mais qui n'affiche pas forcément l'image en taille réelle), tu peux toujours utiliser les CSS. Ca évite d'utiliser du javascript, c'est plus léger et plus élégant. On en revient au code que je t'ai montré sur le lien ci-dessus.

çà m'intéresse mais comment définit-on le degré de zoom ? où peut-on l'intégrer et comment ? est-ce que c'est cette méthode que tu comptes utiliser lorsque tu comptes m'aider ?

salut


Vous avez résolu votre problème avec VIC ? Faites-le savoir sur les réseaux sociaux !
Vulgarisation-informatique.com
Cours en informatique & tutoriels