The website I'm working on has a list ul with above a 100 (li) bullet points. Each of them links to another html-site.
I would like to show an image preview, whenever you hover over one of the links. The image should slowly slide in from the left.
As each preview image is up to 40kb in size, I actually don't want to preload the images.
What would be the best way to prevent it?
I would like to do this only via CSS, without JS, if possible.
My ideas:
a) default-state: <img>-tag with display:none; hover-state: set it to display:inline . Problem: transition does not work with display :(.
b) simply use a div instead and write a CSS-rule for every li, so that on hover the corresponding background-image with the preview-image is assigned to it.
Does this prevent the preloading of the image?
If you add it as a background image, but only show it on hover the image won't load until the user hovers over whatever has the style. You should be able to set the background image inline instead of outputting the image file as an IMG
You can't do this with just CSS because your browser will load all contents (regardless of display:none). I would recomend javascript or server side like php.
Maby jquery load could be something?
http://api.jquery.com/load/
Related
Lets start with I'm using square space CSS code injector. I am trying to have some images placed behind the text links that read (menu, what we sellin', wholesale) With my background image it is hard to see the links. I would like to add small wooden boards as the image behind them. Appreciate any help .
My website: www.slurpnsnack.com My website
edit: I do not want to add a background image to the header itself. I am wondering if there is a way to attach the picture itself to behind the link, or just how to go about placing my own links there.
Your links are held in a div with class .header-nav-item
So CSS along these lines:
.header-nav-item {
color: white;
background-image: url(wood.jpg);
}
should be enough, though you may want to play around with background positioning and sizing depending on how consistent you want the look to be on the various sized items and what your image is actually like.
When I am finished with the page. When its done. I want somehow to lock the images (for ex. header logo layer - try it out: http://www.lipanska.cz/ move with the header text EWITA). On the other side at https://www.google.com the logo is locked and I cant move with it.
How could i lock them?
Thank you very much for your time!
It's because Google uses a div with a background-image and the other page is using an img tag. The latter makes it dragable with the mouse cursor.
You can also prevent dragging with any tag as discussed here:
Disable dragging an image from an HTML page
Use Background Images.
demo:
div{
background:url(http://lorempixel.com/100/100);
height:100px;
width:100px;
}
<div></div>
<img src="http://lorempixel.com/100/100"></img>
You cannot move first image, however you can move the second one.
I'm working with the Shape5.com Corporate Response Joomla template and been asked to make a change to the color of the four icons for social media in the upper right-hand corner. The demo of this template can be found here:
http://www.shape5.com/demo/corporate_response/
Their CSS for each icon looks like this from the template.css file. I'm just including the first icon to keep this brief, which is for RSS:
#s5_rss {
height:23px;
width:22px;
background:url(../images/rss.png) no-repeat top left;
cursor:pointer;
margin-left:8px;
float:right;
}
#s5_rss:hover {
background:url(../images/rss.png) no-repeat bottom left;
}
The rss.png is here:
http://www.shape5.com/demo/corporate_response/templates/corporate_response/images/rss.png
I've been asked to use CSS to change the active/hover color from what it is now to red. I'm not sure if this can be done with CSS or not. Can it? Or does this require a new .png file created with the image by the designer to be the desired red color?
I'd also like to understand why this rss.png file has two images of the icon inside of it at different shades and how does the CSS toggle between them to know which to use for hover? Is this a special .png file that allows this, perhaps in a different format than most .png files? Thanks!
The image is known as a sprite image: a single image file consisting of multiple sprites which you apply as a single background image, and position according to the constraints set by the width and height properties on an element. It's just a regular PNG image and is not intrinsically different from other PNG images.
As for actually changing the color of the image to red, that is not something you can do with CSS alone depending on what you mean by "changing the color" — the safest bet is to modify the image to add a new sprite with the desired color. Since it's just a regular PNG image it's a simple matter of extending the canvas another 23 pixels down, rendering the new sprite in the extra space that's created, and modifying your CSS so it looks like this:
#s5_rss:hover {
background:url(../images/rss.png) no-repeat center left;
}
#s5_rss:active {
background:url(../images/rss.png) no-repeat bottom left;
}
You can also replace the background:url(../images/rss.png) no-repeat portion with background-position: in your :hover and :active rules as you're really only modifying the background position when using a sprite in CSS:
#s5_rss:hover {
background-position:center left;
}
#s5_rss:active {
background-position:bottom left;
}
Experimental CSS filters are up around the horizon, but without good cross-browser support, you're basically out of luck on that front. If you can handle reduced browser support, go take a look at this overview of CSS filters.
Your current code shows only half the rss.png which conveniently is the exact height of just one of the sub-images within it. When you declare the background: you're telling it to stick the image from the top and hide the bottom half.
On hover, you're instructing it to draw just the bottom half of the image (the hovered state part). To make it a different color, you pretty much need to edit the file (short of having the background image partially transparent and showing a red background through it).
Overall, there's nothing magical going on, just well-documented magic that we all share and use every day.
Currently there is no way to change the colours within an image using css and likely there will either never be or a long way off. There is the potential to do a color overlay but this would not help unless the image you were dealing with was a block colour.
In order to change the color you will need a separate image to reference on the hover styling rule for that element.
The alternative way to do this is to use a sprite, where all the images are loaded as one image and css just focuses on a portion of it depending on the state ie hover, active etc. This is what you mentioned earlier. Have a look at the following links for information on using a sprite, but put simply if you have a 40*40px social icon. You would create a 40*80 image and then in css say use the top half for normal and the bottom for hover. This actually saves time when loading your page and you should always try and use sprites where ever possible, remember the faster the page the better for the user.
http://css-tricks.com/css-sprites/ (good guide on sprites)
http://spriteme.org/ (very handy and will do the work for you - recommended)
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.
i am very new to CSS. i need to increase the width of the white space of this:
http://yoursdproperty.com/index.php?option=com_jumi&fileid=8&Itemid=34
the css file is here:
http://yoursdproperty.com/templates/pjo_joomlaforall/css/template_css.css
how do know which element to change?
The page you link to is using the following as a background image:
http://yoursdproperty.com/templates/pjo_joomlaforall/images/bgr.png
To increase the width of the white space, you'll need to modify that image.
#background_right is the element that contains the background image.
Also, per Umar's answer, install Firebug.
use firebug. it is a firefox add-on. just download and enable it and click an element to inspect it. you will instantly know everything related to it.
Edit
On you page, you just need to replace the image ../images/bgr.png with a wider white space in it.