HTML image map mouseover help

[Annette Acquaire]

I have and image map with a dozen hotspot links on it that I'm trying to
get to open a new image over existing one on mouseover of each COORD. The
only thing I was able to do was swap image on mouseover entire image, I want
it on each hotspot only, so an image pertaining to each link shows up.
I have done it in JavaScript, but the website I'm using doesn't use
JavaScript. Y'all are obviously light-years more knowledgeable then me on
html and such, I had hoped you might have advise, ANY ADVISE, to help me out
thanx for your time.
AA

[Brendan Gillatt]

Annette Acquaire wrote:

I have and image map with a dozen hotspot links on it that I'm trying to
get to open a new image over existing one on mouseover of each COORD.

Image maps are a bad route to go down for 99.9% of the time. See:
http://www.mcsr.olemiss.edu/~mudws/ismap.html

The
only thing I was able to do was swap image on mouseover entire image, I want
it on each hotspot only, so an image pertaining to each link shows up.

Use CSS with div elements and separate background images for each
section to be hovered.
E.G.
_______________ _____
| | | |
| div1 | div2 | div3 |
|______|______| ______|
| | | |
| div4 | div5 | div6 | Sample layout
|______|______| ______|
| | | |
| div7 | div8 | div9 |
|______|______| ______|

In the CSS:

div1 {
background: url('plain.png' );
}

div1:hover {
background: url('div1_hover .png');
}

I have done it in JavaScript, but the website I'm using doesn't use
JavaScript. Y'all are obviously light-years more knowledgeable then me on
html and such, I had hoped you might have advise, ANY ADVISE, to help me out
thanx for your time.
AA

--
| Brendan Gillatt |
| brendan {at} brendan \removethis// gillatt {dot} co {dot} uk |
| http://www.brendangillatt.co.uk |
| PGP Key: pgp.mit.edu:113 71/pks/lookup?op=get&s earch=0x6E265E6 1|

[Jukka K. Korpela]

Scripsit Annette Acquaire:

I have and image map with a dozen hotspot links on it that I'm
trying to get to open a new image over existing one on mouseover of
each COORD.

As Brendan Gillatt wrote, image maps are usually a bad technique -
especially for simple navigation, since they turn it into complicated and
unreliable navigation.

Yet, the technical problem is intriguing.

The only thing I was able to do was swap image on
mouseover entire image,

That's the way - and you would thus need versions of the entire image for
each mouseover effect. It's possible but awkward and inefficient.

I want it on each hotspot only,

The problem is that even on browsers that support the onmouseover=".. ."
attribute for in HTML _or_ :mouseover in CSS <areaelements , there's not
much you can do in simple manner. In CSS, you cannot change the properties
of an enclosing element in a rule for an area:mouseover selector.

I have done it in JavaScript, but the website I'm using doesn't use
JavaScript.

I cannot quite see how you could do it even for the entire image without
using JavaScript. You can use overlaid <imgelements and z-index to select
which image is visible (i.e., on the top), but how could you make this
depend on the _area_?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Jobe]

Brendan wrote:

>Use CSS with div elements and separate background images for

each

>section to be hovered

To my modest knowledge the CSS hover command is not supported in IE. We
are all looking forward to IE7 to get this feature available.
PS: IE7 RC1 proves it works.

Best regards
Jobe
www.web-garden.be
Jukka K. Korpela wrote:

Scripsit Annette Acquaire:

I have and image map with a dozen hotspot links on it that I'm
trying to get to open a new image over existing one on mouseover of
each COORD.

As Brendan Gillatt wrote, image maps are usually a bad technique -
especially for simple navigation, since they turn it into complicated and
unreliable navigation.

Yet, the technical problem is intriguing.

The only thing I was able to do was swap image on
mouseover entire image,

That's the way - and you would thus need versions of the entire image for
each mouseover effect. It's possible but awkward and inefficient.

I want it on each hotspot only,

The problem is that even on browsers that support the onmouseover=".. ."
attribute for in HTML _or_ :mouseover in CSS <areaelements , there's not
much you can do in simple manner. In CSS, you cannot change the properties
of an enclosing element in a rule for an area:mouseover selector.

I have done it in JavaScript, but the website I'm using doesn't use
JavaScript.

I cannot quite see how you could do it even for the entire image without
using JavaScript. You can use overlaid <imgelements and z-index to select
which image is visible (i.e., on the top), but how could you make this
depend on the _area_?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/