image rollover with an image map using only css

[akninshar]

I'm still getting used to css and am trying to stick to it in my current project rather then reverting to JS, but I've got a problem I can't seem to find a fix to :

I'm making an image gallery wich displays a larger version of a thumbnail over it on hover, but it's an artist's site and I'm trying to make it has unconventionnal has possible, so all the thumbs are irregularly shaped and put together like a jigsaw puzzle, which is why I have to use an image map to get the right shapes. Now my problem is that overlapping image goes from display:none to block on a:hover, but I can't figure out how to apply that to the "hotspots" of the map since there is no "a" there to apply the hover on. I'm guessing there's a way around it but I've been seaching the web for a couple of hours and have found no answer to this specific problem. I did find ways of having hovers on images but not using maps... Can anyone help me with this? (hope I've been clear enough, if not ask and I'll specify)

[Emerick]

The key to making this work in all modern browsers is to define your links as block elements in your style sheet ( display: block ), and making the width the same as your image's ( eg. width: 32px ). Choose a background colour for your link that matches your page background and a second colour that you want for the rollover effect ( defined in a:hover ). For example: <style type="text/css">
<!--
.rollover a { display:block; width:32px; background-color: #FFFFFF}
.rollover a:hover { background-color: #990000}
-->
</style> This will create one rollover image per line. You can then use nested <div> tags, tables, and/or CSS positioning to better control the placement of these rollovers on your page.

This might help.

[Emerick]

Here is the HTML used to create this rollover. You may notice that it is much shorter, and easier to remember than a JavaScript rollover. Essentially, you just need to define a class and everything else is handled with CSS <div class="rollover">
<p>
<a href="#"><img src="stuart.gif" width="32" height="32" border="0"></a>
</p>
</div>

Using these two bits of code, you might be able to figure it out. Tell me if this helps out.

[Centauri]

Some of Stu Nicholls' demos may be close to what you need - check out:
http://www.cssplay.co.uk/menu/imap.html
http://www.cssplay.co.uk/menu/old_master.html
http://www.cssplay.co.uk/menu/mantis.html

Cheers
Graeme

[akninshar]

Emerick : Thanks but this method doesn't seem to work in my case

Centauri : thanks for the links, I'll look into it, one of those might do it

In any case, here's a link to the page, http://www.geocities.com/shade_of_illusia/test.htm

and here's the css.
.container
{
position: relative;
}


.container a .preview
{
display: none;
}

.container a:hover .preview
{
display: block;
position: absolute;
top: -95px;
left: -10px;
z-index: 1/2;
}

.container .preview
{
border-color: #000;
}

Those might help you understand my problem. So if you look at the source code of the page, you'll see that right now, the whole image is used has a link to have the preview pup-up, but what I'm trying to do is to have each small section (defined in the map) have a different image pup-up and be a link to a full screen version of the image on a different page.

[Emerick]

Hmm, i see. Wow, i think u past my expertise. I am almost positive you cannot to a hover image on an image map because it is all one image. sorry

[zackbloom]

Checkout the book "Advanced Web Standards Solutions" I think it has a section on CSS rollovers.

[WebJoel]

Very interesting indeed! Myself, -since you are not afraid of using javascript here, would make the hover-map images do a 'pop-up' on the same page. I have done 'css sprites' technique before and you could have the hot-section reveal a 'magnified/larger' view... but this is just inches beyond my ability too. I could read the 'how-to' though and possible figure it out..

I noted (and why I am replying) something of a curiosity that I noticed: When viewing this page in Firefox and re-sized smaller, Fx will provide default scrollbars. IE does not. -If one re-sizes your page manually in IE, there is no method of 'scrolling' your page to show all of it's content. Do you see this too, or is there something amiss on my end? :confused: It is as if the image is 'background-image' or something...

[decibel]

This sounds like a job for FLASH. You ever see those annoying ads for mortgages, where its a map of teh united states, and each state changes on rollover, obeying the state borders? I think your looking for something like that. Its done in flash.

This is difficult to do with just css/html, because of the way elements are "blocks", hard to get around that. Easy to layout using absolute positioning of divs, transparent gifs, and anchors on the gifs, but how do you get around the boxes over lapping? still the same problem.

Im not saying it cant be done with css, but and element is either a rectangle, or... thats it, there all rectangles.

[akninshar]

WebJoel : Actually, the scrollbars are there but are of the same color has the background. Also, I wasn't going to adress this problem just yet, but I also noticed that the pup-up image doesn't work in Fx or Netscape...

Decibel : You're absolutely right of course, I just wondered if it was possible to do it all with css. I wasn't realy looking for a way to select polygons in css, more like a way to check for hover on areas.

So if anyone knows of a way to check for hover on elements other then "a" in css (if it's even possible), please let me know.

[Emerick]

This sounds like a job for FLASH. You ever see those annoying ads for mortgages, where its a map of teh united states, and each state changes on rollover, obeying the state borders? I think your looking for something like that. Its done in flash.

This is difficult to do with just css/html, because of the way elements are "blocks", hard to get around that. Easy to layout using absolute positioning of divs, transparent gifs, and anchors on the gifs, but how do you get around the boxes over lapping? still the same problem.

Im not saying it cant be done with css, but and element is either a rectangle, or... thats it, there all rectangles.
Oh yea, now that you say it. The absolute easiest way to accomplish this would be in flash.