Insérer un texte dans un diaporama (html/css)
fred9334
-
fred9334 -
fred9334 -
Bonjour à tous et à toutes.
je viens de créer un diaporama avec un tuto trouvé par ici et il fonctionne très bien.
J'aimerais maintenant ajouter un petit texte lors de l'affichage de l'agrandissement de la photo survolée mais je ne sais pas comment faire.. j'ai cherché (pas partout..je l'avoue) sur le forum mais je n'ai pas trouvé la réponse.
Voici mon code :
Code : HTML
<div id="gallery">
<em id="thumbs">
<a href="#nogo">
<img src="images01/1.jpg" title=""class="" alt=""></a>
<a href="#nogo">
<img src="images01/2.jpg" title="" alt=""></a>
<a href="#nogo">
<img src="images01/3.jpg" title="" alt=""></a>
<a href="#nogo">
<img src="images/image4.jpg" title="" alt=""></a>
<a href="#nogo">
<img src="images/image5.jpg" title="" alt=""></a>
....etc
</em>
</div>
****************************************************************
Code : CSS
#gallery {
position: relative;
width: 750px;
}
#thumbs {
width: 180px;
float: left;
}
#thumbs a {
display: block;
float: right;
margin: 0 0 5px 5px;
width: 50px;
height: 50px;
}
#thumbs a img {
width: 50px;
height: 50px;
border: 1px solid red;
}
#thumbs a:hover {
border-color: red;
background-image: url("image/mh1.jpg");
}
#thumbs a:hover img {
position: absolute;
width: 300px;
height: 300px;
margin-left: 285px;
top: 100px;
}
Merci d'avance.
je viens de créer un diaporama avec un tuto trouvé par ici et il fonctionne très bien.
J'aimerais maintenant ajouter un petit texte lors de l'affichage de l'agrandissement de la photo survolée mais je ne sais pas comment faire.. j'ai cherché (pas partout..je l'avoue) sur le forum mais je n'ai pas trouvé la réponse.
Voici mon code :
Code : HTML
<div id="gallery">
<em id="thumbs">
<a href="#nogo">
<img src="images01/1.jpg" title=""class="" alt=""></a>
<a href="#nogo">
<img src="images01/2.jpg" title="" alt=""></a>
<a href="#nogo">
<img src="images01/3.jpg" title="" alt=""></a>
<a href="#nogo">
<img src="images/image4.jpg" title="" alt=""></a>
<a href="#nogo">
<img src="images/image5.jpg" title="" alt=""></a>
....etc
</em>
</div>
****************************************************************
Code : CSS
#gallery {
position: relative;
width: 750px;
}
#thumbs {
width: 180px;
float: left;
}
#thumbs a {
display: block;
float: right;
margin: 0 0 5px 5px;
width: 50px;
height: 50px;
}
#thumbs a img {
width: 50px;
height: 50px;
border: 1px solid red;
}
#thumbs a:hover {
border-color: red;
background-image: url("image/mh1.jpg");
}
#thumbs a:hover img {
position: absolute;
width: 300px;
height: 300px;
margin-left: 285px;
top: 100px;
}
Merci d'avance.
A voir également:
- Insérer un texte dans un diaporama (html/css)
- Insérer vidéo dans powerpoint - Guide
- Insérer un espace insécable dans word - Guide
- Texte de chanson gratuit pdf - Télécharger - Vie quotidienne
- Insérer signature word - Guide
- Insérer un sommaire dans word - Guide
2 réponses
ça dépend, car très franchement tu ne dis même comment est ton diaporama, pas de lien afin de montrer à quoi il ressemble, rien quoi... Alors comment te guider efficacement sans te faire tout le boulot ?
Ce que tu peux faire par exemple, c'est rentrer un le texte que tu souhaites dans la balise alt par exemple, et quand on image change, tu récupères ce qui se trouve dans la balise alt de ton élément actuelle (donc l'image).
Après il ne te reste plus qu'à la mettre en forme avec le css, mais il vaut mieux mettre en forme d'abord en css et animer les éléments après en js
Ce que tu peux faire par exemple, c'est rentrer un le texte que tu souhaites dans la balise alt par exemple, et quand on image change, tu récupères ce qui se trouve dans la balise alt de ton élément actuelle (donc l'image).
Après il ne te reste plus qu'à la mettre en forme avec le css, mais il vaut mieux mettre en forme d'abord en css et animer les éléments après en js