Image Map - In reverse - HTML & WEB-Design - Forums at ProgrammersHeaven.com

HTML & WEB-Design

Moderators: Jonathan

Number of threads: 1253
Number of posts: 3360

With full replies

Topics only

HTML & WEB-Design

Forum Info

This Forum Only

Single Post View Linear View Threaded View f

Printer Friendly

RSS Feed

Image Map - In reverse Posted by Reinhardt on 11 Feb 2002 at 5:34 AM

Hi

I have a unique scenario I wpuld like to have any help on. I want to create
a link from an html page to a certain part of a graphic, bit like a image
map in reverse, so that the area on the picture is acts like a "name" and
not a "href" attribute, so it acts like a bookmark, here is an example:

If you have a training document, where the text refers to a lever on a
picture that the student must pull, if the student clicks on the word lever
in the text, the lever must
move into view, like a bookmark on a page.

Please if you could supply me with any help, it would be great.

Thanks in advance
Reinhardt Zeelie

Share By Email

Re: Image Map - In reverse Posted by Secret_Doom on 11 Feb 2002 at 10:56 PM

Hi.

Confusing question... Let me see if I've understood you:

1. You have an image
2. You have a text
3. You have a invisible yellow square, on a certain position in front of that image
4. You want that yellow square be visible while user clicks on the text.

The [3] is just an example.

Is that it?

-- Secret_Doom - Leonardo Pignataro --

secret_doom@hotmail.com
www.batch.hpg.com.br

: Hi
:
: I have a unique scenario I wpuld like to have any help on. I want to create
: a link from an html page to a certain part of a graphic, bit like a image
: map in reverse, so that the area on the picture is acts like a "name" and
: not a "href" attribute, so it acts like a bookmark, here is an example:
:
: If you have a training document, where the text refers to a lever on a
: picture that the student must pull, if the student clicks on the word lever
: in the text, the lever must
: move into view, like a bookmark on a page.
:
: Please if you could supply me with any help, it would be great.
:
: Thanks in advance
: Reinhardt Zeelie
:
:

Share By Email

Re: Image Map - In reverse Posted by Reinhardt on 11 Feb 2002 at 11:30 PM

Hi Secret Doom
Yes, that is what I would like to achieve, so say there is a lever on the image, and it is marked (3), then when the user clicks (3) in text, the 3 highlights on the image, or atleast moves into view.
Reinhardt.

: Hi.
:
: Confusing question... Let me see if I've understood you:
:
: 1. You have an image
: 2. You have a text
: 3. You have a invisible yellow square, on a certain position in front of that image
: 4. You want that yellow square be visible while user clicks on the text.
:
: The [3] is just an example.
:
: Is that it?
:
: -- Secret_Doom - Leonardo Pignataro --
:
: secret_doom@hotmail.com
: www.batch.hpg.com.br
:
:
: : Hi
: :
: : I have a unique scenario I wpuld like to have any help on. I want to create
: : a link from an html page to a certain part of a graphic, bit like a image
: : map in reverse, so that the area on the picture is acts like a "name" and
: : not a "href" attribute, so it acts like a bookmark, here is an example:
: :
: : If you have a training document, where the text refers to a lever on a
: : picture that the student must pull, if the student clicks on the word lever
: : in the text, the lever must
: : move into view, like a bookmark on a page.
: :
: : Please if you could supply me with any help, it would be great.
: :
: : Thanks in advance
: : Reinhardt Zeelie
: :
: :
:
:

Share By Email

Re: Image Map - In reverse Posted by Secret_Doom on 13 Feb 2002 at 9:40 PM

I've continued this discussion by email, but if anyone is interested, the solution was to create a DIV (which would be the map) with the property style="VISIBILITY:hidden" and then switching it when a link was clicked.

Example:

<html>
<body>
<div id=map3
style="VISIBILITY: hidden; POSITION: absolute;
TOP: 140; LEFT: 130; WIDTH: 50; HEIGHT: 50;
BORDER: #00FF00 2px solid">&nbsp;</div>
<img src="../../bolhas.bmp" width=300 height=300><p>
<a href="#"
onmousedown="map3.style.visibility='visible'"
onmouseup="map3.style.visibility='hidden'">Show map</a>
</body>
</html>

It's not necessary to specify the image's WIDTH and HEIGHT.

-- Secret_Doom - Leonardo Pignataro --

secret_doom@hotmail.com
www.batch.hpg.com.br

Share By Email

HTML & WEB-Design

Recent Jobs