Topic: css, images and image maps Pages that link to <a href="https://ozoneasylum.com/backlink?for=10831" title="Pages that link to Topic: css, images and image maps" rel="nofollow" >Topic: css, images and image maps\

 
Author Thread
Lacuna
Maniac (V) Inmate

From: the Asylum ghetto
Insane since: Oct 2002

IP logged posted posted 10-23-2002 11:20 Edit Quote

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.

Dracusis
Maniac (V) Inmate

From: Brisbane, Australia
Insane since: Apr 2001

IP logged posted posted 10-23-2002 11:35 Edit Quote

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?

Lacuna
Maniac (V) Inmate

From: the Asylum ghetto
Insane since: Oct 2002

IP logged posted posted 10-23-2002 11:46 Edit Quote

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!

H][RO
Bipolar (III) Inmate

From: Australia
Insane since: Oct 2002

IP logged posted posted 10-23-2002 15:39 Edit Quote

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

Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 10-23-2002 16:06 Edit Quote

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

H][RO
Bipolar (III) Inmate

From: Australia
Insane since: Oct 2002

IP logged posted posted 10-23-2002 18:10 Edit Quote

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

Perfect Thunder
Paranoid (IV) Inmate

From: Milwaukee
Insane since: Oct 2001

IP logged posted posted 10-23-2002 20:57 Edit Quote

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.

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 10-23-2002 22:06 Edit Quote

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.

Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 10-24-2002 04:08 Edit Quote

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?

Perfect Thunder
Paranoid (IV) Inmate

From: Milwaukee
Insane since: Oct 2001

IP logged posted posted 10-24-2002 14:34 Edit Quote

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.

Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 10-24-2002 16:55 Edit Quote

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

Dracusis
Maniac (V) Inmate

From: Brisbane, Australia
Insane since: Apr 2001

IP logged posted posted 10-24-2002 21:25 Edit Quote

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.

Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 10-25-2002 03:43 Edit Quote

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

Perfect Thunder
Paranoid (IV) Inmate

From: Milwaukee
Insane since: Oct 2001

IP logged posted posted 10-25-2002 03:59 Edit Quote

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.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu