Topic: css, images and image maps (Page 1 of 1)

ok...i've been hard at it today with css...
now i've got it (i think) with positioning my images with css...
i'm just curious, when i make a hotspot on an image, can i put that in my style sheet or does that still go in the body? does this make sense??
sorry if i confuse you.

CSS and Image maps are completly different things.

CSS defines the style for your document or your <tags> whatever they may be. A client side image map is defined by using a <map> tag hence it is HTML.

Dig?

I'm a little curious about the use of the term hotspot though, it could mean many different things. Specifics help... Are you wrapping an anchor tag <a...> around an image tag <img...>?? Or are you refering to the clickable areas defined in an image map?

You can't actualy set a link in CSS, except to import another CSS doucment into the current HTML file, but I doubt that's what your trying to do. You can define how text, images and other elements wraped in a set of <a...></a> tags will appear but you can't tell them what to link to using CSS. The URL for the anchor must be set in the HTML tag itself, <a href="mypage.html">Inline Element</a> like so....

Did that make any sense?

that makes perfect sense...
see, what i did was/is, placed my button image with css...then to have it be clickable, i put a hotspot over it and made the hotspot link to the corresponding page/place...
i was just wasn't sure if you could position the hotspot using css.
but you answered that for me...and i understand why i can't
thanx much!

just out of interest while we are on hotspots, are they well supported by most browsers does anyone know? any issues with them? thx

If by "hotspot" you mean "image map," then yes, they are well supported. Image maps have been around for a loooooong time (at least in Internet years).

If you mean something else, though, then I have no idea.




Cell 270

sorry, yes image maps is what i mean , i thought they were well supported which is good for once

If you're up for some extra work, there are a few ways to make an image-map-like effect using only CSS. This means you can have philosophically-correct structural HTML markup even while using something like an image map.

All you have to do is make a positionable element (such as a DIV) for each link you want in your "image map." Fill each DIV with a traditional spacer GIF. Use CSS properties on the DIV and the IMG to make them the height and width you want. Then, use absolute positioning (remember that you can do absolute positioning relative to a containing element, it just takes more testing and fiddling) to put those DIVs wherever you need them. Remember to give them a z-index property sufficient to put them in front of the image you're "mapping" over.

Here's an example of such a "hotspot," from my own site.

<div><a href="/" title="link: home"><img id="logohotspot" src="/images/clearpixel.gif" alt="Alan MacDougall" /></a></div>

The "title" and "alt" attributes are essential here. To visual browser users, it'll be an invisible clickable area on the screen (invisible is good, it means you can see your main image below it). But to a text-only browser, or a screen reader, it'll say something like "Link entitled 'link: home': Image described as 'Alan MacDougall': end of link." Therefore, it's entirely structural and accessible! I think.

That's not necessary, though. A client side image map, made with alt tags for each of the clickable areas, is structurally sound and will make sense in a non-visual browser.

True, true...

PT: why go through the trouble of making an "invisible overlay," though? Why not just split the image up, put it back together with divs, and then just make the hotspots links?

Well, my version was there in case you want to make a page whose entire appearance is determined via CSS -- by changing the CSS file, you could change the locations of your "hotspots", whereas with an HTML image-map, you have to change the HTML if you want that.

I'll admit that my "solution" was actually a really picky and not-especially-practical way of doing something that most people aren't going to want to do anyway.

Hmm... true. OK, I see your point. But yeah, I probably wouldn't want to do it that way.

I've done similar things with CSS before but I've used the overlay "hotspots" which are transparent GIF's to also act as a place holder for rollovers.

This way you can set the rollover's without any script at all, just using the :hover psuedo class to alter the background image of the element, but you'll still need to preload the images.

If you do it this way, though, you can only have square/rectangular hotspots, right? No circles or anything like that...

Hmm, that's true... if you need to draw irregular hotspots, you're better off using Imageready or something to build you a traditional image-map. You'll probably want to clean up IR's code, though, at least if you're as picky as I am.