Anna: If I understand your question, it doesn't make any difference -- you can use one, or two, images.
Here is a simple example of image-replacement using one image: http://webbytedd.com/bb/replace-image1/ Here is a simple example of image-replacement using two images: http://webbytedd.com/bb/replace-image3/ In both of these examples, the "trick" is to use css to move (or replace) the image with another on hover. The effects of this technique can be rather stunning, as shown here: http://sperling.com/examples/image-replacement/ Back to my original example, namely: http://webbytedd.com/bbb/map/ Granted, the above was an elaborate example of image-replacement. But only elaborate with respect to image placement. It took a lot of work to create the images for both "at-rest" and "on hover" images AND in some cases to create more than one underlying area below a State image to trigger the roll-over effect. Please review the css here: http://webbytedd.com/bbb/map/a.css In your case (I think) it should be simple enough to create the images you want ("at-rest" and "roll-over") and then define the underlying regions where you want the "on hover" events to trigger the roll-over. The important thing to realize is that the region underlying the image does not have to be confined to just one rectangle -- it can be several rectangles thus giving the appearance that the irregular image seen above is represented by the underlying rectangles that trigger the hover state. Understand? As for the href of each image, that is trivial. I hope this helps. Cheers, tedd _____________________ tedd.sperl...@gmail.com http://sperling.com On May 14, 2013, at 11:02 PM, Anna Gav <agav...@gmail.com> wrote: > Hi Tedd > > Re: individual on hover images eg. > http://webbytedd.com/bbb/map/states/ak-usa.gif > > Because in my case both the link/text background colour and the image on the > left need to change on hover, should my individual hover images be made up of > both of these on hover changes in the one image? Or should I keep them > separate? > > Regards > > Anna > > On Mon, May 13, 2013 at 11:35 PM, Tedd Sperling <tedd.sperl...@gmail.com> > wrote: > On Wed, May 8, 2013 at 5:44 AM, Anna Gav <agav...@gmail.com> wrote: > >> > >> Re: http://imageshack.us/scaled/landing/703/sdfdsf.png > >> > >> I need to reproduce the functionality demonstrated in this image. The > >> requirements are: > >> > >> When the menu items are hovered over > >> -the image on the left needs to change. > >> -the colour behind the menu item has to change (eg. green for the last > >> menu item, as demonstrated in the image) > >> > >> Ideally, I'd like to do this using CSS, but to be honest it looks way > >> too complicated with all the sharp angles. > >> > >> How would you do this? > >> > >> Anna > > On May 13, 2013, at 7:39 AM, Pi Dizayn <pidiz...@gmail.com> wrote: > > > It can only done with Javascript. > > Really? > > Then how do you explain this: > > http://webbytedd.com/bbb/map/ > > It is 100% css. > > Cheers, > > tedd > > > _____________________ > tedd.sperl...@gmail.com > http://sperling.com > > > > > ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
