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
-
.device-icon{width:24px;height:24px;outline:none;cursor:pointer;margin-right:11px;position:relative;&:nth-last-child(2) { margin-right: 24px; }} .camera-icon{background:url('~ROOT/shared/assets/image/
-
html>background-clip .border,.padding,.content{/*给最外层的div设置样式*/ width:300px;height:300px; float:left;margin-left:50px; } a{ text-decoration:none; font-size:30px; } .div1,.div2,.div3{/*放置背景图片的div样式*/ w
-
微信小程序中，可以用 hover-class 属性来指定元素的点击态效果。但是在在使用中要注意，大部分组件是不支持该属性的。 目前支持 hover-class 属性的组件有三个：view、button、navigator。 不支持 hover-class 属性的组件，同时也不支持 hover-stop-propagation、hover-start-time、hover-stay-time 这三个
-
最近在学习PyQt5，有些问题很难找到原因，最好的办法就是一步一步排除，网上的经验很多时候都是不合适的，我最近遇到了如下问题： Unknown property text Unknown property text 在运行过程中输出了这么两段字符，因为没有影响界面，在调试过程中，就忽略了，后来发现这个每次运行都会输出，所以网上搜了一下，原因是五花八门的，什么关键字符写错了什么的，总的来说并不匹配
-
css通过hover状态改变另一个标签的属性 1当元素关系为祖先和子孙时 中间直接隔空格选择后代 2当关系为兄弟关系时，用“+”（相邻兄弟）或者”~“（后面所有同级元素） css的选择符只能是从父到子，从上到下的顺序。无法根据子元素的状态来改变祖先元素。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <