Click here to get back home

HTML image map mouseover help

 HomeNewsGroups | Search | About
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
HTML image map mouseover help Annette Acquaire 10-07-2006
Posted by Annette Acquaire on October 7, 2006, 1:11 pm
Please log in for more thread options


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



Posted by Brendan Gillatt on October 8, 2006, 10:28 am
Please log in for more thread options


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 brendan \removethis// gillatt co uk |
| http://www.brendangillatt.co.uk                                |
| PGP Key: pgp.mit.edu:11371/pks/lookup?op=get&search=0x6E265E61|

Posted by Jukka K. Korpela on October 8, 2006, 11:01 am
Please log in for more thread options


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 <area> elements, 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 <img> elements 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/


Posted by Jobe on October 8, 2006, 11:27 am
Please log in for more thread options


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 <area> elements, 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 <img> elements 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/


Similar ThreadsPosted
embedding + mouseover September 24, 2004, 12:45 am
How to get MAP to work with mouseover April 10, 2006, 10:59 pm
Problem with CSS Mouseover September 24, 2006, 9:39 am
mouseover/hover Link September 22, 2006, 3:05 am
IE6 elements out of place until mouseover? September 25, 2008, 5:54 pm
Simple table row highlighting - on mouseover October 13, 2004, 10:02 am
Creating image maps with Adobe Illustrator or Image Ready. March 8, 2005, 12:42 pm
HTML Background image January 28, 2006, 4:51 pm
HTML Image Mapper November 22, 2006, 5:20 pm
How to lauch an image editor when click on an image link ? November 8, 2004, 7:00 am

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap