High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

Diaporama en html

Dernière réponse le 29 mai 2009 à 10:41:54 Duriane, le 15 jan 2008 à 23:10:09 
 Signaler ce message aux modérateurs

Bonsoir,

Néophyte, je viens de commencer mon premier site en html et je voudrais intégrer un diaporama dans ma page.

J' ai d'abord intégré le code du diaporama en javascript (trouvé sur le net), ce slideshow me paraissait tout beau tout mignon, mais là ça devient du grand n'importe quoi.
Il faut donc que je repasse à quelque chose de plus basique...le javascipt sera pour plus tard.... ou pas.

en substance mon site contient :
• 1 page d'accueil avec un menu > celui-ci mène a une 2eme page html
• 2eme page html > meme contenu que la 1ere page mais avec un sous-menu, proposant de choisir parmi différents thèmes de photos, puis dans chaque thème un diaporama.

Je voudrais donc créer un diaporama avec des vignettes disposées en colonnes 1 2 3
4 5 6 ....


et l'agrandissement de ces vignettes dans un bloc sur la même page et non en pop up.


J'ai peur de ne pas être claire.... mais si quelqu'un pouvait me donner des conseils... je serais toute ouïe.

Merci

Configuration: Mac OS X
Safari 523.10.6

Meilleures réponses pour « diaporama en html » dans :
Comment insérer de la musique dans un diaporama VoirLa manipulation pour insérer un son dans un diaporama avec PowerPoint 2007 est assez simple. Ouvrez le logiciel Powerpoint ou le diaporama voulu s’il est déjà créé. Insérer un fichier audio Sélectionner la diapositive de départ de la...
[Site web] Vérifier, optimiser et nettoyer son code HTML VoirLes logiciels WYSIWYG de création de pages web produisent parfois du contenu HTML rempli de balises HTML inutiles, voire incompatibles avec les recommandations du W3C. Les outils proposés ci-dessous permettent de vérifier la validité du code HTML...
Comment faire son site à partir d'un portail Web (GuppY) VoirVous voulez créer un site pour partager des fichiers avec vos amis, pour avoir un forum, ... ? Vous ne vous y connaissez pas du tout en HTML, en PHP... ? Ce n'est pas grave ! Il y a ce qu'on appelle des portails Web. Entre autres, il y a GuppY...
Caractères spéciaux HTML VoirCodage des caractères spéciaux Le standard HTML demande de respecter le codage des caractères ASCII 7 bits, c'est-à-dire que les caractères accentués ne sont pas autorisés. Il faut pour cela utiliser un codage particulier. Pour...
Les balises HTML VoirHTML, un langage à balises Le HTML n'est pas un langage de programmation. Il s'agit d'un langage permettant de décrire la mise en page et la forme d'un contenu rédigé en texte simple. Une page HTML est ainsi un simple fichier texte...
Introduction au HTML VoirPrésentation du HTML Le HTML (« HyperText Mark-Up Language ») est un langage dit de « marquage » (de « structuration » ou de « balisage ») dont le rôle est de formaliser l'écriture d'un document avec des balises de formatage. Les balises permettent...
Posez votre question Répondre

1

Zone-swap, le 15 jan 2008 à 23:30:32

Bonjour !
j'ai bien vu que tu cherché comment faire un diapo en HTML
mais je te propose un truc plus simple !! je suis également débutant dans se domaine méme si cela fait 3 ans que je poccède mon site web !! j'arrive pas avec le HTML!!
j'utilise JOOMLA open source ou licenseGNU/GPL

JOOMLA est un système de gestion de contenu (en anglais, CMS, pour Content Management system) créé par une équipe internationale de développeurs récompensée à maintes reprises, celle-là même qui a hissé Mambo vers les sommets. Et un CMS, c'est quoi?? Pour faire simple, un CMS est un logiciel web qui vous permettra de créer un site internet dynamique en toute simplicité. Joomla! est un CMS Open Source distribué sous license GNU/GPL (gratuit) avec lequel vous pourrez mettre en ligne du contenu et mettre à disposition de vos visiteurs des services (forum, boutique en ligne, galerie photos,...), le tout sans connaissance technique particulière.

perso sa fait quelque mois que je le teste en local et c'est pas mal et depuis peut en ligne !!

pour les galleris photos tu a juste a r'ajouté un module et a mettre tes fichier dans (exemple) ma galleris et il te cré automatiquement la galleri!

regarde sur http://www.joomla.fr/ et sur http://www.joomlafrance.org/ tu peut également trouvé de la doc en format PDF comme JOOMLA pour les nul depuis le net !!

@++ et bon courage!

   
Répondre à Zone-swap

2

pleuven64, le 15 jan 2008 à 23:43:04
  • +1

Bonsoir Duriane,

Quels sont les effets produits par Javascript sur ta page HTML ?
Le code est sans doute mal adapté mais il faudrait en savoir plus pour résoudre le problème.
Perso, j'aime pas l'usage de Javascript car si chez l'internaute consultant il est désactivé : pas de diaporama :-(
Mais si c'est Javascript que tu veux, on peu regarder .....
Sinon tu peux faire très simple et rester en HTML, avec un peu de CSS, pour tes vignettes, et proposer un agrandissement sur une page distincte avec commentaire à l'appui.
Attention à la taille et poids des images.
J'ai pas compris pourquoi 2 pages pour arriver au menu des thèmes ?

Tu peux me laisser un mail si tu veux plus d'infos.
Bon courage et bon surf ;-)

   
Répondre à pleuven64

3

Duriane, le 16 jan 2008 à 00:08:40

Bonsoir Pleuven,
non seulement le code js doit être mal adapté mais en plus je ne sais pas où le placer dans ma page html. Du coup il s'ouvre dans une autre page.
J'aimais bien les effet de transparence et de fondu qui lui donnait un coté plus classe, mais je pense que je vais abandonner.

Je voudrais que mes vignettes s'agrandissent sur la même pages.
Il faut que je fasse le menage sur mes pages et je pourrais te les envoyer ?
par contre je ne sais pas comment te donner mon adresse mail sans le faire apparaitre sur le forum.

merci

   
Répondre à Duriane

5

Duriane, le 16 jan 2008 à 20:14:52

Bonsoir pleuven64,
j'aurais besoin d' aide mais je ne peux pas t'envoyer de message privé.

Help

   
Répondre à Duriane

4

Zone-swap, le 16 jan 2008 à 00:16:45

Tu peut le faire en fesant un méssage privé comme je t'es envoyer avent regarde dans ton profil! @+

   
Répondre à Zone-swap

6

pleuven64, le 16 jan 2008 à 22:51:35

Bonsoir Duriane tu peux m'écrire ici : pleutvaine@yahoo.fr
A bientôt si tu veux

   
Répondre à pleuven64

7

RAD ZONE, le 17 jan 2008 à 00:50:26

SALUT

un simple CSS , html peu faire une presentation photo convenable !

Exemple


le code html

la CSS

RAD


♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

   
Répondre à RAD ZONE

15

jlamyva, le 16 fév 2009 à 15:04:31
  • +1

Un simple CSS , html peu faire une presentation photo convenable !

Exemple


le code html

la CSS

J'ai recopié dans ma page les deux fichiers, créé un sous dossier images ou j'ai mis 18 fichiers ".jpg" et ça ne marche pas. Quel est mon erreur ?

   
Répondre à jlamyva

8

Duriane, le 17 jan 2008 à 10:34:56

Bonjour, merci pour les codes.
En effet c'est pas mal, par contre ça ne marche pas sous safari et sous firefox les images s'affichent en transparences....
Je n'arrivent pas non plus à les faire s'afficher centrées dans un bloc.

   
Répondre à Duriane

9

RAD ZONE, le 17 jan 2008 à 11:11:18

ça ne marche pas sous safari et sous firefox les images s'affichent en transparences.... ????

pas chez moi !!?
FFX

safari

Je n'arrivent pas non plus à les faire s'afficher centrées dans un bloc

il faut que tu adapte la css a ce que tu veux faire !! mais c est le principe que je t ai montre , a toi de l adapter ;-))

RAD
♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

   
Répondre à RAD ZONE

10

Duriane, le 17 jan 2008 à 11:25:06

Je sais bien que je dois l'adapter, mais je ne peut pas inventer quelque chose que je ne connais pas. :'(
et ce n'est pas faute de chercher.....

   
Répondre à Duriane

11

RAD ZONE, le 17 jan 2008 à 11:55:28

je sais bien que je dois l'adapter, mais je ne peut pas inventer quelque chose que je ne connais pas. :'(

http://css.alsacreations.com/...

RAD
♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

   
Répondre à RAD ZONE

12

anoir, le 20 mar 2008 à 12:19:30

Bonjour
je veut afficher des photos en mode diaporama avec la possibilité de les afficher en boucle
s'il vous plait j'ai besoin d'aide
merci d'avance

   
Répondre à anoir

13

Danibleu, le 11 mai 2008 à 23:14:06

Merci à Rad...
Bien que n'étant qu'un petit amateur occasionnel, je suis arrivé à modifier en particulier le CSS pour l'adapter à mon besoin. Il est certain qu'il faut se gratter un peu la tête et ne pas attendre que cela tombe tout cuit du Net.
Quoique de nombreux développeur mettent bénévolement à notre disposition des bouts de codes, voire des outils complets en HTML, java C++, ... et le domaine des diaporamas est vraiment bien fourni depuis de nombreuses années. On trouve de tout à ce propos, dans tous les langages,...
Encore faut-il se donner la peine de chercher quelques minutes ;-) tellement il y a le choix et d'essayer de comprendre un peu pour l'adapter à son propre projet!
Merci donc à tous ces bénévoles y compris ceux qui font des bugs, mais en particulier à ceux qui prennent la peine de commentent leur code, facilitant ainsi notre apprentissage.
Et merci à ceux qui les hébergent!

   
Répondre à Danibleu

18

0livier34, le 29 mai 2009 à 00:33:40

J'ai beau creusé le CSS et le code HTML avec ma povr' tête, même avec les explications données, mais là.... je bogue définitivement.

Ma souris se change bien en main au passage des vignettes mais ni les vignettes, ni les images ne s'affichent, l'écran reste désespérément noir.

Please donnez nous une indication supplémentaire... à défaut de LA solution.
Je n'en peux plus de chercher.

   
Répondre à 0livier34

19

 Danibleu, le 29 mai 2009 à 10:41:54
  • +1

Bonjour Olivier34

Voila ce que j'ai mis dans ma page empire. html
avant /head : <link rel="stylesheet" type="text/css" href="russe/russe.css">

Dans mon tableau
<!-- Galerie images -->
<tr>
<td style="vertical-align: top;">
<img src="images/ligne.gif" border="0" height="8" width="174" alt="Illustrated History of the Russian Empire">
<br><span style="font-weight: bold; color: rgb(204, 0, 0);">Pictures</span>
<br>
</td>
<td style="vertical-align: top; background-color: rgb(152,252,152); text-align: justify;">
<img src="images/ligne.gif" border="0" height="8" width="506" alt="Illustrated History of the Russian Empire">
<br>
<div id="gallery">
<em id="thumbs">
<a href="#nogo">
<img src="russe/empire_russe01.jpg" title="" alt="Illustrated History of the Russian Empire" /></a>
<br><a href="#nogo">
<img src="russe/empire_russe02.jpg" title="" alt="Illustrated History of the Russian Empire" /></a>
<br><a href="#nogo">
<img src="russe/empire_russe03.jpg" title="" alt="Illustrated History of the Russian Empire" /></a>
<br><a href="#nogo">
<img src="russe/empire_russe04.jpg" title="" alt="Illustrated History of the Russian Empire" /></a>
<br><a href="#nogo">
<img src="russe/empire_russe05.jpg" title="" alt="Illustrated History of the Russian Empire" /></a>
<br><a href="#nogo">
<img src="russe/empire_russe06.jpg" title="" alt="Illustrated History of the Russian Empire" /></a>
</em>
</div>
</td>
</tr>

le code CSS (russe/russe.css)
body {
background-color: #000000
}
#gallery {
position: relative;
width: 50px;
}
#thumbs {
width: 50px;
float: left;
}
#thumbs a {
display: block;
float: right;
margin: 0 0 5px 5px;
width: 50px;
height: 65px;
border: 0px solid #000;
}
#thumbs a img {
width: 50px;
height: 65px;
border: 0;
}
#thumbs a:hover {
border-color: #ddd;
}
#thumbs a:hover img {
position: absolute;
width: auto;
height: auto;
left: 60px;
top: 10px;
border: 1px solid #333;
}

Bonne chance

   
Répondre à Danibleu

14

Sleip, le 21 jan 2009 à 02:41:53

Merci Rad

   
Répondre à Sleip

16

Jérôme Fafchamps, le 16 fév 2009 à 17:48:07

Regarde du coté de la technologie AJAX, il doit y avoir de beau diaporama ou bien en flash (personnellement, j'opterai pour l'option ajax).

   
Répondre à Jérôme Fafchamps

17

jlamyva, le 16 fév 2009 à 18:39:51

Merci pour le message en réponse. Peux-tu m'indiquer où est l'erreur dans l'adaptation de ton exemple que je voudrais reproduire (voir mon message précédent) ?

   
Répondre à jlamyva
Posez votre question Répondre
Ils ont besoin de votre aide