Rollover Image Map

[ff45t1z]

Hey there, I know i'm new here, but I have a problem with something i'm working on and I was wondering if anyone could give me any pointers. I plan to contribute here whenever I can, i'm a web design student, though a bit more trained in Graphic design than coding.What i've been working on is a rollover image map, a square divided into 12 cells and a bar at the bottom. The idea is that when each cell is hovered over it changes to an 'over' image, simple. http://n.domaindlx.com/Restrukture/rsk-krew/myspace/hoverbox.html ://http://n.domaindlx.com/Restrukture/.../hoverbox.html ://http://n.domaindlx.com/Restrukture/.../hoverbox.html ://http://n.domaindlx.com/Restrukture/.../hoverbox.html ://http://n.domaindlx.com/Restrukture/.../hoverbox.html ://http://n.domaindlx.com/Restrukture/.../hoverbox.html ://http://n.domaindlx.com/Restrukture/.../hoverbox.html Here is the online demo of the layout. ( old java version )I made the original using javascript for my band's myspace layout, without remembering that myspace disallows Javascript. Not too much of a problem, so I recoded the rollovers to use CSS. Compiling the rollovers to 2 images per picture too, and using 'background position' to shift them up a bit. This is all easy,but now, my problem.The idea behind the image map was that certain cells would trigger other cells too ( including the bar ) with alternate images. ( You can see this effect by hovering over all the cells. ) Is there a way to do this in CSS?I can't really figure it out?Here's the code i'm using stripped down for display to just one cell's code, simple stuff.

.rollover1 a { display:block; width:110px; background-image:url(1n.png)}.rollover1 a:hover {background-position: 0 -309px}<td class="rollover1" id="c1"><a href="#"><img src="trans.gif" width="110" height="103" border="0"></a></td>

i've tried using the ID selector, but I can't really figure out how I can do this, or if it's possible.Pretty much i'm wondering if I can do this rollover effect by rolling over one item to change the property of another.Any help would be very much appreciated!

[jlhaslip]

A couple of quick references would be geohtml (google it) as an imagemap tool, and look at bonrouge.com for his image handling techniques for absolute positioning of images on:hover. (might need some javascript for IE6) Then go to CSSplay.co.uk for some terrific techniques used in the on:hover event. The stuff at cssplay will blow you away when you realize it is all CSS, no javascript.Also, this link might help you do some of it, too : tooltips It will be something like the stuff at bonrouge. Using postioning to change display of stuff.Have fun.

[ff45t1z]

Sorry, but that doesn't really help much.My problem is: I want to make some code, so that when I rollover one square, it changes the image of other squares. That's the simplest it can be put. The squares are set up as a table, and the images set up as a background image. I have all the individual rollovers working fine, but I just need to set it up so that when I rollover certain cells, multiple rollovers can be triggered in different cells.If someone could help me out with this, I would be very grateful. Or at least tell me it can't be done.I have looked everywhere, and at all your examples, and they come close, but not to the actual point. They all refer to CSS rollovers but not to an actual external one, only for one element rolling over itself on hover. Also, it can't rely on javascript. It has to be CSS.

[Xenon Design]

Well lets like a little different here. Why dont we make it so when you hover on a cell it instead of changing the backgrounds of others it extends and overlaps the others?This is all theory and may not work...but give it a shot anyway.I scribbled this on my Wacom Tablet:Right the different coloured boxes are the affected areas. The shaded parts of the coloured parts is what cell was hovered.Now what we do to affect the other cells is make the background include the cells affected. Example: the hover image for the orange area will include the 4 cells on hover.Once on hover the cell background is changed, overlap is set to show and the z-index is hightened. Get what I mean? So on hover of the blue cell the background image is changed to include a background of the 6 affected cells.Now im not sure how well this will work on a table but if it doesn't show it change the grid to Div's...it may take a while but it should work. I may try myself later...atm im doing some homework so i cant >_>So heres the overall result:On hover of cell orange you want to change the background to include also the other affected cell images as just 1 image. Then the z-index is set to 1000 and overflow to show (or display...i cant remember off the top of my head).Then the rollout will just revert it to its normal status

[ff45t1z]

thanks for the response!I thought about this method, but not in the same way you did. I thought more along the same lines of the shifting upwards method I was using with images for all the cells, but your method works just as well really, which still sadly doesn't really seem to work.I tried it using both table cells and div's. The furthest I got was the overflow working, but sadly it deformed the entire table and pushed the other cells out of the way. Maybe the z index wasn't working correctly, I think it can't work right at all here sadly due to the fact i'm working with a background element.If you tried it, did you have any luck on your end?And also, i'm from Australia too, Sydney.Represent! haha