Rechercher : dans
Par :

Diaporama cliquable en html et css

Dernière réponse le 10 fév 2009 à 15:30:56 sourisgrise, le 9 fév 2009 à 21:23:01 
 Signaler ce message aux modérateurs

Bonjour,

Je suis en train de créer mon site web sous Notepad en html et en css, cela pour montrer mes photos. Dans la page d'accueil de mon portfolio, j'ai 6 vignettes, une pour chaque thème. Quand on clique sur la vignette "paysages", par exemple, cela renvoie à une page avec toutes mes photos de paysages en vignettes. Maintenant, je voudrais qu'en cliquant sur une des vignettes, on puisse voir la photo en grand, et qu'on aie la possibilité de voir les photos suivantes et précédentes au clic de souris, exactement comme sur ce site:

http://www.pbwebconcept.com/photos/galerie_nature.htm

Je ne sais pas si c'est possible de le faire uniquement en html et css (sans java), parce qu' apparemment certains navigateurs n'affichent pas java, et aussi parce que je ne connais pas ce langage...

Faut-il créer une page par photo affichée en grand ou puis-je regrouper les photos d'un même thème sur une même page ? J'ai lu quelque part qu'il fallait utiliser les liens et superposer des blocs sur une même page, mail il n'y avait pas plus de détail...

Je précise que je suis une vraie débutante en ce qui concerne la création d'un site, j'ai pu en arriver jusque là grâce au tutoriel du site du zéro...

Mais là, je bloque vraiment, merci de m'aider.

Configuration: Windows XP
Firefox 3.0.5

Meilleures réponses pour « Diaporama cliquable en html et css » dans :
Créer un site beau, dynamique et respectueux des standards VoirVoici une liste de liens qui vous aideront à mieux exploiter les standards (HTML, CSS, DOM...) pour créer des sites plus beaux, plus dynamiques et plus respectueux des standards. A la fin de cette page, il y a également une liste de...
Enlever la bordure sur une image dans un lien en HTML/CSS VoirVous avez fait une image cliquable en mettant une balise IMG au sein d'un lien et le navigateur vous affiche un cadre ou plus exactement une bordure autour de l'image. Il existe deux façons de supprimer cette bordure...
Enlever le soulignement sous les liens en HTML/CSS VoirPar défaut, les liens hypertextes en HTML sont soulignés, un trait de la couleur du lien apparaît en dessous du texte. Il est possible de supprimer ce soulignement à l'aide de la propriété CSS text-decoration:none : Grâce au CSS Grâce au CSS via...
Télécharger PSPad VoirPSPad est un excellent éditeur de texte. Il est utile pour travailler sur du simple texte, mais aussi sur du HTML, CSS, Javascript, php ou autres langages de programmation (C++, Java, Python...). Les fonctionnalités sont impressionnantes: ...
Déclaration d'une feuille de style (CSS) VoirDéclaration d'une feuille de style Les feuilles de style sont un sur-ensemble du langage HTML, cela signifie qu'elle ne sont pas intégrées directement dans les recommandations HTML du W3C. Ainsi, il est nécessaire de renseigner le code HTML avec...
Positionner des éléments grâce aux CSS VoirIl est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse...

1

totoAussi, le 9 fév 2009 à 21:35:33

Oui tu peux le faire sans java et sans javascript, juste avec html : mais les codes seront très long à écrire.

Cependant, il y a un autre solution utiliser un language qui utilise une base de données comme php, jsp,asp,...
:l'avantage, c'est qu'il y aura moins de code à taper Merci à CCM

Répondre à totoAussi

2

totoAussi, le 9 fév 2009 à 21:36:54

Oui tu peux le faire sans java et sans javascript, juste avec html : mais les codes seront très long à écrire.

Cependant, il y a un autre solution, c'est d'utiliser un language qui utilise une base de données comme php, jsp,asp,...
:l'avantage, c'est qu'il y aura moins de code à taper Merci à CCM

Répondre à totoAussi

3

davdes, le 9 fév 2009 à 21:48:12

Bonsoir,

avec ceci qui est gratuit
http://www.airtightinteractive.com/simpleviewer/

et avec de l'aide, j'ai pu réaliser ce genre de galerie
http://www.marielaurededecker.com

paramétrable jusqu'à un certain point avec les CSS
bon courage,
DD.

Répondre à davdes

4

sourisgrise, le 9 fév 2009 à 23:57:31

Merci pour vos réponses, mais vu qu'en fait ça m'est égal d'y passer un peu de temps, j'insiste, savez-vous si pour réaliser l'exemple du site que j'ai cité plus haut :
http://www.pbwebconcept.com/photos/galerie_nature.htm
il faut que je réalise une page par photo agrandie ou si c'est possible en utilisant une seule page pour chaque thème ?
En fait, je souhaiterais faire exactement la même présentation que ci-dessus. (et oui, quand j'ai une idée en tête...)
L'exemple donné par davdes est sympa, mais je ne veux pas qu'on aie à revenir sur les vignettes, je voudrais pouvoir passer à la photo précédente ou suivante juste à l'aide de flèches.

Répondre à sourisgrise

5

zoby44, le 10 fév 2009 à 00:21:53

Salut, c'est possible de faire ça en une seule page, mais pas uniquement en xhtml, il faut utiliser du php (ou un autre langage serveur).
Exemple :

<img src="<?php echo $_GET['image'];?>"/>
<a href="diapo.php?image=url_de_mon_image_1.jpg">Précédent</a>
<a href="diapo.php?image=url_de_mon_image_3.jpg">Suivant</a>

C'est sur, c'est vite résumé, mais le principe est la. Tu fait passer l'url de l'image via l'url de la page (ou par un post) tu la récupère, puis tu l'affiche.
J'ai déjà vu la source du diaporama que tu nous montre mais je ne sais plus ou.
Je crois que c'est sur : http://www.phpcs.com/recherche.aspx?r=diaporama que je l'ai vu, mais je n'arrive pas a remettre la main dessus. Il est souvent plus rapide de chercher que d'attendre une réponse... Google est notre ami.

Répondre à zoby44

6

 sourisgrise, le 10 fév 2009 à 15:30:56

Merci pour vos réponses, mais vu que pour moi le php, c'est du chinois, je vais m'en tenir au html. Je créé une page par photo, ça risque de me prendre un petit moment mais au moins, j'arrive au résultat voulu...

Répondre à sourisgrise