PDA

View Full Version : Image pop-ups



Bennysan
03-27-2007, 09:51 AM
Hello all,

Firstly thanks for taking the time to read this post :)

My problem is a basic one i think, but yet i still can't find the solution. I have a tree chart of everyone who works in my organisation, and its one image, what i want is for when a user rolls his/her mouse over someones name on the chart that a small pop-up will appear with 3 or 4 bullet points about each person.

Is it possible to do this?

Thanks for your time and help,
Benny

kosi
03-27-2007, 03:15 PM
You'd need image maps for that. Make an area map for each person's name on the chart, and have an onMouseOver event that opens a javascript window. So for each person on the chart, put this in the head of the html:


<map name="company_tree_chart_map">
<area shape="rect" alt="About Person's Name" coords="x1,y1,x2,y2" href="#" onMouseOver="window.open('url_of_info_on_person', 'window_name'); return false;" />
<area shape="rect" alt="About Another Person's Name" coords="x3,y3,x4,y4" href="#" onMouseOver="window.open('url_of_info_on_another_person', 'window_name'); return false;" />
<area shape="rect" alt="About Third Person's Name" coords="x5,y5,x6,y6" href="#" onMouseOver="window.open('url_of_info_on_third_person', 'window_name'); return false;" />
<!-- etc, etc. You know, one for each person -->
<!-- the x and y coordinates are the top left and bottom right corners of where you want the map to be, btw. -->
</map>



Then in the body, call the image like this:


<img src="path_to_image" border="0" alt="" usemap="#company_tree_chart_map" ismap />

That should do it.

Bennysan
03-27-2007, 03:25 PM
awesome mate, will have a play with it tomorrow morning, it's hometime from work now :)

Bennysan
03-28-2007, 10:03 AM
Ok i've got another similar problem on another page, i've created hotspots on an image linking to different sections, and i've given them alt tags so that when you hover over part of the image a description comes up, although it disappears after 5 seconds or so, is there a way to adjust the time limit on these alt tags?