I am making a website with some images inside. I have Imagus (similar to HoverZoom) installed so that photos are automatically enlarged on hover. However, I do not want that to happen to my images.
It seems to work for some and not for others and I can't see why? Both pngs, etc.
Is there some kind of CSS or HTML I can put it that will stop the zoom?
EDIT: I've also noticed that the images that HoverZoom/Imagus enlarge, are also the images where the CSS :hover doesn't work?
If you do not want any kind of actions happening when hovering over the images, you can add this, though I am not sure if it's exactly you want :
img {
pointer-effects: none
}
I think I found a way to stop it.
If you just resize and save the image so that it is exactly the same size as you'll show it on the website, then HoverZoom doesn't do anything.
Related
I want to preload all images on my page.
My page has some images used directly as links, i.e. as img tags within an a tag, as well as some images which are in the background-image property of some spans.
What's the best way to preload them all? I notice that a lot of the preload scripts seem to assume that the images will be loaded within image tags. For example, I've implemented this script: http://www.javascriptkit.com/javatutors/preloadimagesplus.shtml
But it doesn't make a difference on my page where certain spans when hovered over should have a new background. There's still a pause on my page when the user hovers over an element, before the right images background shows up.
Edit
I know about using sprites, my question is asking for a solution apart from sprites.
The following jQuery plugin was featured on http://www.unheap.com a while ago. Could this be of service?
http://nick-jonas.github.io/imageloader/
I do notice that the Github repository is "unavailable due to DMCA takedown", but maybe it could point you in the right direction.
Another solution might be this plugin:
https://github.com/sebarmeli/JAIL
I have a bit of a dilemma in the sense that I can't seem to get a jquery image cycler working with scaling images.
What I basically have is a website with a small navigation list at the top, and then full screen images which can be cycled using a control at the bottom of the page. Previously I've used backstretch to get the desired effect for a background image that stretches with the browser window.
I was also hoping on using Jquery Cycle as the plugin to do the image slider (as I've used this countless times before).
The problem is that I need the effect of backstretch (ie. scaling images) but with a slider. I have tried using other plugins for the stretching but most of them only seem to allow the images to be scaled down (if the window shrinks) rather than upwards. I can't use backstretch because it takes up the entire body tag. I only need a container div to contain the stretched images (so I can have the header/navigation sitting at the top without cropping the images).
However I have no idea how to then get this to work with Jquery Cycle.
Has anyone done this before or have any examples of this working?
Thanks
May be late but take a look at http://jongaulin.com/2011/11/17/fullscreen-image-and-content-slider/. I hope this works for you.
I have 3 different images and want to create a sprite using CSS. I understand that will reduce HTTP requests. However, I am totally new to this concept and have no idea as to how to approach this.
What would be best bet for me? Also I have seen there are some CSS sprite generators where you submit a .zip of images and it combines them.
I tried doing that, but did not understood what was happening. Any guidance regarding creating and using CSS sprites would be highly appreciated.
Update: I have gone through the A List Part article but it was not very clear to me. Can someone provide an example of using a CSS sprite? [A short, self-contained example in an answer is preferable for SO than just a link to an example elsewhere. –ed.]
The example you need to study is the following:
#nav li a {background-image:url('sprite.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
Sprite.gif is a big image containing all the smaller images in a grid (doesn't have to be). You then use positioning to display just that part of the sprite that contains your image.
There are online tools that given a set of images returns a big sprite image with the coordinates of where to find the smaller images.
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
(source: css-tricks.com)
All it means when you do spriting is that your small images are tiled on a single image file. You can create this single image file yourself if you have a decent image editing program. Then you can use the css background-position property to specify the piece of the image to use for that sprite.
Look here at Google's sprite that they use for iGoogle. You are just combining the images into one large image. That way you make one request. You then use background positioning and height and width to select which part of the image you want.
This also works really well for images that change on hover, as the hover state is already downloaded and does not have any delay.
Let's say you have button which changes its background image when it's moused-over. Mouseovers need to happen instantly to give good feedback to the user. If you just simply switched the image on the button, a browser might have to go to the server to fetch the image, which would spoil the effect. By using a CSS sprite, you have each image loaded and ready to go on the button instantly.
Also, some browsers "flicker" when you switch images. CSS sprites avoid this flicker issue which can sometimes happen.
I built some cross fade rollovers in IE7 using this single image technique:
http://jqueryfordesigners.com/image-cross-fade-transition/
It works by placing the rollover image in the background and fading the original image state when the user rollovers the image. IE7 hates it. The rollover state shows up directly below the original image.
You can check it out here:
http://hardtopdepot.com/dev/inner.html
It should be pretty obvious in IE7 but the add to cart buttons are suppossed to be Jquery rollovers. I am by no means a JS expert so Im not sure how to go about solving this problem, any suggestions would be very helpful. Thanks-
I guess it's a bug in the plugin. They check for browser names in the plugin, which is always a bad sign (not future-proof).
Anyways, it seems like the buttons you want are just text-buttons with fading background-color. Why can't you just tweak the link to look like a button, and use the jQuery Color Animations plugin?. This solution is better for in page search and screen readers.
I've created a simple demo for you here:
http://jsbin.com/egiha4/2
Source: http://jsbin.com/egiha4/2/edit
Needs some styling and a click handler or a href attribute.
You could just use simple CSS (example here: http://sophie-g.net/jobs/css/e_buttons.htm) to do the same thing.
Or
Use Scriptaculous (http://script.aculo.us/) if you want to have fancier timed fading.
This way you wouldnt have to spend time working on browser compatibility issues.
I have an image on a webpage and when the user hovers over it, another image appears. When then hovering over the appearing image, it flickers.
Anybody any idea why that is?
Tony
UPDATE: The first image does not dissapear when hovering, just another (smaller) image appears over the top in the left top corner. When now moving over that smaller image, then the flicker appears.
The image on the site is part of a gallery, so it's a php variable and gets loaded when a user selects from a list of images. So embedding one into the other is very hard.
Because the browser is fetching the new image. The best solution is to incorporate both images into one, and either purely use CSS to change the background-position on :hover, or ( for IE6 and non-anchor elements ) change the background position with JS.
In IE? IE is notorious for not caching images that are loaded dynamically (either with CSS :hover or due to Javascript events). You can use CSS sprites (basically, using one image file to display both images, and using positioning to show one or the other; tutorial, linked by Mike Robinson), or you can use image preloading:
var preloadImg = document.createElement('img');
preloadImg.src = 'path/to/image';
Edit: and other browsers will do the same on first load. IE just may continue to do it on every switch.
If I understand you right, you probably replace the src of your image every time the mouseover event is fired. So, even when your image is replaced, your event is fired and the image is replaced with itself, which may cause flickering.
I guess you're probably using IE. This is a bug with the way it implements caching in some versions. You fix it by either configuring your web server to send proper cache headers, or by using CSS sprites. I recommend the latter, as that means less HTTP requests, and the preloading works even without JS.