Develop Reference

Responsive way to perfectly line up a smaller image with a specific point on a "background-size:cover" large image

This is a question that comes up quite frequently when I'm building sites. I've never come up with a solution but I thought maybe some smart SO contributer might be able to work it out so here goes:
Say I have a large full page background image with background-size:cover. I want a specific part of the image to have a hover state e.g. Say it's a large picture of a car driving on a mountain. If you hover over the car I want it to be replaced with a glowing car.
One way I could do this is to use javascript to replace the whole background image for the same image of the mountain scene but with a glowing car. But obviously this requires an additional large image download. (As in this example).
What would be better would be for me to have another div that covers the car and just assign a new background to the inner div which is perfectly lined up to the parent image.
This is straightforward to do in an unresponsive way (see this example) but I can't think of a way to do it with a responsive background-size:cover image.
It feels like there might be a solution, possibly using object-fit or something. But nothing springs to mind. Here's a responsive version of the pen (which doesn't work but demonstrates my desired set up).
Can anyone think of a way of acheiving this? What other techniques could work here?
Thanks

Splitting an image to be used as a website background

I'm currently doing a project which is an interative website for a "company". My idea was to use an image of the company room, where they work and use it as the background for the website. The problem is that i wanna do it like a point and click game, where i move my mouse and as soon as I step into something it will pop up information about that something. For example, a written board at the bottom right side of the picture talks about a meeting they are doing, so as soon as my mouse goes over that board it would pop up something talking about that meeting. My difficulty is that i don't know how to "split" the image into those small things (the board, the 3 desks, the posters on the wall...).
The idea is to use an html base and use JavaScript auxiliated by jQuery.
Any help would be appreciated :)
PS: can't post the image because I still don't have 10 reputation.

This link has pretty much example what you want. You can use css :hover on the areas to detect when the mouse moves over them.
Hope that helps!

Is it possible to create line between elements in CSS3?

I'm using jQuery Draggable in the application I create and I'm wondering if it would be possible to somehow create a line between dialog box and element on website? I want it to follow draggable box as you drag it.
I'm looking for CSS/HTML way and not jQuery/JS way. If there is no way to create it using pure CSS3/HTML5 then I'll start with JS approach - just wanted to know :)

Basically: no, there isn't a way to achieve this using CSS only.
But, if this is observed as a CSS riddle (I recommend you don't use the following solution in any real-world application whatsoever), you might be able to achieve something similar. Again, this is going to be completely abusive of both HTML and CSS.
You basically create a lot of divs, each stands for a 'pixel'. You change the divs' background-color on :hover, and maintain the background-color after :hover state is gone using a (yet another abusive) transition trick (pseudo-infinite delay).
Here's a demo: little link. Try hovering on the top parts to see the 'breadcrumbs' that get drawn as you move your mouse.
I, again, exaggerate this is completely abusive and shouldn't be used in any actual application.
This can be expanded to create a tiny painting program using CSS. I've made a little dabblet to illustrate: another little link (try drawing by clicking and moving your mouse!)
The bottom line: Use JavaScript -- it's the only resort in this case (you can't control a canvas without JavaScript).

looking for suggestions on how i can highlight areas on an image

i am building a workout website that tracks exercises. Each exercise has a mapping to a certain part of the body (bench press --> Chest)
I am trying to figure out a way to visualize this and i thought of the idea of putting an image of a person "highlighting" the affected muscles. Sort of like This:
(source: aquaviews.net)
Assuming i have found a good picture without any areas highlighted, is there anyway to dynamically "highlight" areas in a picture (the red section) with javascript (client side) or C# (server side) or do i need a seperate picture for every exercise?

You COULD overlay the the base image with SVG or a <canvas> element.
But then you have cross-browser issues, possible alignment problems, and probably a cheesy look.
I'd have an artistically inclined person do the highlights as a separate graphic for each exercise.
But rather than have these as separate images, keep/combine them in a single file -- as a CSS Sprite. Then you get a professional appearance, great cross-browser support and easy, minimal coding.

You can use css to position your links over said muscle group and use a rollover to show the highlighed part...
Edit:
Sorry I guess I should have elaborated. You can absolutely position the elements with CSS and use an image rollover to swap out that section of the image to the highlighted section of that image. You can either do this by putting each muscle group into it's own div and putting an image of the corresponding muscle group into the background image. Then swap it out on rollow over. or you can use z-index and absolutely position the rollover elements where they need to be and change the z-index when needed.

Interestingly enough, I used to be a personal trainer and I did this same thing but did it in flash. That's my recommendation.
However, if you want to do it with JS and CSS, Brock's suggestion of the sprites is likely the way to go.
What you could do, very simply, would be to have an image map that for certain areas called a js function to swap about the background image with the same version of that image with the highlighted sections. Rather than several small images, you have the same image but with one part highlighted.
One question though, will you be doing compound exercises that would require you to have two sections highlighted? For instance, an incline press would highlight part of the chest and part of the delts. This makes the whole proposition more complicated due to the specificity of your roll overs.

i think you seeking a way to do this without requiring separate images, and if so - the answer is No - you are going to need to create separate images for at least the highlighted areas. Short of perhaps using a CANVAS element which has cross-browser issues, I don't believe there is any way to impose a filter to an arbitrary region of an image element.
And even if you Could apply an alpha filter, you would still need the geometry of every shape, so the effort/work is perhaps the same...
Once you have the various images there are sundry ways to approach the problem after that...

This is a simple implementation as i have done this highlighting with a county map. Use an image map. Then find a highlighting script like (mapper.netzgesta.de) mapper.js. All you need to do is have a properly set up image map (image must be suuounded by a div) and a link to this script. The highlighting starts immediately. Please check the license. Ther are several other that scripts that use javascript css and jquery to achieve this same effect. Just research highlight image map in google. Sorry i cant give you a link to my implementation of this as it is on a secure site for work. Good Luck.

Web page image effects - JavaScript? How else?

I have an idea I'm trying to implement.
I want to display half a dozen pictures on a screen, in say a circle shape, and as I hover over one with the mouse it fades from grey and white into full colour, maybe even getting a little larger, or generating a drop-shadow effect which stays while the mouse is over it.
Although I'm not too shabby on VB6 and SQL Server, my web development experience extends about at far as using notepad to generate raw HTML to display some favourite folders, links to websites and documents etc, in Active Desktop.
So guys, what programming resource websites should I be looking at, such as w3schools.com and specifically whether I should be using JavaScript or some other method ... also specific method calls to look at would be good.
I'm not after "here ... try this code" and then 10 screens of code to cut and paste, I'm after tips, such as "for the positioning, look at www.thiswebpage.com and look at XYZ" and "for the fade effect, look at ABC method on JavaScript" or whatever.
EDIT: 14/07/2009 - Just thought that this might be pertinent. I'll be hosting the pages on a Google Apps hosted website.
Also, the black and white fade effect wasn't the only effect I was considering, it was just one possibility. Other nice, subtle effects might be considered.

What you want to implement shouldn't be all that difficult. However if you do not know any JS then W3C schools is a good place to start.
You should also check out Mootools. It is a great framework for all your JS needs. They also have some great demos you can try.

For general effects and starting point for this type of user experience: JQuery
From there - research jQuery plugins that do this type of thing. Good search terms may be carousel.

Raphaël is a very nice Javascript library that can do everything you want. For instance, they have demos with drop shadows on images and with image rotation.

For that type of work I like to use Scriptaculous. It has a number of animation commands that are easy to use. You can run a bunch of effects in parallel on a DIV, so you can easily perform a MOVE and a SCALE effect on the same object and it handles the synchronization.
You can do all of this with regular old JavaScript.
Here is an example of a MOVE:
new Effect.Move('yourDIV', { x: 0, y: 0, mode: 'absolute' });

You could probably get a quite similar effect done by using some JS library which can animate CSS properties nicely. For example Scriptaculous and jQuery can probably fit the task and should be simple to learn.
The basic idea would be that you have an image in a div. The image's transparency can be set to 0.5, so the div's background color shades through it. This way you can get an effect similar to a black and white image with the correct choice of a background.
If you want an exact black and white effect or such, you will have to generate black and white versions of your images, or use the HTML5 canvas element to manually apply color transforms to the images. That won't work in older browsers and internet explorer, though.

Learn JS, you can learn the syntax from http://www.w3schools.com/JS/default.asp
Expand this knowledge with articles from known writers, like Crockford.
Salt it all with learning one of the leading frameworks (I like Mootools).
While doing steps 1-3 code, code, and do more coding.

You will need some form of Javascript, and if I were doing that I would look at the Script.aculo.us library. (An immediate effect could be done with CSS, but for a gradual fade, you will need Javascript.)