I'm currently using this current HTML markup with Javascript to create text links with a inline image that "rolls over" on the text hover.
<div><a id="link" href="page.html"
onmouseover="rollover(this.id,'over');"
onmouseout="rollover(this.id,'out')"
>Link</a><img id="linkButton" src="image.gif" /></div>
It's important that the image is inline so I can easily create new text links with varying lengths of text.
I want to try and get this done without Javascript, and using a single image containing the over and out states of the rollover, so probably using the background position trick.
You need to use background-image (or just background) in CSS. Here is an example http://www.webvamp.co.uk/blog/coding/css-image-rollovers/
The key is using pseudo classes on the link element. Eg:
a:hover
a:active
a:visited
You can also use inline-block so that the a isn't completely a block element. You may want to set a width and a height to it. Keep in mind display:inline-block doesn't work that great in IE7, if you still need to support that.
Here's some additional tips on using CSS Sprites
Related
Is there a CSS hack/technique to take an <img> element (with no other markup) and hide the pixel content of the image while still displaying it as an element with background color and stroke?
For example, take an <img src="foo.jpg"> on the page and make it a 32x32 badge of solid color.
Though I am interested in browser-specific hacks (does Webkit have a solid-fill effect?) or CSS3 awesomesauce (is there an image-content-opacity:0.0?), I need a solution that works on IE8+, FF4+ and thereabouts.
If you are interested in the motivation for this question, see the edit history of this page. It has been removed because it was distracting users into helpfully trying to find workarounds to solve that problem instead of answer this question.
Hide the image and use the background filled with a solid color.
Example here http://jsfiddle.net/notme/ZUvHN/6/
This is a take off of my comments above and notme's solution:
http://jsfiddle.net/ZUvHN/7/
What I did was I removed display:table-cell from the a and then set it to display: block
I then set the img to display: none
This lets you then apply the border and background styles to the a tag instead of the img tag. You'll likely have to tweak the margins and spacing a bit.
I don't know if you have the option or not, but it might be easier to tweak the HTML a bit via JavaScript.
I want to be able to have a background color behind my h2 tag, but I also want the text to indent. I have tried using css, but it won't work unless it is inline in the table.
When I do that, then I can't get the text to indent.
What is the correct way to write the inline h2 css?
Above is what I was thinking, but I'm not sure the best way to do it.
Outlook does not support stylesheets, so all styles must be made inline.
<h2 style="padding:5px;background-color:#33CC99">test</h2>
I find that images floated right won't sit alongside a heading tag such as H3. The H3 tag wants to have its own line so it will always appear below the image.
If I put the image also inside the H3 tag then it works but I would prefer to correct this in the CSS somehow as some of our editors aren't used to delving into the html.
Is this a standard way that H tags behave? Or is it a quirk of my CSS that I can tweak?
I'm doing this in Wordpress using a child theme based on the Thematic theme.
This is a normal behaviour as H tags are block level elements. See this explanation for more information.
Also note that you can make a block level element not to expand all the width (as it's normal for a block element), for example if you make it float (and decrease its width), changing its display propery, etc. See this fantastic tutorial for more information.
try putting the h3 tag after the image tag.... they should appear side by side.....
like this:
<img src="path/to/some/image" style="float:right;" />
<h3>some heading</h3>
All you should need to do is add float:left; to your h3 tag.
See this fiddle.
I'm trying to do something pretty simple: an <a> tag with a background image. The code is found here, http://jsfiddle.net/QWatA/
The problem is that for some reason I can't set the width of the <a> tag in this code. If I had just a normal background and set it with a width it works fine. However seems like if I do it this way I have no control over the width. Ideally I want all the links to have highlights of the same width.
The reason I'm doing this is that I want a different background image for each of the links, so I'm forced to define all those a.class1, a.class2 stuff.
Thanks!!
Add display:inline-block; to your 'a' elements. By default 'a' is display:inline and so does not establish box with width/height.
http://jsfiddle.net/QWatA/1/
yea c-smile beat me to it just put display: block in your css, however if your going to do a.class1, a.class2 and so on with new pictures put it in your ul li a instead of in the a.class1 a.class2 and so on then you only have to write the code once.
I want to use iconography in a web UI, while retaining the context language of what clicking on the link will achieve, but possibly not displaying the text and crowding UI space. For example using CRUD screens, I want to display a plus icon for adding an item, a minus icon for deleting, it, a pencil icon for editing it, and a magnifying glass to search for a different item. There are a couple of ways to achieve this.
Render an img element inside of the anchor. The img alt attribute will describe what the icon represents (alt="pencil icon"), and the title attribute will describe the intended consequence (i.e. "Click here to edit this widget").
Render an anchor tag only, and use css to display the image as a background. In this case, the anchor's content should describe the intended consequence, however it needs to be wrapped in a span element so that its display style can be set to none. The anchor should also contain a title attribute matching the content (without a surrounding span of course).
It seems to me like option #2 is easier to implement in an asp.net mvc app. Since the icon is a design concern and not a markup concern, it makes sense to define the image in CSS. It also makes things easier from a code maintenance perspective... changing the img src location would only necessitate changes in the CSS file and no view files. Removing the CSS would cause the application to fall back to full text accessibility too.
What smells funny to me is the part about nesting the link content into a span so that it can have disply: none; set in the css. Another thing is, if I use the :hover selector to swap the image and provide a rollover / rollout effect, the images seem to take longer to swap out than when done with javascript.
Am I missing anything here?
We frequently use option #2, but in a different fashion. Instead of wrapping the anchor content in a span, use CSS to style the anchor as display: block or inline-block, then set its text-indent to -1000em (or similar, just pick a big value). I think you also have to set overflow to hidden.
If you do the background image as a sprite (a single image with both the non-hover and hover states in it) and use :hover to reposition the background, you should avoid the flicker/delay that you might be seeing now. That also results in one less separate request hitting your web server.
Note that this also requires explicitly setting the width and height of the anchor in your CSS to match your icon size.
If the icon conveys information that does not duplicate information already in the document, then it should be a real <img>.
However, the alt attribute should contain an alternative to the image, not a description of it.
alt="Edit this widget"
The title attribute should only be used to provide advisory information (think "optional extras") and you should avoid using implementation specific terminology (such as "Click here").
What smells funny to me is the part about nesting the link content into a span so that it can have disply: none; set in the css
If you do go down the route of putting content in background images and hiding real text, at least negative text-indent it out of sight instead of display: noneing it and making it invisible to screen readers.