Aller au menu - Aller au contenu

List image pour slider défilant

ajout texte possible ?

Pour accéder à cette section
Connectez-vous !
connexion_rpx
Page 1 
Auteur Message
1 visiteur sur ce sujet (1 Anonyme)
Page 1 
Hors ligne Neuronless # Posté le 23/05/2010 à 20:54:19
Avatar
Bonjour a vous, je réalise que mon post concerne peut etre egalement le css plus que le javascript0

J'ai fait un slider d'images representant des produit défilant.
Il marche.

j'aimerai ajouter des textes sur mes images et il semble que cela soit un peu difficile en l'intérieur de balise 'li'.

mon css :
Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.ImagesMenu {
	position: relative;
	width: 530px;
	height: 129px;
	overflow: hidden;
	border: thin dotted #000000;
	margin-top: 20px;



}

.ImagesMenu ul {
	list-style: none;
	margin: 0px;
	display: block;
	height: 129px;
	width: 1340px;
	
	}

.ImagesMenu ul li {
	float: left;
}

.ImagesMenu ul li a {
	text-indent: -1000px;
	background:#FFFFFF url(none) repeat scroll 0%;
	border-right: 2px solid #fff;
	cursor:pointer;
	display:block;
	overflow:hidden;
	width:39px;
	height: 129px;
}

.ImagesMenu ul li.produit1 a {
	background: url(../images/produit1.jpg) repeat scroll 0%;
}
.ImagesMenu ul li.produit2 a{
	background: url(../images/produit2.jpg) repeat scroll 0%;
	
}


J'aimerai un encart text sur chque image produit. Ais bien tenté une div mais cela ne fonctionne pas.

Quelqu'un a t il la science infuse ?
Merci beaucoup
Édité le 23/05/2010 à 20:55:45 par Neuronless
Publicité # Posté le 23/05/2010 à 20:54:19

Hors ligne anonyme # Posté le 24/05/2010 à 10:16:17

Salut !
Tu peux très bien ajouter une balise div à l'intérieur ? Après, avec ça, tu peux faire ce que tu veux.
Le meilleur aurait quand même été que tu structures ton slider sur un principe continu de div ... si tu peux le faire de cette sorte, ce serait beaucoup plus simple, mais avec des li, ça marche aussi (mais peut-être légèrement plus complexe).

Si je ne dis pas de bêtise, un li est une balise de type block, donc de ce fait, on peut y ajouter à l'intérieur et très facilement des balises de type block aussi.
Tu peux faire quelque chose comme ça (par exemple) :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<ul>
    <li class=slider_img>
        <div class=image>
            <img src=# class=image_slider />        <!-- Ton image à afficher -->
        </div>
        
        <div class=text>Mon texte</div>             <!-- Ton texte à afficher -->
    </li>
    
    <!-- ... -->
</ul>

Avec un peu de CSS après, c'est pas très compliqué. Tu essayes de mettre une position relative et puis, un petit fond noir transparent à la limite (avec CSS3) :

Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
ul { list-style : none }
    li.slider_img {
        width          : 100px;
        height         : 100px;        
    }
    li.slider_img div.image, li.slider_img div.image img.image_slider {
        max-width   : 100px;
        max-height  : 100px;        
    }
    li.slider_img div.text {
        margin         : -30px 0 0 0;
        position        : relative;
        background  :  rgb(0, 0, 0);
        
        color           : white;
        height          : 25px;
        line-height   : 25px;
        text-align      : center;
        
        border-radius : 5px;
        -moz-border-radius : 5px;
        background  :  rgb(0, 0, 0, .5) !important; /* Ne fonctionne pas sous tous les navigateurs */
    }
Hors ligne Neuronless # Posté le 24/05/2010 à 11:16:51
Avatar
c'est pas construit pareil du tout...
Je me demande juste si l'effet slide fonctionnera ainsi.
Je tente la piste. Merci
Hors ligne anonyme # Posté le 24/05/2010 à 11:42:10

C'est pas construit pareil, mais si tu compares mon code au tien, le mien est sans doute plus « propre ».
Hors ligne Neuronless # Posté le 24/05/2010 à 11:52:32
Avatar
sans doute que oui !
tu sais, je suis en train d'apprendre ....

Si tu pouvais m'expliquer ce qui te semble 'fouilli' dans mon code, cela me permettrait d'avancer sans doute et c'est ce que j'aime : avancer.
Hors ligne anonyme # Posté le 24/05/2010 à 11:56:20

Tu peux me montrer ton code HTML s'il-te-plaît ? :)
Hors ligne Neuronless # Posté le 24/05/2010 à 12:08:39
Avatar
Bien sur :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  <head>
    <title>mon titre ecran</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	
  </head>
  <body>
   <script type="text/javascript" src="jquery-1.4.2.js"></script>
   <SCRIPT type=text/javascript>
$(document).ready(function () {
  // find the elements to be eased and hook the hover event
  $('div.ImagesMenu ul li a').hover(function() {    
    // if the element is currently being animated
    if ($(this).is(':animated')) {
      $(this).stop().animate({width: "310px"}, {duration: 450, easing:"easeOutQuad", complete: "callback"});
    } else {
      // ease in quickly
      $(this).stop().animate({width: "310px"}, {duration: 400, easing:"easeOutQuad", complete: "callback"});
    }
  }, function () {
    // on hovering out, ease the element out
    if ($(this).is(':animated')) {
      $(this).stop().animate({width: "78px"}, {duration: 400, easing:"easeInOutQuad", complete: "callback"})
    } else {
      // ease out slowly
      $(this).stop(':animated').animate({width: "78px"}, {duration: 450, easing:"easeInOutQuad", complete: "callback"});
    }
  });
});
</SCRIPT>
 <DIV class=ImagesMenu>
<UL>
<LI class=produit1><A href="#">produit1</A></LI>
<LI class=produit2><A href="#">produit2</A></LI>
<LI class=produit3><A href="#">produit3</A></LI>
<LI class=produit4><A href="#">produit4</A></LI>
<LI class=produit5><A href="#">produit5</A></LI>
</UL>
</DIV>
</body>
</html>

Tu as le css plus haut... Tous les produits sont les mêmes sauf le dernier de manière a ce que l'image soit visible dans son intégralité.

Css dernière image :
Code : CSS
1
2
3
4
5
.jimgMenu ul li.produit5 a {
	background: url(images/produit5.jpg) repeat scroll 0%;
	min-width:310px;
	
}


Merci pour le temps que tu passe.
Édité le 24/05/2010 à 12:13:05 par Neuronless
Hors ligne anonyme # Posté le 24/05/2010 à 12:33:36

Ah mais okay ... C'est très moche, je te le dis. Tu affiches tes images via CSS ? Tu es fou mon ami. Préfère ma structure ;)
Hors ligne Neuronless # Posté le 24/05/2010 à 12:50:53
Avatar
Je viens d'essayer de monter avec ta structure.
je n'arrive pas à un integrer le survol souris sur les images et l'effet slide ne fonctionne pas.


Les backgrounds images dans les css, qui a-t-il de si 'alarmant' ?

Je ne passe pas plus de temps , j'y reviendrai à l'occasion. En attendant, je vais ruser et mes textes feront partie intégrante des images.
Merci du temps que tu as passé.... Dommage pour le manque de suivi car je suis plus embrouillée qu'avant...
lol
bon lundi de pentecote a toi !
Édité le 24/05/2010 à 14:16:48 par Neuronless
Hors ligne profbioch # Posté le 24/05/2010 à 15:12:46
Avatar
Salut Neuroneless,
Pourrais tu préciser ou tu eu le code que tu as (enfin la source)
Si tu recherches un carroussel, avec du texte dessus, des images qui défilent automatiquement, voici une video très bien faites : http://www.grafikart.fr/tutoriels/carrousel-javascript-87

Pour les images dans le css, rien d'alarmant, mais dans la mesure du possible met les images de fond dans le css et les autres images dans l'HTML, mais dans tous les cas évite un code qui ressemble à ca :
Citation : Kagogal
<ul>
<li class=slider_img>
<div class=image>
<img src=# class=image_slider /> <!-- Ton image à afficher -->
</div>

<div class=text>Mon texte</div> <!-- Ton texte à afficher -->
</li>

<!-- ... -->
</ul>


Non seulement on appelle ceci une divite, c'est inutile et ca embrouille plus qu'autre chose, mais en plus il n'y a aucun "

La divite provoque des :
Code : CSS
1
li.slider_img div.image, li.slider_img div.image img.image_slider
:waw:
Édité le 24/05/2010 à 15:17:28 par profbioch
Image utilisateur
Image utilisateur
Modules Prestashop, vente privée, VIP, accès réservé...




Pack création site vitrine


Vous voulez communiquer sans limites pour mieux vous faire connaître, vous mettre en valeur, recevoir des demandes d'informations? Grâce à cette formule, coeos.pro vous propose d'entrer simplement dans le monde de l'Internet : mettez en avant votre activité, vos prestations, vos réalisations, vos méthodes de travail, vos récompenses...
Organisez votre site comme vous le souhaitez et entrez en contact avec les internautes par le biais d'un design innovant, à votre image, avec une ergonomie soignée. La réalisation de votre site sera aussi élaborée avec une optimisation du code pour assurer le meilleur référencement.
Le Pack création site vitrine est la solution par excellence pour mettre en avant votre activité sur Internet. Tous les services indispensables à votre activité sur internet sont inclus, disponible à l'achat ou la location pour s'adapter à vos besoins !


Boutique web, la simplicité du ecommerce à portée de main


Vous souhaitez étendre votre marché à Internet ou commencez une activité ?
Dans sa formule "Boutique en ligne", coeos.pro prend en charge la création de votre site e-commerce sur mesure, adapté à votre activité. Comprenant une interface de gestion de produits, paiement en ligne sécurisé, design de haute qualité, référencement...
Ce Pack e-Commerce comprend toutes les fonctionnalités nécessaires au succès de la vente de produits ou services par Internet, vendez vos produits à des milliers d'internautes dans le monde.

Retrouvez un spécialiste de la solution Prestashop qui a de nombreux modules à son actif, du simlpe ajout de mots clés sur les pages produits aux modules permettant de gérer le contenu des catégories en passant par des modules ajoutant du cachet à votre site tel que le nuage d'images en 3D ou chaque image est un lien vers l'objet correspondant :

Image utilisateur



Image utilisateur
 
Hors ligne Neuronless # Posté le 24/05/2010 à 16:39:52
Avatar
c'est tres gentil a toi mais c pas tout a fait ca que j'etais en train de faire....
cela s'appelle un 'accordeon' je crois...
tu as quatre ou cinq images les unes sur les autres avec un ecart de quelque pixel au survol souris sur cet ecart, les autres images se poussent pour laisser apparaitre l'image dans sa totalite.

Je reviens te donner les coordonnées du site ou j'ai trouvé ce tuto... qui marche très bien mais comme je veux l'agrementer de texte ca coince.
Merci pour ta réponse sur les images en background.
Hors ligne profbioch # Posté le 24/05/2010 à 17:04:31
Avatar
OK, comme sur mon site sur la stereographie, il y a un tuto ici :
http://www.alohatechsupport.net/webdes [...] h_jquery.html
Image utilisateur
Image utilisateur
Modules Prestashop, vente privée, VIP, accès réservé...




Pack création site vitrine


Vous voulez communiquer sans limites pour mieux vous faire connaître, vous mettre en valeur, recevoir des demandes d'informations? Grâce à cette formule, coeos.pro vous propose d'entrer simplement dans le monde de l'Internet : mettez en avant votre activité, vos prestations, vos réalisations, vos méthodes de travail, vos récompenses...
Organisez votre site comme vous le souhaitez et entrez en contact avec les internautes par le biais d'un design innovant, à votre image, avec une ergonomie soignée. La réalisation de votre site sera aussi élaborée avec une optimisation du code pour assurer le meilleur référencement.
Le Pack création site vitrine est la solution par excellence pour mettre en avant votre activité sur Internet. Tous les services indispensables à votre activité sur internet sont inclus, disponible à l'achat ou la location pour s'adapter à vos besoins !


Boutique web, la simplicité du ecommerce à portée de main


Vous souhaitez étendre votre marché à Internet ou commencez une activité ?
Dans sa formule "Boutique en ligne", coeos.pro prend en charge la création de votre site e-commerce sur mesure, adapté à votre activité. Comprenant une interface de gestion de produits, paiement en ligne sécurisé, design de haute qualité, référencement...
Ce Pack e-Commerce comprend toutes les fonctionnalités nécessaires au succès de la vente de produits ou services par Internet, vendez vos produits à des milliers d'internautes dans le monde.

Retrouvez un spécialiste de la solution Prestashop qui a de nombreux modules à son actif, du simlpe ajout de mots clés sur les pages produits aux modules permettant de gérer le contenu des catégories en passant par des modules ajoutant du cachet à votre site tel que le nuage d'images en 3D ou chaque image est un lien vers l'objet correspondant :

Image utilisateur



Image utilisateur
 
Hors ligne profbioch # Posté le 24/05/2010 à 17:12:19
Avatar
OK, comme sur mon site sur la stereographie, il y a un tuto ici :
http://www.alohatechsupport.net/webdes [...] h_jquery.html
Image utilisateur
Image utilisateur
Modules Prestashop, vente privée, VIP, accès réservé...




Pack création site vitrine


Vous voulez communiquer sans limites pour mieux vous faire connaître, vous mettre en valeur, recevoir des demandes d'informations? Grâce à cette formule, coeos.pro vous propose d'entrer simplement dans le monde de l'Internet : mettez en avant votre activité, vos prestations, vos réalisations, vos méthodes de travail, vos récompenses...
Organisez votre site comme vous le souhaitez et entrez en contact avec les internautes par le biais d'un design innovant, à votre image, avec une ergonomie soignée. La réalisation de votre site sera aussi élaborée avec une optimisation du code pour assurer le meilleur référencement.
Le Pack création site vitrine est la solution par excellence pour mettre en avant votre activité sur Internet. Tous les services indispensables à votre activité sur internet sont inclus, disponible à l'achat ou la location pour s'adapter à vos besoins !


Boutique web, la simplicité du ecommerce à portée de main


Vous souhaitez étendre votre marché à Internet ou commencez une activité ?
Dans sa formule "Boutique en ligne", coeos.pro prend en charge la création de votre site e-commerce sur mesure, adapté à votre activité. Comprenant une interface de gestion de produits, paiement en ligne sécurisé, design de haute qualité, référencement...
Ce Pack e-Commerce comprend toutes les fonctionnalités nécessaires au succès de la vente de produits ou services par Internet, vendez vos produits à des milliers d'internautes dans le monde.

Retrouvez un spécialiste de la solution Prestashop qui a de nombreux modules à son actif, du simlpe ajout de mots clés sur les pages produits aux modules permettant de gérer le contenu des catégories en passant par des modules ajoutant du cachet à votre site tel que le nuage d'images en 3D ou chaque image est un lien vers l'objet correspondant :

Image utilisateur



Image utilisateur
 
Hors ligne anonyme # Posté le 24/05/2010 à 18:48:46

Citation : profbioch
Pour les images dans le css, rien d'alarmant, mais dans la mesure du possible met les images de fond dans le css et les autres images dans l'HTML, mais dans tous les cas évite un code qui ressemble à ca :
Citation : Kagogal
<ul>
<li class=slider_img>
<div class=image>
<img src=# class=image_slider /> <!-- Ton image à afficher -->
</div>

<div class=text>Mon texte</div> <!-- Ton texte à afficher -->
</li>

<!-- ... -->
</ul>


Non seulement on appelle ceci une divite, c'est inutile et ca embrouille plus qu'autre chose, mais en plus il n'y a aucun "

La divite provoque des :
Code : CSS
1
li.slider_img div.image, li.slider_img div.image img.image_slider
:waw:

Euh ... je préfère coder comme ça et que ce soit organisé qu'avoir des trucs qui partent qui en couille.
Hors ligne profbioch # Posté le 24/05/2010 à 19:48:27
Avatar
oui, enfin, le résultat pourrait se résumer par "ça marche pô", et si pour toi un code atteint de divite est un code organisé, alors j'aimerais bien voir le code du zprojects :p
Édité le 24/05/2010 à 19:53:31 par profbioch
Image utilisateur
Image utilisateur
Modules Prestashop, vente privée, VIP, accès réservé...




Pack création site vitrine


Vous voulez communiquer sans limites pour mieux vous faire connaître, vous mettre en valeur, recevoir des demandes d'informations? Grâce à cette formule, coeos.pro vous propose d'entrer simplement dans le monde de l'Internet : mettez en avant votre activité, vos prestations, vos réalisations, vos méthodes de travail, vos récompenses...
Organisez votre site comme vous le souhaitez et entrez en contact avec les internautes par le biais d'un design innovant, à votre image, avec une ergonomie soignée. La réalisation de votre site sera aussi élaborée avec une optimisation du code pour assurer le meilleur référencement.
Le Pack création site vitrine est la solution par excellence pour mettre en avant votre activité sur Internet. Tous les services indispensables à votre activité sur internet sont inclus, disponible à l'achat ou la location pour s'adapter à vos besoins !


Boutique web, la simplicité du ecommerce à portée de main


Vous souhaitez étendre votre marché à Internet ou commencez une activité ?
Dans sa formule "Boutique en ligne", coeos.pro prend en charge la création de votre site e-commerce sur mesure, adapté à votre activité. Comprenant une interface de gestion de produits, paiement en ligne sécurisé, design de haute qualité, référencement...
Ce Pack e-Commerce comprend toutes les fonctionnalités nécessaires au succès de la vente de produits ou services par Internet, vendez vos produits à des milliers d'internautes dans le monde.

Retrouvez un spécialiste de la solution Prestashop qui a de nombreux modules à son actif, du simlpe ajout de mots clés sur les pages produits aux modules permettant de gérer le contenu des catégories en passant par des modules ajoutant du cachet à votre site tel que le nuage d'images en 3D ou chaque image est un lien vers l'objet correspondant :

Image utilisateur



Image utilisateur
 
Hors ligne Neuronless # Posté le 25/05/2010 à 11:20:03
Avatar
Salut profbioch,
j'ai voulu hier venir te donner l'adresse site ou j'ai trouve ce slider mais il semble que le forum ne marchait pas très bien.

Le voici :

http://www.dator.fr/jquery-image-menu- [...] -avec-jquery/


Donc je pense que dans ce cas, les background images sont nécessaires sinon rien ne fonctionne.

Merci pour ton lien mais tu comprendras a la vue de mon 'eventail slider' que ce n'est pas vraiment ce que je recherche.

Si tu as un moyen d'ajouter des textes sur les images. Merci de me mettre sur la piste.

Bonne journée.
Hors ligne profbioch # Posté le 25/05/2010 à 11:32:59
Avatar
"ce n'est pas vraiment ce que je recherche."

En fait le lien que je met est l'original en version complète du lien que tu viens de mettre...
Image utilisateur
Image utilisateur
Modules Prestashop, vente privée, VIP, accès réservé...




Pack création site vitrine


Vous voulez communiquer sans limites pour mieux vous faire connaître, vous mettre en valeur, recevoir des demandes d'informations? Grâce à cette formule, coeos.pro vous propose d'entrer simplement dans le monde de l'Internet : mettez en avant votre activité, vos prestations, vos réalisations, vos méthodes de travail, vos récompenses...
Organisez votre site comme vous le souhaitez et entrez en contact avec les internautes par le biais d'un design innovant, à votre image, avec une ergonomie soignée. La réalisation de votre site sera aussi élaborée avec une optimisation du code pour assurer le meilleur référencement.
Le Pack création site vitrine est la solution par excellence pour mettre en avant votre activité sur Internet. Tous les services indispensables à votre activité sur internet sont inclus, disponible à l'achat ou la location pour s'adapter à vos besoins !


Boutique web, la simplicité du ecommerce à portée de main


Vous souhaitez étendre votre marché à Internet ou commencez une activité ?
Dans sa formule "Boutique en ligne", coeos.pro prend en charge la création de votre site e-commerce sur mesure, adapté à votre activité. Comprenant une interface de gestion de produits, paiement en ligne sécurisé, design de haute qualité, référencement...
Ce Pack e-Commerce comprend toutes les fonctionnalités nécessaires au succès de la vente de produits ou services par Internet, vendez vos produits à des milliers d'internautes dans le monde.

Retrouvez un spécialiste de la solution Prestashop qui a de nombreux modules à son actif, du simlpe ajout de mots clés sur les pages produits aux modules permettant de gérer le contenu des catégories en passant par des modules ajoutant du cachet à votre site tel que le nuage d'images en 3D ou chaque image est un lien vers l'objet correspondant :

Image utilisateur



Image utilisateur
 
Hors ligne Neuronless # Posté le 25/05/2010 à 13:53:34
Avatar
bizarre ce n'est pas ce que j'avais vu comme exemple.... eclats de rires. excuse moi alors....

tu as un systeme pour ajouter du texte sur les images ?
Hors ligne profbioch # Posté le 25/05/2010 à 14:48:24
Avatar
Dans le fichier CSSFiles/jimgMenu.css tu as ".jimgMenu ul li a " et text-indent: -1000px; supprime cette ligne, c'est tout
Code : HTML
1
2
3
4
5
6
7
8
<ul>
    <li class="landscapes"><a href="#">Landscapes</a></li>
    <li class="people"><a href="#">People</a></li>

    <li class="nature"><a href="#">Nature</a></li>
    <li class="abstract"><a href="#">Abstract</a></li>
    <li class="urban"><a href="#">Urban</a></li>
  </ul>

Sur les images tu aura Lanscape, People, Nature...

Sous le code du lien que tu as indiqué:Image utilisateur il y a bien le lien qui pointe sur la page que j'ai donné :p
Image utilisateur
Image utilisateur
Modules Prestashop, vente privée, VIP, accès réservé...




Pack création site vitrine


Vous voulez communiquer sans limites pour mieux vous faire connaître, vous mettre en valeur, recevoir des demandes d'informations? Grâce à cette formule, coeos.pro vous propose d'entrer simplement dans le monde de l'Internet : mettez en avant votre activité, vos prestations, vos réalisations, vos méthodes de travail, vos récompenses...
Organisez votre site comme vous le souhaitez et entrez en contact avec les internautes par le biais d'un design innovant, à votre image, avec une ergonomie soignée. La réalisation de votre site sera aussi élaborée avec une optimisation du code pour assurer le meilleur référencement.
Le Pack création site vitrine est la solution par excellence pour mettre en avant votre activité sur Internet. Tous les services indispensables à votre activité sur internet sont inclus, disponible à l'achat ou la location pour s'adapter à vos besoins !


Boutique web, la simplicité du ecommerce à portée de main


Vous souhaitez étendre votre marché à Internet ou commencez une activité ?
Dans sa formule "Boutique en ligne", coeos.pro prend en charge la création de votre site e-commerce sur mesure, adapté à votre activité. Comprenant une interface de gestion de produits, paiement en ligne sécurisé, design de haute qualité, référencement...
Ce Pack e-Commerce comprend toutes les fonctionnalités nécessaires au succès de la vente de produits ou services par Internet, vendez vos produits à des milliers d'internautes dans le monde.

Retrouvez un spécialiste de la solution Prestashop qui a de nombreux modules à son actif, du simlpe ajout de mots clés sur les pages produits aux modules permettant de gérer le contenu des catégories en passant par des modules ajoutant du cachet à votre site tel que le nuage d'images en 3D ou chaque image est un lien vers l'objet correspondant :

Image utilisateur



Image utilisateur
 
Hors ligne Neuronless # Posté le 25/05/2010 à 16:24:29
Avatar
:-° Je regarde....
lol

Retour au forum "HTML / CSS" ou à la liste des forums

Pour accéder à cette section
Connectez-vous !
connexion_rpx