Restrict area of hover for css rollover - javascript

I have an image with 5 logo's and I'd like each logo to change individually from greyscale to color on hover. The obvious solution is to chop the image into the separate logo's with each having both a greyscale and color version and then do a standard css rollover.
However, I can't increase the page load with 5 additional image hits. Is it possible to do this using jquery and one large sprite with all 5 logo's in both greyscale and color and somehow detect which area of the image is being hovered over so the associated color version can then be shown?

You don't want to fiddle with cursor location if you can avoid it. Actually, what you probably want to do is create a CSS sprite - it's one image file that contains all 10 logos (5 color, 5 greyscale). That way, the browser only has to load one image. Then, using CSS, you display pieaces of that image as the background image for your various elements, and vary which piece is displayed using the :hover pseudoclass.
This page will get you started:
http://www.w3schools.com/css/css_image_sprites.asp
And I like to use this page to create sprites and the CSS that goes with it.
http://spritegen.website-performance.org/
Note that this is a somewhat difficult technique to get working the first time, but it saves lots of time and bandwidth in the long run.

Related

How to enable clicking on layered svg images

My app uses up to 6 svg images layered to create an interactive image. I have found that I cannot mouseclick on any images below the first.
** Edit. Excess code and text removed.
You can make an element insensitive for mouse events by setting the pointer-events attribute to none (see Tinkerbin):
svg > *{opacity:.5}
In essence I cannot do what I want this way. Stacking embedded images results in only the top layer being clickable by the mouse.
An image map works, with some mucking about.
I created a clear image calling it clearOverlay and gave is a usemap value tying it to my image map.
My imagemap I created using a free online app http://www.image-maps.com which took my image allowed me to create my clickable zones and generated the html for me. After cleaning it up and swapping the href values for onclick functions I added the map to my code.
Next problem was getting it to overlay my existing images. I eventually used style="position:relative; top:-300px" forcing it to sit squarely on my image. I'm sure there must be a better way, but at this point that worked for me.
For anyone else doing this don't forget to either place the clearOverlay last in your image list or set the css z-index to higher than everything else to make sure it is sitting on top.
So I now have a stacked svg image, where I can manipulate each svg according to where the user clicks. Its only taken me 5 days! I'm kinda over this coding by yourself lark.
** My image map above will not scale to different sized screens. The next time I try this, I will experiment using a transparent svg with fill zones where I wish to click.

How to load multiple images quickly (without Css Sprites)

I am creating an avatar creator for iPad. Users can select different hair styles, hair colours, skin colours etc.
The page has two components: A selection area (where the selected options are shown as small thumbnails) and a preview area (where the selected options are shown larger).
Each option is saved as a SVG file. Using SVG has a number of advantages:
It remains sharp on Retina displays
The file size of each asset is tiny (as the images are vector based)
The files can be samll and still allow for transparency
The same images can be used for the preview/selection area (The browser just scales them via CSS).
Jquery is used to change the class ids on the oage which in turn effects the CSS code that is called (the CSS holds the SVG images as background images).
There is a large number of options, so to avoid overwhelming the user only relevant options are shown in the selection area. For example, if you tap red hair, then only the red hair styles are shown (all the other hair styles are hidden until the user selects the relevant colour).
Everything works fine, the only draw back is that when the user taps on an option there is a delay while the browser goes to fetch the images from the server.
How can I speed up the loading process, so there is no delay?
Here are some options I have considered:
CSS Sprites
Normally CSS sprite would fix this. However, because of the range of options, it isn't practical to create a CSS sprite by hand and none of the automated options support SVG sprite creation. If I switched to PNG, the file sizes would become very large.
Invisible Loading
I have created a hidden DIV that has all my images stored as background images (Using the CSS3 multiple background image property). This ensures all the images are loaded so they are available for instant display when the users taps on them. The only drawback is that this causes the page to take a long time initially load.
Are there any better options?
(Unfortunately, I can't provide a link to my work).
The way I did this in the end was to create a DIV that had all my images attached as a CSS3 multiple background. I then set the DIV to display:none. This loads all the images on page load.

Shrink dimensions of gif as part of animation

Trying to find out if it's possible to 'shrink' an animated gif. Not in file size but in regard to the dimensions of the image.
If not, is there any way to catch the animation with jquery/javascript so I can shrink the size my moving the image out of view with css?
Or alternately after there any libraries out there for simple image manipulation type stuff for HTML5 Canvas?
EDIT:
The first mock up of the image is at http://swmohappening.info/. It's essentially a website that I'm doing to help out a local youth group retreat.
I'm wanting to shrink the portion of the letters that run-on so it's a more manageable banner to leave on the page. I do need to maintain the dimensions of the center/main section of the image.
Take a look at the animate function in jQuery - you can change the size of an image and specify the time that takes too.
As what I've read makes it seem as though the jquery animate will simply change the dimensions of an image (which isn't what is needed at the moment). I think I'll most likely end up using animate to move the image out of view to 'shrink' it that way...

Image color overlay in HTML5 / JS

I have some png vectors with transparent backgrounds that I want to color overlay on the fly, so users can choose a vector and then choose which color they want it from a picker.
Only stipulation is that they cant be masked with background colors, because multiple pngs will be loaded onto the same canvas and will need to overlap.
How exactly do I go about loading an image into a canvas and then overlaying it with a certain color?
Edit: I have found some info here and here ( - answer by Nathan ) which sort of work, but not in all browsers.
The second one especially as I need only the png itself to be overlayed, and the transparencey to stay transparent
Practically you want to load the image into canvas and overlay it with a certain color, that will give a color effect to the overall image.
This jQuery plugin does exactly that, it loads the image into canvas, manipulates the color giving the nice tinting effect and convert it back to image element. Converting this back into image element is a very important part, as some user may style their CSS base on img element, instead of ID or class.
Just play with the interactive demo:
and go through the docs:
Have fun.

Creating mosaic/tiled image effect with jquery

Is there a way to create the effect shown here on msi.com main image? Though done in flash, I'd prefer doing it with jquery. I've also tried with 'mosaic generators', but haven't been able to replicate the effect well, but use of a generator with js would be acceptable too.
[edit] I failed to mention, I'm only interested in emulated the tiled/mosaic aspect of the effect, not animation. I'd like a large image (e.g. 400px by 300px) separated by whitespace (or color customizable borders) into 9 equally sized blocks or tiles each.
While I would like to apply a individual hover effect to each image, giving each the effect they are separate entities, I don't necessarily need any further animation.
Rounded corners aren't important or wanted.
[/edit]
It would be pretty interesting to do it with jquery. You'd have a table of images, each with a hover event that toggled an animation when mousing on and off. The logic isn't too hard; getting the images and the animation to look nice would be a little harder, but not undoable. It depends on how closely you want to replicate the effect. :D
edit: you just want a mosaic of images? you can just use a table to position all of the images, and use js for the events. What else do you want or need js for? :D
Here's an idea. Load a large image into a DIV. Decide on the size of your windows and create a PNG with transparency where you'd like the windows to be. (Opaque at the borders with thickness to control how wide you'd like the whitespace.) To create the effect, use three layers. The image at the bottom layer (which you can swap out as needed). The middle and top layer will be repeated along the x and y axises and controlled individually by jQuery. The middle layer will have the PNG with transparency and on top of that, the top layer with just a solid color (matching your page's background to "seem" invisible?). To create any "pretty" effects, you can adjust the opacity or animate the top layer of the separate boxes to show/hide the image on the bottom layer which will be visible through the middle layer's transparent area in the PNG.
Hope my explanation was clear. With some smart coding, this can be packaged and reused anywhere you'd like.

Categories