aide pour débutant en java script (exercice concret)

jpv56 · Message par **jpv56** » 02 févr. 2009, 22:43

Bonsoir à tous,
Je me permets de laisser un post ici car je suis en prise avec un problème compliqué pour moi mais a priori d'une simplicité enfantine pour qui manipule un tant soi peu le javascript.

Voilà : j'ai trouvé un script qui permet de cliquer sur une vignette et d'afficher l'image en grand au même emplacement que la vignette. Cette solution est plus sympa, je trouve, que d'afficher l'image en taille réelle dans une nouvelle fenêtre.

Problème : j'ai plusieurs images sur ma page et je suis incapable d'appliquer ce script à plus d'une image ! J'ai essayé de bidouiller dans le code mais en vain. Je voudrais donc savoir comment procéder, sachant que je maitrise peu (voire pas du tout) le langage java script.

Le script en question est celui-ci :
http://www.jejavascript.net/imag_plus.php#image

Si quelqu'un pouvait m'indiquer ce que je dois ajouter pour appliquer le script à une seconde image.

Merci d'avance.

jpv56

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5

Pastisman · Message par **Pastisman** » 03 févr. 2009, 09:56

Bonjour,

Le code javascript est à mon avis superflu et surtout celui-ci est très moche.
Je te conseil plutôt le css :
http://css.mammouthland.net/zoom_thumbnail.php
http://openweb.eu.org/articles/zoom_image

tu n'aura plus alors qu'à appliquer la classe .thumb dans le premier cas ou .zoom dans le second à toutes les images dont tu voudras modifier le comportement.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.2; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5

jpv56 · Message par **jpv56** » 03 févr. 2009, 11:59

Bonjour,
Je te remercie beaucoup pour ta réponse.
Je vais essayer en CSS en suivant les tutos dont tu m'as donné les liens.

++

jpv56

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 03 févr. 2009, 12:26

Une limite sur la méthode css: les images dans leur définition maximum sont chargées à l'appel de la page, donc ralentissent son affichage.
Donc c'est une technique à réserver pour des pages ayant une somme de la taille des images limitées.
Généralement, cela ne convient pas pour les galeries...

jpv56 · Message par **jpv56** » 03 févr. 2009, 16:05

Merci Fabrice pour tes explications.
En fait j'aurai un article à illustrer à chaque fois d'une seule photo, donc je pense que ça devrait passer sans trop de souci (pas de galerie).

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5

jpv56 · Message par **jpv56** » 03 févr. 2009, 21:04

Bon, je viens d'essayer ce soir la technique à base de CSS.
Elle fonctionne nickel mais si j'ai bien pigé elle est surtout efficace pour une page de galeries photos.
Or mon souci est de faire coexister le zoom (sur l'image) et le texte.
Voir ici :
http://bibliothequeambon.free.fr/agenda.html

Je souhaite que l'image zoomée "embrasse" mon texte (en java script ça marchait). Or ici le fait de créer un bloc décale complètement mon texte à la périphérie de l'image. Et si j'applique le style à une autre photo c'es tencore pire : les blocs se chevauchent, tout se décale.

Est-ce possible de zoomer sur une image au coeur du texte à l'aide des CSS ? Ou bien faut-il avoir recours au java script ?

Merci.

jpv56

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5

Pastisman · Message par **Pastisman** » 04 févr. 2009, 10:39

Je ne suis pas un spécialiste du HTML mais à mon avis c'est possible.
Qu'entends tu par "embrasse" ? Je pense que si tu veux que l'image passe par dessus le texte, il faut mettre je pense 2 div l'un sur l'autre avec un positionnement absolu (mais je dis peut-être des grosses bêtises !). Tu trouveras peut-être ton bonheur sur alsacréation (qu'apparemment tu doit connaître

)

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.2; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 04 févr. 2009, 12:28

Je ne te comprends pas bien.

Tu sembles te plaindre que l'agrandissement décale le reste de la page, ce qui est normal vu que l'on demande à l'image de prendre plus de place.

Toujours en css, il est possible de masquer/faire apparaître des éléments au survol de la souris d'un élément. Mais du fait des limitations et non respect des normes d'Internet Explorer, il faut se limiter à des liens. Dans ce cas il est possible de faire apparaître cet élément (l'image dans ton cas) au dessus de l'existant.
Tu peux chercher popup css pour + de détails sur cette technique.

jpv56 · Message par **jpv56** » 04 févr. 2009, 19:34

Bonsoir et merci à tous,
Je me suis surement mal exprimé mais je me comprends (c'est déjà ça lol).
Je pense que la technique du pop up en css est mieux adaptée à mes besoins. Je vais l'essayer de suite.

Bonne soirée.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5

Alexandra567 · Message par **Alexandra567** » 13 févr. 2009, 09:55

Hello,

Si tu tente ta chance en css tu as le site http://www.alsacreations.com/tutoriels/ CSS pour commencer (parfait pour moi

)

Bye

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

jpv56 · Message par **jpv56** » 13 févr. 2009, 16:48

Merci Alexandra.
J'ai trouvé mon bonheur avec le pop-up d'image en CSS. Mais je recopie (et j'ajuste) bêtement le code sans toujours comprendre ce que je fais...
C'est pourquoi ton site me sera utile afin de consolider mes bases !
Sans compter que je dois me lancer prochainement dans le PHP... toute une histoire !
Bye

JPV56

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; InfoPath.2; .NET CLR 1.1.4322)

Asumbaa · Message par **Asumbaa** » 13 févr. 2009, 17:39

Attention ils disent parfois de grosses bêtises sur cssdebutant !
Je te suggère de ne pas trop t'y fier...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

Message par **Flore** » 13 févr. 2009, 17:46

Asumbaa a écrit :Attention ils disent parfois de grosses bêtises sur cssdebutant !
Je te suggère de ne pas trop t'y fier...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

Oui, je pense qu'elle s'est trompée de site, mais j'ai vite rectifié l'erreur grossière

jpv56 · Message par **jpv56** » 13 févr. 2009, 20:26

Quel site conseillez-vous alors ?
Je connais déjà alsacreations qui est sympa.

Sinon puisqu'on discute des CSS, une petite question au passage : peut-on créer un bloc à l'intérieur d'un bloc principal ? Par exemple dans le header, si je souhaite créer un petit bloc flottant dans lequel insérer un titre. Je crois que c'est faisable, mais je ne pige pas trop comment.

Merci et bonne soirée.

JPV56

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Message par **nico@nc** » 13 févr. 2009, 22:10

Tu peux tout à fait imbriquer plusieurs blocs (le but du jeu est tout de même de ne pas en abuser) :

Code : Tout sélectionner

<div id="header">
     <div id="autrebloc" style="float:right;">
          <p>Des choses...</p>
     </div>
</div>

Pour t'initier aux CSS, tu peux soit regarder des exemples comme ceux donnés sur Alsacréations (notamment*le* tuto "CSS à partir de rien"), ou acheter un des nombreux livres à ce sujet. Je trouve également le Mémento CSS de Raphaël Goetter (Alsacréations) très pratique dès les premiers pas.

Geckozone

aide pour débutant en java script (exercice concret)

aide pour débutant en java script (exercice concret)

en CSS

Qui est en ligne ?