SLIDESHOW IMAGES ET TEXTES EN PUR JAVASCRIPT

Signaler
Messages postés
1788
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
24 juillet 2021
-
 camso -
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.

https://codes-sources.commentcamarche.net/source/54198-slideshow-images-et-textes-en-pur-javascript

Simple et bien dans l'ensemble
Bonjour et merci pour se slideshow. Logiquement je devrais l'installer sur mon site de cuisine. on va voir ce que ça donne. encor merci.
Problème d'affichage avec un menu déroulant en css.
Bonjour à tous, j'ai eu à personnaliser le script et il fonctionne bien chez moi (sous opera, Chrome, safari et mozilla, j'ai pas encore testé sous IE- je suis encore en chantier avec mon site). J'ai un problème avec mon menu déroulant qui est développé en CSS. les images du slideshow cache mon menu déroulant. Est-il techniquement possible de remédier à la situation? faire en sorte que le menu soit au premier plan par rapport au slideshow.
J'ai besoin d'aide s'il vous plait !!!!

/* ------------------ MENU PRINCIPAL --------------------*/

div#menu_bas a {
color:#FFFFFF; }

div#menu_bas ul {
list-style-type:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-style:normal;
margin-bottom:0px;
margin-top:opx;
padding: 0px; margin:0px; background-color: #009; text-align:left;
display:block;
float:left;
}

div#menu_bas li {
list-style-type:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-style:normal;
margin-left:0px;
margin-bottom:0px;
margin-top:0px;
background-color:#009;
display:block;
float:left;}

div#menu_bas li:hover { background-color:#009;}

div#menu_bas li.sousmenu:hover {background-color:#e5680e;}

/*rajout couleure de fond */
div#menu_bas li.sousmenu { background-color: #009;}

/* rajout pr pour flèche direction bas et couleur de fond*/
div#menu_bas li.plop { background-color:#009;}

/* une petite bordure en top*/
div#menu_bas ul li {
position:relative; list-style: none; float:left; border-top:0.1em solid; border-color:#FFF;}

div#menu_bas ul ul { position:absolute; display:none; width:auto;}
div#menu_bas li a {text-decoration: none; padding: 4px 0 4px; display:block;width:15.89em; margin:0px;}
div#menu_bas ul.niveau1 li.sousmenu:hover ul.niveau2 {display:block;}

/*div#menu ul.niveau2 li.sousmenu:hover ul.niveau3
div#menu ul.niveau3 {top:-1px; left: 135px;}

rajout de couleures de fond et de survol*/
div#menu ul.niveau3 li { background-color: #009;}
div#menu ul.niveau3 li:hover { background-color: #009;}
/* ---------------------- MON MENU DANS LE CODE HTML ----------------- */





* ["#"> ECPC

* Nos objectifs

* Nos valeurs

* Historique


* VOUS ÊTES...


* Particuliers

* Fontionnaires/Salariés

* Commerçants

* ONG/Associations

* Agriculteurs/Eleveurs

* PME/PMI




* SERVICES & PRODUITS


* Compte d´épargne


* Compte chèque particulier

* Compte bloqué

* Compte courant

* Bon de caisse

* Epargne mobile

* Transfert de fonds

* Change de devises




* NOTRE RESEAU

* Littoral

* Centre

* Ouest

* Nord Ouest

* Sud Ouest

* Adamaoua

* Nord

* Extrême Nord




* CARRIERE


* Nos métiers

* Comment postuler ?

* Formations




*











// peut aussi etre instancié dans une fonction onload,
// avec les inconvénients qui en découlent ...
monSlideshow.createSlideshow();
monSlideshow1.createSlideshow();
Messages postés
4
Date d'inscription
jeudi 7 octobre 2010
Statut
Membre
Dernière intervention
23 avril 2012

Désolé pour le temps de réponse, j'étais pas mal occupé.

** Pour ton souci concernant plusieurs listes, c'est logique, ta variable est forcément en référence, puisqu'instanciée dans un objet. **
Des fois, je me demande à quoi je pense ... C'est le même objet, donc c'est normal que ca merdois.

** La solution pour moi est que tu ajoutes une méthode d'initialisation qui crée un objet dans ta classe, et non pas simplement une référence vers une variable. **
C'est ce que j'ai fait pour la version 3, mais le truc qui me gêne, c'est que l'objet est créé en double (car je dois le cloner). Donc si on embarque 5 slideshow différents, on aura 10 objets de liste d'images ... Par contre, ca a l'avantage de pouvoir utiliser la même liste pour plusieurs slideshow. Bon, c'est du pinaillage, car maintenant avec la RAM embarquée dans les nouveaux PC, on est pas à qqles octets pret !

** Le type qui te met un apostrophe dans le texte de l'image et tu as tout qui saute. **
Ahhh, le fameux utilisateur lambda ... J'ai ajouté une petite note à ce sujet dans le code HTML, ca devrait suffire je pense.

** tu pourras demander à l'utilisateur une syntaxe bien moins rude que l'instanciation de variables **
Hum, là je suis pas tout à fait de ton avis, je trouve bien plus galère de renseigner des argument simplement dans un string, que de devoir renseigner des 'variables' qui sont explicites (enfin, j'ai essayé qu'elles le soient ..). De plus, on peut indiquer jusqu'à 13 variables, certaines sont optionnelles, on a vite fait de s'y perdre ...
Mais ce n'est que mon avis, ca serait intéressant de faire un sondage auprès des utilisateurs lambda, ce qu'ils trouvent le plus clair.

** pourquoi ne mets-tu pas dans cette css des propriétés que tu redéclares pour chaque élément ? **
Ben je ne voulais pas trop charger le css, mais j'ai écouté tes conseils, j'utilise 100%, bien que webkit n'aime pas trop les % (et display: block ca fait pas).
Comme ça, le html généré sera moins lourd ...

En tout cas merci d'avoir passé du temps pour répondre, c'est avec les conseils de personnes plus expirementées qu'on apprends.
Afficher les 12 commentaires