Here is the basic code for the function I want to do:
<style>
.cmaxx_rollover {
height: 279px;
width: 347px;
display: block;
background: url('http://imperialsystems.biz/imp/files/products/prod_cmaxx.png') bottom;
text-indent: -99999px;}
.cmaxx_rollover:hover {
background-position: 0 0;}
</style>
<a class="cmaxx_rollover" href="http://imperialsystems.biz/imp/products/cmaxx-dust-fume-cartridge-collector/"></a>
So now the question, I have a page of about a dozen products that I need this hover to work on. Is there a better way to do it than to create a new class for each product? Or should I just create the CSS and class for each product?
If you only change the shadow behind the grey rectangle, you could set it as background for all the products and insert product images with transparent background as img like this:
<div class="products">
<img src="cmaxx.png" alt="CMAXX">
<img src="productx.png" alt="Product X">
</div>
With simple style:
.products a {
background: url(gray.png) bottom;
width: 279px;
width: 347px;
display: block;
}
.products a:hover, .products a:focus {
background-position: 0 0;
}
And even better you could throw away the image and use CSS gradients and shadows.
If there will be different backgrounds you will have to use separate classes (possibly with partially shared css). You can also make the images to one to save http requests using css sprites technique.
From what it sounds like, you just need to give the same class name to each item and then implement the hover behavior once. That's all it really takes. So give
class="cmaxx_rollover"
to each product and keep your CSS as is and it'll work on all of them.
Related
I want to use a standard set of buttons on a website regardless of what is written in them (i.e. submit, pay, go, spell correct) but for some reason I can not get the sprite image to show up. My codes is as follows:
HTML:
<div id="iconic">
Place Sprite button here <span><a class="button" href="#">Test</a></span>
</div>
CSS:
span.iconic a:link
span.iconic a:visited
{
display: block;
background-image:url('images/an_nav_btn.jpg');
width: 150px;
height: 45px;
}
span.iconic a:hover
{
background-position: 0 -50px;
}
span.iconica a:active
{
background-position: 0 -100px;
}
Any suggestions on how to get this to display with the text on top (in this case it will have the button with the word "test" on it.
Thanks in advance.
According to your posted css you are attempting to manipulate a link inside a span with the class of "iconic"... and that doesn't work with what you have in the html:
to get you on the right track, try
replacing all the span.iconic's
with #iconic span's
#iconic span a translates to "all <a>'s inside a <span> inside any element with the id of 'iconic' "
In CSS:
. is used for to prefix class names
# is used to prefix IDs.
Your element is a DIV, and you're specifying a SPAN in your CSS. You've got both of these mixed up.
The CSS declaration for <div id="iconic">
would be:
#iconic {
...
}
You may want to consider looking at Font Awesome, that handles a lot of this for you.
I have script that handles image rollovers with css. What I would like to know if this the proper way of doing a CSS rollover? I also wanted to know if this is good how do you handle other rollover images do you have to have a separate css for each image?
Here is an example: http://jsfiddle.net/GFec3/40/
CSS Code:
a.rollover {
display: block;
width: 27px;
height: 25px;
text-decoration: none;
background: url("http://www.gdisinc.com/barker/images/menubar/bnt_facebook.jpg");
}
a.rollover:hover {
background-position: -350px 0;
}
.displace {
position: absolute;
left: -5000px;
}
HTML
<span class="displace">TEST</span>
This works but just wanted to know is there a special way to handle more then one rollover image?
You don't have to use background images in css. Example:
<STYLE type="text/css">
.roll .on { display: none; }
.roll .off { display: block; }
.roll:hover .on { display: block; }
.roll:hover .off { display: none; }
</STYLE>
<DIV class="roll">
<IMG class="on" src="...">
<IMG class="off" src="...">
</DIV>
There's lots of ways of doing this. Which to choose is up to you.
Use CSS sprite, with this you will use only one background image, you just have to change background position for different image hover
CSS Sprites: Image Slicing’s Kiss of Death
The method you currently have is the most efficient. Among other things, it "preloads" the rollover image since it's the same one as the non-rollover just a different part of it. It also reduces the number of HTTP requests to the bare minimum (short of the data scheme) and in some cases actually improves filesize (best case is two images using similar colour palettes, one colour table needed instead of two).
Don't change it, it's perfect.
You do have to define a separate CSS for each rollover, however if the images are the same size you can reduce the damage by reusing the :hover definitions.
I have been researching how to use CSS sprites as image links, but I can't figure this out. I have a PNG (here: ) that has two images in it (for simplicity). I want each image to be act as an icon that can be linked to an external website (Twitter and Facebook). I set up my CSS like this:
CSS
#authorpage-links ul {
list-style-type:none;
}
#authorpage-links ul li {
background: url("/links-authorpage1.png") no-repeat scroll 0 0 transparent;
}
#authorpage-links ul li.twitter {
background: url("/links-authorpage1.png") no-repeat 0 0;
width: 20px;
height: 14px;
}
#authorpage-links ul li.facebook {
background: url("/links-authorpage1.png") no-repeat -21px 0;
width: 14px;
height: 14px;
}
...and my HTML like this:
HTML
<ul id="authorpage-links">
<li id="authorpage-links" class="twitter">
<a target="_blank" href="http://twitter.com/"></a>
</li>
<li id="authorpage-links" class="facebook">
<a target="_blank" href="http://facebook.com/"></a>
</li>
</ul>
Now, 2 questions:
1) Is using a list to display these images the best way or should I use div's?
2) Is this an issue with my CSS IDs and classes?
Any help is greatly appreciated.
Based on a revision of your CSS (problems that I'll come to, later) to the following:
#authorpage-list {
list-style-type: none;
}
#authorpage-list li {
float: left;
}
#authorpage-list li a {
background-color: transparent; /* I broke the background down into individual parts */
background-image: url(http://i.stack.imgur.com/ta3Va.png);
background-position: 0 0;
background-repeat: no-repeat;
width: 15px;
height: 15px;
display: block; /* in order that the a elements could be assigned a width/height */
border: 1px solid #f90; /* for diagnostic purposes while working on this, adjust to taste */
}
#authorpage-list #authorpage-facebook-link a {
/* a specific selector, in order to be more specific than the previous
selector which styled the defaults for the a elements in this position */
background-position: -21px 0;
}
And amending your HTML to the following:
<ul id="authorpage-list">
<li id="authorpage-twitter-link" class="twitter">
<a target="_blank" href="http://twitter.com/"></a>
</li>
<li id="authorpage-facebook-link" class="facebook">
<a target="_blank" href="http://facebook.com/"></a>
</li>
</ul>
I came up with this: JS Fiddle demo.
CSS problems
This is the biggest no-no insofar as HTML goes (or so far as I've ever been able to see, it's even worse than the blink tag): you have multiple examples of the same id in your HTML. An id must be unique within the document. If not, you have invalid HTML. Which causes problems with CSS, with JavaScript and...it's just bad.
If you have multiple elements that need to share a property/style, or whatever, use a class, not an id.
Your selectors. #authorpage-links ul should match a ul element within an ancestor element of id="#authorpage-links". The ul is the element with that id. I'll ignore that its child elements also had that id, since I think I've covered that part. All your other CSS started off that base, which wasn't accurate, and so didn't work.
Your <li> elements may be sized to 14x14, but you've got nothing in the <a> tags, so those'll shrink down to a 0x0 area, effectively making your list elements clickable areas invisible. You should probably put a space into the anchor tag, so there's SOMETHING to push them open, e.g.
<a target="_blank" href="http://facebook.com/"> </a>
^^^^^^
Your a link need to have a size. I did so in making the a's have a clickable area. Since your lis don't need a size i gave the size to the a links.
Replace your li css with:
ul#authorpage-links li a {
display: inline-block;
background: url("/links-authorpage1.png") no-repeat scroll 0 0 transparent;
}
ul#authorpage-links li.twitter a {
background-position: 0 0;
width: 20px;
height: 14px;
}
ul#authorpage-links li.facebook a {
background-position -21px 0;
width: 14px;
height: 14px;
}
Also remove the id attribute from your lis.
"... fantastic answer ..." - Sparky672
I am trying to do a little optimization on my website and it has brought me to what seems to be a quite common topic but I haven't been able to find a problem quite like mine.
What I had. A image sprite (foggy/clear) and text on top of it. When you hovered over the image it could become clear, when you hovered over the text it would highlight and turn blue. (The image would remain clear)
What I want. To reduce the sprite into one image (rather than two in one), as it is the largest file on my main page and 57% of my load time is spent on images.
What I have done:
1) Gone from a sprite to just one clear image.
2) Created a new 'foggy-img' div container, placed it on top of the image, white with opacity: 0.15
3) Created a new div 'img-text' container for the text to put it outside the 'foggy-img' so the opacity doesn't effect it and have got it nicely place where it should be.
The Problem: It is small, the see-through box has replaced the sprite nicely and works. The text also highlights nicely. But. When one hovers over the text the see-through box becomes 'foggy' again.
Is there any way to keep the 'foggy-box' clear when hovering over the text which is in a separate div?
The HTML:
<div id="photo-feature">
<a href="services.html">
<div id="img">
<div id="photo-fog"></div>
<div id="photo-text"><h3>Learn More...</h3></div>
</div>
</a>
</div>
The CSS:
#photo-feature a { text-decoration: none; }
#photo-feature #img { margin: 4px 5px 0 4px; width: 565px; height: 283px; background: url(images/photo-feature.png) 0 0; }
#photo-feature #img #photo-fog { height: 100%; background-color: #fff; opacity: 0.15; }
#photo-feature #img #photo-fog:hover { opacity: 0; }
#photo-feature #img #photo-text { position: absolute; margin-top: -34px; margin-left: 428px;}
#photo-feature #img #photo-text h3 { float: left; display: inline; color: #fff; }
#photo-feature #img #photo-text h3:hover { color: #0066cc; text-decoration: underline; }
You could use adjacent siblings selector.
(further details)
It doesn't work in older browsers though (guess which).
You would have to swap the ordering of your HTML a bit. Basically put the text first then use something like this:
#photo-text:hover + #photo-fog { // Do something
Right now you'd not be able to set the hover on the H3, but why not just style up the h3 rather than the #photo-text element then it would work fine.
Edit: Beautifully colour co-ordinated js fiddle for you to take a look at: http://jsfiddle.net/will/Gt8KX/
Hope that helps :)
I've got the following in my .css file creating a little image next to each link on my site:
div.post .text a[href^="http:"]
{
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
How do I modify this snippet (or add something new) to exclude the link icon next to images that are links themselves?
If you set the background color and have a negative right margin on the image, the image will cover the external link image.
Example:
a[href^="http:"] {
background: url(http://en.wikipedia.org/skins-1.5/monobook/external.png) right center no-repeat;
padding-right: 14px;
white-space: nowrap;
}
a[href^="http:"] img {
margin-right: -14px;
border: medium none;
background-color: red;
}
Google
<br/>
<a href="http://www.google.ca">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/50px-Commons-logo.svg.png" />
</a>
edit: If you've got a patterned background this isn't going to look great for images that have transparency. Also, your href^= selector won't work on IE7 but you probably knew that already
It might be worth it to add a class to those <a> tags and then add another declaration to remove the background:
div.post .text a.noimage{
background:none;
}
You need a class name on either the a elements you want to include or exclude. If you don't want to do this in your server side code or documents, you could add the classes with javascript as the page is loaded. With the selection logic wrapped up elsewhere, your rule could just be:
a.external_link
{
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
It would be possible with XPath to create a pattern like yours that would also exclude a elements that had img children, however this facility has been repeatedly (2002, 2006, 2007) proposed and rejected for CSS, largely on the grounds it goes against the incremental layout principles.
So, while it is possible to do neat conditional content additions as you have with a contextual selector and a prefix match on the href attribute, CSS is considerably weaker than a general purpose programming language. To do more complex things you need to move the logic up a level and write out simpler instructions for the style engine to handle.
If you have the content of the links as a span, you could do this, otherwise I think you would need to give one scenario a class to differentiate it.
a > span {
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
a > img {
/* any specific styling for images wrapped in a link (e.g. polaroid like) */
border: 1px solid #cccccc;
padding: 4px 4px 25px 4px;
}