Hover Image Text
- 授权协议: 未知
- 开发语言:
- 操作系统: 未知
- 软件首页: http://plugins.jquery.com/project/HoverImageText
软件介绍
* 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 target="_blank" rel="nofollow" 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 target="_blank" rel="nofollow" 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 target="_blank" rel="nofollow" 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
大思维：集体智慧如何改变我们的世界
杰夫·摩根 / 郭莉玲、尹玮琦、徐强 / 中信出版集团股份有限公司 / 2018-8-1 / CNY 65.00
智能时代，我们如何与机器互联，利用技术来让我们变得更聪明？为什么智能技术不会自动导致智能结果呢？线上线下群体如何协作？社会、政府或管理系统如何解决复杂的问题？本书从哲学、计算机科学和生物学等领域收集见解，揭示了如何引导组织和社会充分利用人脑和数字技术进行大规模思考，从而提高整个集体的智力水平，以解决我们时代的巨大挑战。是英国社会创新之父的洞见之作，解析企业、群体、社会如何明智决策、协作进化。一起来看看 《大思维：集体智慧如何改变我们的世界》 这本书的介绍吧!
