Hover Image Text 介绍
- Added live demo page (url at bottom of page) - Updated! to bring scrollup animation and fixed width list!
This project allows you to create images along with descriptive text that is
displayed on mouse over, similar to a tool hip, however the text is overlayed
over the image.
I had seen similar examples of this functionality on the internet, some using
flash and others javascript.
This is my first project using jQuery and I thought it might be useful for
others.
You simple create some images (can be listed together or separately) along
with there text descriptions:
<ul class="imageLibrary"> <li><a href="http://www.bbc.co.uk/go/homepage/int/wil/wth/5day/t/-/weather/5day.shtml"><p>Wednesday<br />max: 9°C<br />min :5°C</p><img src="http://www.bbc.co.uk/home/img/weather/1.gif" /></a></li> <li><a href="http://www.bbc.co.uk/go/homepage/int/wil/wth/5day/t/-/weather/5day.shtml"><p>Thursday<br />max: 10°C<br />min :7°C</p><img src="http://www.bbc.co.uk/home/img/weather/14.gif" /></a></li> <li><a href="http://www.bbc.co.uk/go/homepage/int/wil/wth/5day/t/-/weather/5day.shtml"><p>Friday<br />max: 13°C<br />min :10°C</p><img src="http://www.bbc.co.uk/home/img/weather/12.gif" /></a></li> </ul>
That’s the hard part done… ;-)
Now you need to include the jQuery javascript and the HoverImageText plugin
javascript, add the following to your HEAD section:
<script type="text/javascript" src="http://code.jquery.com/jquery- latest.js"></script> <script type="text/javascript" src="jquery.hoverimagetext.js"></script>
To activate the HoverImageText plugin you’ll need to give it some data (the a
elements that you created earlier will be fine), add this underneath the
script includes above:
<script type="text/javascript"> $(document).ready(function() { /* options can be found within the plugin js */ $('.imageLibrary a').HoverImageText(); }); </script>
Notice the ‘.imageLibrary a’ selection, that will select the anchor (a)
elements from my example above.
That’s it… you’ve done it, it should Now display the image text when you
move your mouse over the images.
Of course, it doesn’t look that pretty at the moment… add some style and
you’ll be away!
<style type="text/css"> /* your own style sheet, here are some examples */ .imageLibrary { display: inline; clear: none; } .imageLibrary li { list-style-type: none; margin-left: 10px; display: inline; clear: none; } .imageLibrary p { position: absolute; margin: 0px; margin-left: 2px; margin-top: 2px; z-index:2; background-Color: #555555; color: #ffffff; width: 80px; text-align: center; padding-top: 5px; padding-bottom: 5px; opacity:.8; display: none; clear: none; } .imageLibrary img { z-index:1; width: 80px; height: 80px; border: #888888 groove 2px; } </style>
The full example page is included in the download release.
As mentioned earlier, your image (and text) elements need not be listed
together (like in the example above), you can of course create numerous images
scattered around your web page… You will of course need to contain them and
style them, I used the anchor (a) element in the example, you Could use
something else if you like (div, span…).
Well that’s it for Now, enjoy!
My other projects include:
Bounce - http://plugins.jquery.com/project/Bounce
TextArea Resizer - http://plugins.jquery.com/project/TextAreaResizer
Hover Image Text 官网
http://plugins.jquery.com/project/HoverImageText
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
