usemap and CSS

[Hans]

As I try to figure out what html and CSS is all about, I've come to point
where I like an image to pop up when I hover over certain parts of an image.
What I have tried is to cut out a part of the image out and to put it back
on top of the original image, but it is a lot of work and a lot of images.
So suddenly, i found out there is something named "usemap", but I can't
figure out how to use it in the way I want.

If you hover over the upper part of the picture on this page

http://www.armoire-ignifuge.fr/prod/armoire-ignifuge-sa580.htm

you will see it pops up an enlargement.

"thumbnail4" is an external stylesheet and I would like to have in that way
as I like the way of formatting in CSS.

How do I implement "usemap" in the code below instead of using a cut out
picture as I do here? Can anyone tell me, please?

<div id="single_safe_img">
<img src="SA-580-comp.jpg" width="360" height="396">
<div id="sa_580_details_inner_compartment">
<a class="thumbnail4" href="#">
<img border="0" src="SA-580-detail-inner-comp.jpg"
width="165" height="71">
<span><img src"SA-580-detail-inner-comp-la.jpg"
alt="Armoire ignifuge papier SA 580 BJARSTAL..">
</span>
</a>
</div>
</div>

Thanks

Hans

 

[Hans]

To clairfy, I have found an example on quackit.com about how to use , but it
conntects to a javascript, and as I wrote earlier below, I like to use CCS
in the same way as in my first example. I use FrontPage 2003 and as it is
very easy to use "usemap" in FrontPage it would be great to find a way to
arrange this. Or shall I load the picture to "frames"?

Thanks

Hans

<img src ="/pix/mueller_hut/mueller_hut_t.jpg"
width="225" height="151" border="0"
alt="Mueller Hut, Mount Cook, and I"
usemap ="#muellermap" />

<map id ="muellermap"
name="muellermap">
<area shape ="rect" coords ="90,80,120,151"
href ="javascript:alert('Me');"
alt="Me" />
<area shape ="poly" coords ="55,55,120,80,90,80,90,100,70,100,20,80,55,55"
href ="javascript:alert('Mount Cook');"
alt="Mount Cook" />
<area shape ="poly" coords ="145,80,145,100,215,90,215,80,180,60,145,80"
href ="javascript:alert('Mueller Hut');"
alt="Mueller Hut" />
</map>

 

[Larry]

Hello Hans,
Why don't you just copy the css from the site you mention below and then
adapt it to the image where you want to have an enlarged picture.
i. e.
take <link href="../_css/picture_enlarge_fix.css" rel="stylesheet"
type="text/css">
change the url to:
http://www.armoire-ignifuge.fr/_css/picture_enlarge_fix.css
and the css code page is displayed. Then save the page to your computer.
Afterwards follow the method used on the source of the example page to
create what you want.

Larry