I'm just trying to use this little trick I saw in one of my web design magazines to make a little image rollover but I'm having just a small bit of trouble. My attempt was a terrible fail lol. I just want to see the top half (42px tall) and then the bottom half on rollover (-42px obviously)
width is also 42px. Could someone write something up to make that happen?
image:
http://img826.imageshack.us/img826/6568/homebi.png
It's all about the initial (non-:hover) and final (:hover) values of background-position.
#test {
height: 42px;
width: 42px;
background-image: url(http://img826.imageshack.us/img826/6568/homebi.png);
background-repeat: no-repeat;
background-color: transparent;
background-position: top; /* <-- key step #1 */
}
#test:hover {
background-position: bottom; /* <-- key step #2 */
}
Demo
As per your comment re: wrapping the <div> with an anchor (<a>), here's what to do:
Swap the <div> out for a <span>. This is because valid children of anchors must be inline elements
But inline-displayed elements won't behave accept dimensions! So, fix this new problem with one additional CSS property: display: inline-block on the span.
Demo 2
Try this:
<style type="text/css">
.menu {
}
.menu a {
float: left;
display: inline;
width: 42px;
height: 42px;
text-decoration: none;
}
.menu a span {
display: block;
overflow: hidden;
height: 0;
}
.menu .home {
background: transparent url(http://img826.imageshack.us/img826/6568/homebi.png) 0 0 no-repeat;
}
.menu .link:hover {
background-position: 0 -42px;
}
</style>
<div class="menu">
<span>Home</span>
</div>
Heres the bare bones for an image rollover.
the css
.rollover{display:block; height:42px; width:42px; background:url(http://img826.imageshack.us/img826/6568/homebi.png) top;}
.rollover:hover{background-position:bottom;}
.rollover span{display:none}
The html
<span>Home</span>
The important part is the background position, which on the buttons normal state is set to 'top', when you rollover the background postion is 'bottom'.
Assuming your image which contains both button states is 84px high this will work fine.
Related
Summary / Nutshell
Is it possible to have a full width (display: block) clickable hyperlink HTML element that has a unique, positioned sprite background image class, all in just one HTML <a> element?
Background
Currently I have a working elaborate HTML menu, whereby each hyperlink has its own unique icon sprite background position.
The sprite icons each have their own unique class, which is added on top of the default menu class that holds the background url and general layout. All icons are exaclty the same size, 13 x 13 px. Each hyperlink has a full with using display:block. The mouse hover must be activated as soon as the block width is hovered, sothat short text or long text hyperlinks get a equal full width hover color.
SPRITES CSS
.home {background-position:0 -13px}
.about {background-position:0 -1638px}
.ethos {background-position:0 -2944px}
.etcet {background-position:0 -5611px}
GENERAL CSS
li a{
display: block;
line-height: 2em;
color: black;
padding: 10px 1em 10px 2em;
}
.menu{
display: inline-block;
background: url(icons.png) no-repeat;
width: 13px; height: 13px;
vertical-align: middle;
margin: -2px 15px 0px -29px;
}
Currently the following undesired bloated HTML markup works...
Undesired: Bloated HTML
<li>
<a href="/home">
<p class="menu home"></p> Home
</a>
</li>
... but I wonder if it would be possible to reduce that (without losing any of the essential functionality) to the absolute bare minimum HTML:
Desired: Minimal HTML
Home
New CSS
a{
position: relative;
padding: 0 0 0 1em;
}
a:before{
content:'';
position: absolute;
background-image: url(icons.png);
background-repeat: no-repeat;
top: .75em;
left: 2px;
height: 13px;
width: 13px;
}
Stuck setting the unique background-position
I tried the a:before{} workaround and while the background icon boxes are positioned nicely relative to the hyperlinks, and the full width mouse hover works too, the sprites themselves are all from the initial starting pivot of x=0 y=0 of the background image!
In other words all the sprite icons are take from the first block of the sprite background png file. The unique individual class names do not seem to have been used for the background-position when using a:before{}.
If I move the background-image from a:before{} to a{}, then the layout breaks completely beyond repair.
In summary, is there a way to make a one-element HTML work with sprites on hyperlinks, using just a:before{} without necessitating any extra meaningless html elements such as <spans> or <p>, and achieve all the essentials of sprites positioning and full with block hoverability?
Any and all help is greatly appreciated!
You need to add pseudo-class to your customization classes.
I've added an image how it works. It's explains more better, than hundreds of words.
.home::before {
background-position: 0 0px;
}
.about::before {
background-position: 0 -13px;
}
.ethos::before {
background-position: 0 -26px;
}
Also, if you have a simple menu, remove ul, li tags and wrap all links in a nav tag.
<nav role="menu" aria-labelledby="navigation menu">
Home
About
Ethos
</nav>
nav {
display: inline-flex;
flex-flow: column;
}
a {
position: relative;
padding: 0 1.3rem;
text-decoration: none;
transition: all 0.3s ease-in-out;
}
a:before {
content: '';
position: absolute;
background-image: url('https://i.ibb.co/M7008LV/sprite.png');
background-repeat: no-repeat;
top: 50%;
left: 2px;
height: 13px;
width: 15px;
transform: translateY(-50%);
}
.home::before {
background-position: 0 0px;
}
.about::before {
background-position: 0 -13px;
}
.ethos::before {
background-position: 0 -26px;
}
a:hover {
background-color: #ffd73d;
}
<nav role="menu" aria-labelledby="navigation menu">
Home
About
Ethos
</nav>
So I've got a series of clickable images in my page. I've tried to optimise this by generating a single image containing all the images I need and I intend to use sprites to select the one I want. I'm having trouble figuring out the best way to add anchor tags to the sprites though?
So I'm after a clickable HTML element that supports sprites, preferably without using JavaScript. I can do it using JavaScript but I'd prefer to avoid it.
OK, here's my code, what there is:
.touringEscorted {
height:125px;
width: 214px;
background-image: url('/Images/Travel2New/ToursImages/ToursBanners.jpg');
background-position: 0 0;
}
.touringNew {
height:125px;
width: 214px;
background-image: url('/Images/Travel2New/ToursImages/ToursBanners.jpg');
background-position: -10px 0;
}
I've tried
<div class="touringEscorted">
and
and several others. Seems there's no way to use sprites/background images and anchor tags at the same time. Am I right?
Any suggestions?
Ok then :
Should work, but adding display:block; to the CSS :
.touringEscorted {
height:125px;
width: 214px;
background-image: url('/Images/Travel2New/ToursImages/ToursBanners.jpg');
background-position: 0 0;
display:block;
}
Like this?
<a class="sprite sprite1" href="javascript:;">Link Text</a>
sprite {
display: block;
background: url(path/to/image/file.ext);
text-indent: -9999px;
}
sprite1 {
width: WWpx;
height: HHpx;
background-position: -NNpx - MMpx;
}
Doesn't Google consider off screen text as spammy? I came up with a modification. I put the link in another element, in this case a table. I added the background image class in the element and in the link like this:
CSS code:
.sprite{
background: url('images/sprite.png') no-repeat top left;
}
.sprite.termite {
background-position: 0px -499px;
width: 150px; height: 113px;
display: block;
}
HTML code:
<td class="td sprite termite">
</td>
It renders the image in the table perfectly and clicks!
I use the CSS Sprite Technique with a background image that looks something like this:
The CSS code for the icons:
div.icon {
background-color: transparent;
background-image: url("/images/icons.png");
background-position: 0 0;
background-repeat: no-repeat;
display: inline-block;
height: auto;
vertical-align: text-top;
width: auto;
}
div.icon:empty {
width:16px;
height:16px;
}
div.icon:not(:empty) {
padding-left:20px;
}
div.icon.attenuation {
background-position: 0 0;
}
My icons can be used like this:
<div class="icon warning"></div>
I want to put some text inside my icons like:
<div class="icon warning">There is a warning on this page</div>
But the problem is that the background image covers the entire text area:
The question is: how can I use only part of an image as a background image for part of my element?
Notes:
setting width to 16px for div.icon doesn't help.
Remember, where ever possible, you shouldn't change your markup just to achieve a design. It is possible using your markup.
div.icon:before {
content: "";
background-color: transparent;
background-image: url("/images/icons.png");
display: inline-block;
height: 16px;
vertical-align: text-top;
width: 16px;
}
div.icon:not(:empty):before {
margin-right: 4px;
}
div.icon.attenuation {
background-position: 0 0;
}
You have two ways:
1)Your markup must be like this:
<div class="icon warning"></div><div class="txt">There is a warning on this page</div>
.icon {width:10px(for ex.)}
2)You must change the image. Icons in the image must be below the another
Sorry, my previous answer was not well though out.
Edit:
If you have a 16px padding, you should set the width to 0, not 16px. And I've got troubles getting the :not(:empty) bit to work on all browsers; better get rid of it. So the CSS becomes:
.icon {
...
width:0; height:16px; padding-left:16px;
}
.icon:empty {
width:16px; padding-left:0;
}
jsFiddle
set width: 16px; height: 16px; overflow: hidden; text-indent: -9999em; and remove padding
I've created a sprite at a website I'm using to learn CSS at http://flexibletheme.tumblr.com/, however since the width is set at 24px the text tries to make a small vertical column.
Anyway to get it to render normally with 24px of margin on the right?
You should put your sprite inside of a nested <span> instead of wrapping it around your link text. Like this:
<span class="sprite"></span>Sample Link
Be sure to either float your sprite to the left or make it display:inline-block; so that it can retain a width and height but still be inline with your link text.
ditch the width:24px; add padding-left:24px
You should wrap the element around your sidebar unordered list and children instead of closing it before it does anything:
<aside>
<ul>
<li>stuff</li>
</ul>
</aside>
Then give it a width, or let content and sidebar float and clear them after. (I'd also recommend looking into stuff like grids for ease.. http://978.gs/)
write this white-space: nowrap; in your a tag
#links li a{white-space: nowrap;}
If IE7 support (and below) is not an issue, you could use :before pseudo element without adding any extra mark-up:
#links a {
display: block;
position: relative;
padding: 2px 2px 2px 30px;
min-height: 20px;
line-height: 24px;
}
#links a:before {
content: '';
position: absolute;
left: 0;
top: 2px;
width: 24px;
height: 24px;
background: url(http://static.tumblr.com/wgijwsy/itFlt1l8x/links.png);
}
a#rss:before { background-position: -24px 0 }
a#facebook:before { background-position: 0 -24px }
a#twitter:before { background-position: 0 -48px }
Otherwise, add span inside the anchors and replace a:before with a span.icon.
And move the h2 outside of your ul. That's invalid HTML.
I have an image that is a link. I want to show a different image when the user hovers over the link.
Currently I'm using this code:
<a href="http://twitter.com/me" title="Twitter link">
<div id="twitterbird" class="sidebar-poster"></div></a>
div.sidebar-poster {
margin-bottom: 10px;
background-position: center top;
background-repeat: no-repeat;
width: 160px;
}
#twitterbird {
background-image: url('twitterbird.png');
}
#twitterbird:hover {
background-image: url('twitterbird_hover.png');
}
But I'm having loads of problems: the div isn't picking up the CSS rules (the element just isn't showing the related CSS rules when I view it in Firebug).
Perhaps this is because (as I know) this is invalid HTML: you can't put an <a> around a <div>. However, if I switch to <span> then it seems I get bigger problems, because you can't set a height and width on a span reliably.
Help! How can I do this better?
use a class for the link itself and forget the div
.twitterbird {
margin-bottom: 10px;
width: 160px;
height:160px;
display:block;
background:transparent url('twitterbird.png') center top no-repeat;
}
.twitterbird:hover {
background-image: url('twitterbird_hover.png');
}
If you have just a few places where you wish to create this effect, you can use the following html code that requires no css. Just insert it.
<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE"
onmouseover="this.src='URL OF IMAGE ON HOVER GOES HERE'"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE AGAIN'" /></A>
Be sure to write the quote marks exactly as they are here, or it will not work.
The problem with changing it via JavaScript or CSS is that if you have a slower connection, the image will take a second to change to the hovered version. This will cause an undesirable flash as one disappears while the other downloads.
What I've done before is have two images. Then hide and show each depending on the hover state. This will allow for a clean switch between the two images.
<a href="/settings">
<img class="default" src="settings-default.svg"/>
<img class="hover" src="settings-hover.svg"/>
<span>Settings</span>
</a>
a img.hover {
display: none;
}
a img.default {
display: inherit;
}
a:hover img.hover {
display: inherit;
}
a:hover img.default {
display: none;
}
That could be done with <a> only:
#twitterbird {
display: block; /* 'convert' <a> to <div> */
margin-bottom: 10px;
background-position: center top;
background-repeat: no-repeat;
width: 160px;
height: 160px;
background-image: url('twitterbird.png');
}
#twitterbird:hover {
background-image: url('twitterbird_hover.png');
}
It can be better if you set the a element in this way
display:block;
and then by css sprites set your over background
Edit: check this example out http://jsfiddle.net/steweb/dTwtk/
You could do the following, without needing CSS...
<img src="URL_OF_FIRST_IMAGE_SOURCE" onmouseover="this.src='URL_OF_SECOND_IMAGE_SOURCE'" onmouseout="this.src='URL_OF_FIRST_IMAGE_SOURCE_AGAIN'" />
Example: https://jsfiddle.net/jord8on/k1zsfqyk/
This solution was PERFECT for my needs! I found this solution here.
Disclaimer: Having a solution that is possible without CSS is important to me because I design content on the Jive-x cloud community platform which does not give us access to global CSS.
If you give generally give a span the property display:block, it'll then behave like a div, i.e you can set width and height.
You can also skip the div or span and just set the a the to display: block and apply the backgound style to it.
<!---->
<style>
.myImage {display: block; width: 160px; height: 20px; margin:0 0 10px 0; background: url(image.png) center top no-repeat;}
.myImage:hover{background-image(image_hover.png);}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Image on Hover in CSS</title>
<style type="text/css">
.card {
width: 130px;
height: 195px;
background: url("../images/pic.jpg") no-repeat;
margin: 50px;
}
.card:hover {
background: url("../images/anotherpic.jpg") no-repeat;
}
</style>
</head>
<body>
<div class="card"></div>
</body>
</html>