Aide slideshow

Question

hotsizzle

15 Mar 2014 à 14:26

Bonjour,

Voilà une question que je n'arrive pas à résoudre.

J'aimerai mettre sur ma page web un petit "slideshow"

J'ai aligné 3 images les unes à côtés des autres dans une div. Jusque la tout va bien.
Ces 3 images sont volontairement rognée (elles sont sous la dénomination imagep pour dire petite). Maintenant ce que je voudrais c'est qu'au survol de la souris sur l'une des 3 images, la photo apparaisse en entier dans la div cachant les 2 autres du coup.

Dans mon html j'ai mis ça ainsi :

<ul id="slideshow">

	<li id="p1"><a href="#ph1"><span>Photo 1</span></a></li>
		
	<li id="p2"><a href="#ph2"><span>Photo 2</span></a></li>
		
	<li id="p3"><a href="#ph3"><span>Photo 3</span></a></li>
				
</ul>

Puis mon CSS pour les images rognées:

ul#slideshow li#p1 {
	background-image:url('../photo/livrep.png');
	z-index: 1;
	left:120px;
	top:460px;
}

ul#slideshow li#p2 {
	background-image:url('../photo/picturep.png');
	z-index:1;
	left: 360px;
	top:460px;
}

ul#slideshow li#p3 {
	background-image:url('../photo/blogp.png');
	z-index:1;
	left: 500px;
	top:460px;
}

Içi le hover :

ul#slideshow li#p1:hover{
	background-image:url('../photo/livre.png');
	left:120px;
	top:460px;
	height:470px;
	width:720px;
}

ul#slideshow li#p2:hover{
	background-image:url('../photo/picture.png');
	left:120px;
	top:460px;
	height:470px;
	width:720px;
}

ul#slideshow li#p3:hover{
	background-image:url('../photo/blog.png');
	left:120px;
	top:460px;
	height:470px;
	width:720px;
}

Ce que j'obtiens pour le moment j'ai bien le survol qui marche cependant l'image ne s'affiche pas dans la div et elle se balade en dessous, et elle ne cache pas les imagep mais les poussent.

Cordialement

lddsoft

15 Mar 2014 à 14:48

Bonjour,

Désolé, mais on ne voit pas de div dans le code que tu proposes Smiley rolleyes

, ni de style par rapport à ce div.
Difficile de t'aider dans ce cas Smiley smile

.

N.B.: pour ce que tu cherches à réaliser, il existe des scripts tout faits sur la toile.

hotsizzle

15 Mar 2014 à 15:58

Oui désolé j'ai oublié.

Voilà la partie en entier

html:

	<section id="milieu">
		<div id="noir">
			<div id="blanc">
				
				<ul id="slideshow">

					<li id="p1"><a href="#ph1"><span>Photo 1</span></a></li>
		
					<li id="p2"><a href="#ph2"><span>Photo 2</span></a></li>
		
					<li id="p3"><a href="#ph3"><span>Photo 3</span></a></li>
				
				</ul>
		
			</div>
			
		</div>
		
	</section>

CSS:

section#milieu div#noir{
	width:960px;
	background-color:#000000;
	min-height: 550px;
	margin-top:460px;	
}

section#milieu div#noir div#blanc{
	width:720px;
	background-color:#FFFFFF;
	position:absolute;
	margin-top:40px;
	min-height: 470px;
	margin-left:120px;	
}


/* ---> Slideshow <---- */


ul#slideshow {
	list-style-type: none;
	margin: 0;
	padding: 0;
	
	bottom: 0;
}

ul#slideshow li {
	float:left;
	width:240px;
	height:470px;
	text-align:center;
}
	
ul#slideshow li a {
	display:block;
	height:470px;
}
	
	
ul#slideshow li a span{
	display: none;
}


ul#slideshow li#p1 {
	background-image:url('../photo/livrep.png');
	z-index: 1;
	left:120px;
	top:460px;
}

ul#slideshow li#p2 {
	background-image:url('../photo/picturep.png');
	z-index:1;
	left: 360px;
	top:460px;
}

ul#slideshow li#p3 {
	background-image:url('../photo/blogp.png');
	z-index:1;
	left: 500px;
	top:460px;
}

ul#slideshow li#p1:hover{
	background-image:url('../photo/livre.png');
	left:120px;
	top:460px;
	height:470px;
	width:720px;
	z-index:10;

}

ul#slideshow li#p2:hover{
	background-image:url('../photo/picture.png');
	left:120px;
	top:460px;
	height:470px;
	width:720px;
	z-index:20;
}

ul#slideshow li#p3:hover{
	background-image:url('../photo/blog.png');
	left:120px;
	top:460px;
	height:470px;
	width:720px;
	z-index:20;
}

Pour le script qu'est ce que je peux taper pour le trouver ?

Merci

VinceCotta

16 Mar 2014 à 20:27

Je ne suis pas sur d'avoir compris. Mais si c'est ce que je pense en CSS tu peux faire quelque chose de tres correct.


	<body>
		<div class="container">
	<div class="thumbnail">
		<img src="as.png" alt="" title="" />
		<a href="#"><img src="biscuit_hover.png" alt="" title="" /></a>
	</div>
	<div class="thumbnail">
		<img src="biscuit.png" alt="" title="" />
		<a href="#"><img src="as.png" alt="" title="" /></a>
	</div>
	<div class="thumbnail">
		<img src="biscuit_hover.png" alt="" title="" />
		<a href="#"><img src="biscuit.png" alt="" title="" /></a>
	</div>
</div>
	</body>



.container
{
	width:100%;
	height:400px;
	background-color:grey;
}

img
{
	margin:auto;
	max-width: 100%;
	height: auto;
	width: auto;
	box-sizing: border-box;
}

.thumbnail
{
	width:25%;
	display:inline-block;
	transition:all 1s;
	z-index:2;
	position:relative;
	margin:auto;
	cursor:pointer;
}

.thumbnail a
{
	position:absolute;
	top:0;
	left:0;
	opacity:0;
	cursor:pointer;
	transition:all 1s;
	width:100%;
	z-index:3;
}

.thumbnail a:hover
{
	opacity:1;
	transition:all 1s;
	height:400px;
}

.thumbnail a:hover img
{
	opacity:1;
	transition:all 1s;
	height:400px;
	width:100%;
}

Les tailles et couleurs sont bien entendu un exemple, et il ya certainement des améliorations à faire notamment sur la taille des images et de la disparition de celles derrière.
Il y a des tas de manières de faire ce que tu veux en css mais celle la me semble interressante. ^^ à ton service au cas ou, à la prochaine Smiley biggrin

hotsizzle

17 Mar 2014 à 09:43

Merci j'ai réussi à m'en sortir avec des manipulations de tous genres et votre aide.

hotsizzle

17 Mar 2014 à 13:05

Dernier post raté,

voilà ou j'en suis

HTML

<section id="milieu">
		<div id="noir">
			<div id="blanc">
				
				<ul id="slideshow">
					
					
					<div class="apparition1">
					<li id="p1"><a href="#ph1"><span>Photo 1</span></a></li>
			
				<h2>Mot de l'auteur</h2>
				<p>
Bonjour je m'appelle .... Fasciné de multimédia et des nouvelles technologies j'ai cédé au diktat de l'aire numérique et j'ai décidé de créer mon propre site.
					<a href="#"> lisez la suite </a>
				</p>
				</div>
					
					
					<div class="apparition2">
					<li id="p2"><a href="#ph2"><span>Photo 2</span></a></li>
				<h2>Les photos</h2>
				<p>
Dans ma vie j'ai eu la chance d'avoir fait plusieurs magnifiques voyages. Découvrez une sélection des mes photographies préférées. 
					<a href="#"> lisez la suite </a>
				</p>
				</div>
		
					<div class="apparition3">
					<li id="p3"><a href="#ph3"><span>Photo 3</span></a></li>
					<h2>Blog</h2>
					<p>
Oh my Blog ! Une manière insolite de traiter les sujets qui m'ont marqué, les analyses de mes publicités préférées et plein d'autre choses encore.
					<a href="#"> lisez la suite </a>
				</p>
				</div>
				
				
				</ul>
				
	
			</div>
		</div>
		
	</section>

CSS

section#milieu div#noir{
	width:960px;
	background-color:#000000;
	min-height: 550px;
	margin-top:460px;	
}

section#milieu div#noir div#blanc{
	width:720px;
	background-color:#FFFFFF;
	position:absolute;
	margin-top:40px;
	min-height: 470px;
	margin-left:120px;	
}


/* ---> Slideshow <---- */


ul#slideshow {
	list-style-type: none;
	margin: 0;
	padding: 0;
	position:relative;
}

ul#slideshow li {
	float:left;
	width:240px;
	height:470px;
	text-align:center;
}
	
ul#slideshow li a {
	display:block;
	height:470px;
}
	
	
ul#slideshow li a span{
	display: none;
}


ul#slideshow li#p1 {
	background-image:url('photo/livrep.png');
	z-index: 1;
	left:120px;
	top:460px;
}

ul#slideshow li#p2 {
	background-image:url('photo/picturep.png');
	z-index:1;
	left: 360px;
	top:460px;
}

ul#slideshow li#p3 {
	background-image:url('photo/blogp.png');
	z-index:1;
	left: 500px;
	top:460px;
}

ul#slideshow div.apparition1 li#p1:hover{
	background-image:url('photo/livre.png');
	position:absolute;
	top:0;
	left:0;
	height:470px;
	width:720px;
}

ul#slideshow div.apparition2 li#p2:hover{
	background-image:url('photo/picture.png');
	position:absolute;
	top:0;
	left:0;
	height:470px;
	width:720px;
}

ul#slideshow div.apparition3 li#p3:hover{
	background-image:url('photo/blog.png');
	position:absolute;
	top:0;
	left:0;
	height:470px;
	width:720px;

}

div[class^="apparition"] h2{
	background-color:rgba(207, 207, 207, 0.5);
	position: absolute;
	font-size:20px;
	font-family:sans-serif;
	width:720px;
	top:352px;
	display: table-cell;
	text-align:center;
	vertical-align:middle;
	
	transition:all .5s linear;
}	
	

div[class^="apparition"] p{
	background-color:rgba(207, 207, 207, 0.5);
	position: absolute;
	font-size:20px;
	font-family:sans-serif;
	padding:10px;
	width:700px;
	top:370px;
	display: table-cell;
	text-align: justify;
	vertical-align:middle;
	
	
	transition:all .5s linear;
}

Mais ça fait le contraire de ce que je voudrais obtenir, j'aimerai que le texte ne soit pas sur les photos coupé mais sur le hiver avec la photo qui s'affiche en entière

Merci de votre aide

VinceCotta

17 Mar 2014 à 17:13

ton css étant un peu long (et mon cerveau aussi) il serait préférable d'avoir un lien vers ton site si tu as.

Sinon en regardant juste ce que tu nous dis, on dirait peut être un problème lié au z-index (l'élément doit toujours être positionné relative, absolute ou peut importe pour que le z-index fonctionne).
Sinon tente de le faire apparaitre à coup de display:none, display:block.

Sujet clos

Questions générales et questions de débutants

Aide slideshow