Forum Clubic

Affichage d'une image dans un autre cadre - en xhtml - css - javascript

Bonjour à tous,

Ca fait maintenant quelque jour que je cherche une solution à mon problème et j’espère que ce forum où de moins vous pourrez m’aider.
Voilà je réalise un petit site internet et une de mes pages sert à l’affichage de différentes images.

Je m’explique :

Sur ma page j’ai une liste à gauche de mes images. Afin d’éviter d’avoir une page qui descend trop loin à cause de la liste, j’ai intégré une balise div qui me permet de créer une barre de défilement. Dans cette liste les images sont en petit format. Ce que je souhaiterais c’est que quand je clique sur une des images en petit format sur la gauche, elle s’affiche en grand dans la grande partie à sa droite. Il va de soit que ce grand cadre à droite sert à afficher toutes les images qui sont dans la liste. Je pense que le plus simple pour gérer ce type d’affichage est d’utiliser le javascript. De plus quand je clique sur l’image, doit-elle être mise dans une balise du genre <a> ou <a href> ou autres.

Merci pour toutes vos réponses

PS : Voici le lien d’une page sur eBay qui représente bien ce que je voudrais faire : http://cgi.ebay.fr/POCKET-BIKE-EL-DIABLO-N…1QQcmdZViewItem

Ton topic tombe à point nommé, je ne me suis pas encore penché dessus mais je vais devoir faire la même chose que toi, je doit terminer le moteur de recherche de mon site avant, s’il n’y a pas de réponse, je chercherais et posterais la réponse si je l’ai (je débute dans la prog web)

Bonjour,

tu peux afficher une image par défaut de grande taille, là ou doivent s’afficher les images, tu lui attribue un id :<img id=imgaff, et tu change la valeur en java script:

<a href="#" onclick="document.getElementById(“imgaff”).src=‘img0123456.jpg’>la petite image </a>

Oui t’as réponse marche aussi. J’ai pas eu le temps de répondre pour vous dire que j’ai trouvé mais moi ce que j’ai fait c’est la même chose mais part appel de fonction car avec ta méthode ça fait un lien que je ne voulais pas avoir. Alors j’ai fait un appel de fonction sur onclick="".
Si vous voulez que je détaille plus dite le moi? Surtout pour toi KarLKoX vu que tu vas t’y intéresser sous peu.

Tchao et merci de votre aide

Je ne suis pas contre une visualisation du code, si ça peut me permettre de gagner du temps :stuck_out_tongue:

On peut pas simplement faire 2 frames, et mettre une page avec toutes les petites photos l’une en dessous de l’autres et mettre un jolie


<A HREF="NomDeL'Image.Extension" TARGET="NomFrameDeDroite"><IMG SRC="NomPetiteImage.Extension"></A>

Ca fonctionnerait assez bien, et au moins faut pas s’amusé avec du Javascript, DIV et autres :sweet:

Oui mais justement, je ne veux pas utiliser les frames ! Je fait tout via css + xhtml d’où mon intervention dans ce topic comme indiqué dans le titre.
Merci quand même :slight_smile:

J’ai vu trop tard :sweet: et m’excuse :oui:

Bonne chance en tous cas :jap: Je connais pas le XHTML ni CSS… (va falloir que j’etudie ça un jour :miam: )

J’en connais surement pas plus que toi mais bon, je me motive pis j’ai pas le choix car j’utilise spip :paf:

C’est assez déconseillé d’utiliser les frames, ça ne fait plus parti du XHTML strict, de même que l’attribut “target”
Pour les nouveaux sites il faut utiliser de préférence DIV+CSS dans une seule page. même les popups sont téhoriquement interdites.
:slight_smile:

Ca fait surtout parti du module frame de xhtml :slight_smile: si tu sais l’activer, alors tu as droit de t’en servir ^^

Je préfère dire au client que je sais pas, ça me fait moins de boulot! :o

et effectivement, je ne sais pas, :whistle: comme enn plus ils ont viré l’attribut traget, c’est vraiment utilisable?

Parce que l’attribut target est dans le module frame :slight_smile:

Des vignettes et une seul grande image ?
Est-ce que ce que tu recherches ressemble à ça ?

Ca y ressemble un peu en effet, l’idée est la.
Comme ça utilise spip et que je viens de pomper le javascript, je m’en vais tester ça, merci, j’ai compris le principe grâce à toi :slight_smile:

Ce n’est pas du spip “de base”
la syntaxe du hoverbox est directement inspirée des mises en page des documents et images inclus dans les pages spip, mais j’ai réécrit pour cela deux fonctions hoverboxtexte() et hoverboximg() qui se trouvent comme il se doit dans squelettes/mes_fonctions.php, ce qui fait que je ne suis pas sûr que tu puisses y accéder directement.

Ah bon ? Car si j’en crois le code source, tu utilises deux fonctions javascript : montre() sur le onmouseover et cache() sur le onmouseout(), me trompe je ?

EDIT : (avant même l’ajout du post, lol) j’avait pas vu la class juste avant mais c’est pas grave, c’est lors du click sur la vignette que je veux que ça affiche l’image en grand plus du texte à droite dans un autre cadre.

Pour la partie affichage de la grande image par rapport aux vignettes, tu n’auras en principe pas de problème.

Le problème est justement de générer les lignes de code appelant ces fonctions à partir des squelettes spip, tout en restant compatible avec l’éditeur spip et en faisant en sorte que ce soit transparent pour l’utilisateur.

Mais c’est vrai que c’est un autre problème, je l’avais mentionné juste pour que tu ne sois pas surpris par rapport au spip habituel.