Image Badges/Labels on the corner. What library (jQuery?) would be best?
I've been trying to figure out exactly what these are called, and what library(s) you can use to implement them. Or maybe there's a straight CSS solution that I haven't seen?
Basically I want to add a label to the corner of some of my images. I want it to look like a pice of colored ribbon that says "New" or "Free". But I can't quite seem to figure out what these ribbons are called. Here's an example (note: the label is in the upper right hand corner).
edit: I'm a new user so I can't post images. Lame. But I understand the anti-spam premise behind it. Instead, here's a link to an example slideshow that has a "new" label across the corner:
http://www.slidesjs.com/
Googling has turned up "badges", but they look more like the iPhone badges and that's not what I want. Here's what those look like. Notice the red badges also in the upper right of the two sections of text below.
edit: removed second image.
I also turned up this link while searching, but the badge used in the example is ugly.
Position badge over corner of image automatically.
So I'm wondering if I'll have to create my own or i开发者_开发技巧f there's a plugin or pre-made solution out there. Thanks in advance!
You don't need Javascript for this. You can do it with good old css. Something along the lines of
#badge{
position: absolute;
top: 0p;
left: 0px;
}
You can change top to bottom, and left to right if you want it to appear in a different corner. The you just put your badge in the same div as your image like:
<div>
<img id="badge" src="..." />
<img src="..." />
</div>
Oh, the container div also needs position: relative; for the position: absolute inside it to work. Here's a link to a jsfiddle using images from the slideshow you linked me too:
http://jsfiddle.net/ky2Ac/
It looks a bit different because the added a white border around their image, but that's easy enough to do. The point is the badge :) Now you just need to find a good image with a transparant background to use for the badge (I don't know what else to call it either).
A simple way to do this is to place the banner as an image in a div and then the picture as the background-image of the div.
HTML
<div>
<img src="http://assets.visrez.com/sites/gibsonhotel/Includes/images/corner_banner.png" />
</div>
CSS
div{background:url(http://www.health-for-dogs.com/wp-content/uploads/2011/05/old-dog-150x150.jpg) no-repeat;}
http://jsfiddle.net/jasongennaro/25cFh/1/
Simple CSS.
Create the element with the banner graphic, place it in the root of your HTML code (ie inside the <body> tag, but not inside anything else), then style it as follows:
.banner {
position: fixed;
top: 0;
right: 0;
z-index: 1000;
}
Explanation:
position:fixed - this sets it so that its position is fixed in the browser window. You can scroll the rest of the page, and the banner won't move.
(If you'd prefer it to move with the rest of the page, change it to position:absolute;)
top:0 and right:0 - do exactly what they sound like they should do, and position the banner in the top right corner of the page. Feel free to use bottom and left if you'd prefer. If you want to indent it slightly, set it something like this right:5px; (note the px for pixels).
z-index:1000 - this can be any value, or could even be left off entirely, depending on how the rest of you page is laid out. The idea is to ensure that the banner shows up in front of any other content you may have placed on the page.
Hope that helps.
加载中,请稍侯......
精彩评论