Texte sur image
Résolu
valttt
Messages postés
299
Date d'inscription
Statut
Membre
Dernière intervention
-
valttt Messages postés 299 Date d'inscription Statut Membre Dernière intervention -
valttt Messages postés 299 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je recherche le moyen de faire défiler un texte sur une photo qui est affiché via une galerie.
j'ai essayé avec la balise MARQUEE, mais lorsque j'ajoute cette balise, mes miniature disparaissent et le texte n'apparait pas.
Ma galerie fonctionne en java via slide.js
Je ne suis pas calé du tout dans le domaine de l'html, mais quand même réussi avec l'aide de beaucoup de "forumeur" et notamment à vous, à faire ce site via bloc note (LOL).
Vous pouvez voir le diaporama sur lequel je souhaite faire défiler le texte (en haut de l'image) dans l'onglet PHOTOS: http://loire-et-guitare.asso.st/Index.html
MERCI A TOU(TE)S POUR VOTRE AIDE !!!
Je recherche le moyen de faire défiler un texte sur une photo qui est affiché via une galerie.
j'ai essayé avec la balise MARQUEE, mais lorsque j'ajoute cette balise, mes miniature disparaissent et le texte n'apparait pas.
Ma galerie fonctionne en java via slide.js
Je ne suis pas calé du tout dans le domaine de l'html, mais quand même réussi avec l'aide de beaucoup de "forumeur" et notamment à vous, à faire ce site via bloc note (LOL).
Vous pouvez voir le diaporama sur lequel je souhaite faire défiler le texte (en haut de l'image) dans l'onglet PHOTOS: http://loire-et-guitare.asso.st/Index.html
MERCI A TOU(TE)S POUR VOTRE AIDE !!!
A voir également:
- Texte sur image
- Extraire texte d'une image - Guide
- Image iso - Guide
- Transcription audio en texte word gratuit - Guide
- Excel cellule couleur si condition texte - Guide
- Insérer une image dans word sans bouger le texte - Guide
6 réponses
La balise marquee est obsolète depuis des années et surtout ne marche que sur internet explorer, les autres navigateurs ne l'afficheront pas cependant tu peux le faire en js ou en jquery comme avec ce script
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html
Merci Elgazar, encore une fois pour ton aide.
Je regarde et vous donne des news dès que j'aurais regardé...
Je regarde et vous donne des news dès que j'aurais regardé...
Bon, je viens de regarder, mais comme je l'ai indiqué, je ne suis pas calé dans le domaine html.
Je ne parle même pas du java, qui est encore plus inconnu pour moi.
Je ne sais donc pas comment intégré ça dans ma page qui tourne déjà avec du java (diaporama/galerie).
Voici mon code html:
<div id="center_content">
<div id="gallery">
<div id="imagearea">
<div id="image"><a href="javascript:slideShow.nav(-1)" class="imgnav " id="previmg"></a><a href="javascript:slideShow.nav(1)" class="imgnav " id="nextimg"></a>
</div>
</div>
<div id="thumbwrapper">
<div id="thumbarea">
<ul id="thumbs">
<li value="1"><img src="thumbs/1.jpg" width="80" height="60" alt="" /></li>
<li value="2"><img src="thumbs/2.jpg" width="80" height="60" alt="" /></li>
<li value="3"><img src="thumbs/3.jpg" width="80" height="60" alt="" /></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var imgid = 'image';
var imgdir = 'fullsize';
var imgext = '.jpg';
var thumbid = 'thumbs';
var auto = true;
var autodelay = 120;
</script>
<script type="text/javascript" src="slide.js"></script>
</div>
Voici mon code css:
#center_content {
position:absolute;
left: 50%;
top: 50%;
width: 902px;
height: 550px;
margin-top: -225px; /* moitié de la hauteur */
margin-left: -451px; /* moitié de la largeur */
color:#fff;
}
.text_centre_gras{
text-align:center;
font-size:20px;
font-weight:bold;
color:#D06021;
}
#gallery {position:relative; width:622px; height:550px; margin:auto; padding:10px; border:6px solid #fff; background:#AAA}
#images {border:2px solid #9ac1c9; height:610px; background:#eef5f6; margin-bottom:20px}
#image {position:relative; width:608px; height:456px; padding:5px; border:2px solid #666; background:#FFF url(images/loading.gif) center center no-repeat}
#image img {position:absolute; top:5px; left:5px}
#thumbwrapper {margin-top:10px; padding:5px 0; width:618px; height:60px; border:2px solid #666; background:#FFF}
#thumbarea {position:relative; overflow:hidden; height:70px; width:613px; }
#thumbs {position:relative; margin:0 0 0 5px; padding:0; list-style:none; height:70px; width:2000px; border-right:5px solid #FFF}
#thumbs li {float:left; margin-right:5px; cursor:pointer}
.imgnav {position:absolute; height:375px; width:20%; z-index:100; height:375px; width:20%; z-index:100; outline:none; cursor:pointer}
#previmg {left:0; background:url(images/left.gif) left center no-repeat; border-left:5px solid #FFF}
#previmg:hover {opacity:1; filter:alpha(opacity=100)}
#nextimg {right:0; background:url(images/right.gif) right center no-repeat; border-right:5px solid #FFF}
#nextimg:hover {opacity:1; filter:alpha(opacity=100)}
Conclusion:
Dois-je mettre dans ma div gallery ?
<ul id="ticker01"> <ul id="ticker01">
<li><a href="#"> Texte à afficher </ a></ li>
</ul> </ Ul>
Ou dois-je mettre?
$(function(){ $ (Function () {
$("ul#ticker01").liScroll(); $ ("Ul # ticker01") liScroll ().;
}); });
Je dois mettre les fichiers "jquery.li-scroller.1.0.js" et "li-scroller.css" dans mon dossier www, si je ne me trompe pas.
Merci d'avance...
Je ne parle même pas du java, qui est encore plus inconnu pour moi.
Je ne sais donc pas comment intégré ça dans ma page qui tourne déjà avec du java (diaporama/galerie).
Voici mon code html:
<div id="center_content">
<div id="gallery">
<div id="imagearea">
<div id="image"><a href="javascript:slideShow.nav(-1)" class="imgnav " id="previmg"></a><a href="javascript:slideShow.nav(1)" class="imgnav " id="nextimg"></a>
</div>
</div>
<div id="thumbwrapper">
<div id="thumbarea">
<ul id="thumbs">
<li value="1"><img src="thumbs/1.jpg" width="80" height="60" alt="" /></li>
<li value="2"><img src="thumbs/2.jpg" width="80" height="60" alt="" /></li>
<li value="3"><img src="thumbs/3.jpg" width="80" height="60" alt="" /></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var imgid = 'image';
var imgdir = 'fullsize';
var imgext = '.jpg';
var thumbid = 'thumbs';
var auto = true;
var autodelay = 120;
</script>
<script type="text/javascript" src="slide.js"></script>
</div>
Voici mon code css:
#center_content {
position:absolute;
left: 50%;
top: 50%;
width: 902px;
height: 550px;
margin-top: -225px; /* moitié de la hauteur */
margin-left: -451px; /* moitié de la largeur */
color:#fff;
}
.text_centre_gras{
text-align:center;
font-size:20px;
font-weight:bold;
color:#D06021;
}
#gallery {position:relative; width:622px; height:550px; margin:auto; padding:10px; border:6px solid #fff; background:#AAA}
#images {border:2px solid #9ac1c9; height:610px; background:#eef5f6; margin-bottom:20px}
#image {position:relative; width:608px; height:456px; padding:5px; border:2px solid #666; background:#FFF url(images/loading.gif) center center no-repeat}
#image img {position:absolute; top:5px; left:5px}
#thumbwrapper {margin-top:10px; padding:5px 0; width:618px; height:60px; border:2px solid #666; background:#FFF}
#thumbarea {position:relative; overflow:hidden; height:70px; width:613px; }
#thumbs {position:relative; margin:0 0 0 5px; padding:0; list-style:none; height:70px; width:2000px; border-right:5px solid #FFF}
#thumbs li {float:left; margin-right:5px; cursor:pointer}
.imgnav {position:absolute; height:375px; width:20%; z-index:100; height:375px; width:20%; z-index:100; outline:none; cursor:pointer}
#previmg {left:0; background:url(images/left.gif) left center no-repeat; border-left:5px solid #FFF}
#previmg:hover {opacity:1; filter:alpha(opacity=100)}
#nextimg {right:0; background:url(images/right.gif) right center no-repeat; border-right:5px solid #FFF}
#nextimg:hover {opacity:1; filter:alpha(opacity=100)}
Conclusion:
Dois-je mettre dans ma div gallery ?
<ul id="ticker01"> <ul id="ticker01">
<li><a href="#"> Texte à afficher </ a></ li>
</ul> </ Ul>
Ou dois-je mettre?
$(function(){ $ (Function () {
$("ul#ticker01").liScroll(); $ ("Ul # ticker01") liScroll ().;
}); });
Je dois mettre les fichiers "jquery.li-scroller.1.0.js" et "li-scroller.css" dans mon dossier www, si je ne me trompe pas.
Merci d'avance...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question