show text over images using jquery slider
I implemented the easySlider as here http://cssglobe.com/lab/easyslide开发者_如何学运维r1.7/02.html and now i want to show some text over the image like this http://themeforest.net/item/community-innovation/full_screen_preview/101572
I see that both are different plugins but i want to use the easySlider plugin and show the text. I tried some things like getting the alt text and displaying it over the image but din't work. any ideas please?
regards
You need to wrap the text to an element after each image, like this:
<li>
<img src="[whatever]"/>
<div>Here comes my text</div>
</li>
Then position with CSS by giving setting the <li>
's position
property to relative
, and absolute
for the <div>
that holds your text, with top
/right
/bottom
/left
properties, depending on your design.
#slider li { position: relative; }
#slider div { left: 10px; right: 10px; bottom: 10px; position: absolute; }
Note: If you want IE6 support, use the left
/right
+width
property for the <div>
in your CSS instead of left
+right
.
instead of using <li>
you can use <p>
and <span>
for the text so the code will be:
<p><img src=""/><span>Here the text</span></p>
This way the code will be valid :)
精彩评论