Need help with vocabulary (what do you call these?)

[Anne Arbor]

I have an idea for a Web application but am so new that I'm not even sure what to call some of its proposed components. I'm so new that I'm not even sure where to post this thread. :o This seems like a good place, though, so I'm giving it a try.

Here is a map of Montpelier (http://samples.mapsalive.com/1062L/page1.htm), Vermont, which has some of the features I would like my app to have.

When you mouseover any of the numbers on that map, you get a "window" with information in it (a scanned business card, in most instances).

My first question is pure vocabulary: what do you call that window? I'm familiar with the term "popup," of course, but I don't think that's what those are . . . or are they? Secondly, how does one create such a window - JavaScript? Flash? other?

Those are my first questions. If anyone is willing to answer them, I'd be very pleased. :)

If anyone is willing to read on and try out my remaining 1-1/2 question, that would be totally awesome. :D


Some of the windows have links to the indicated business' website in them. I'm assuming that those are not difficult to add (I hope?).

Finally, my last question has to do with whether it's possible to associate a kind of "menu" of links with an icon on a page. What I'd like to do is have a bunch of icons, representing people and places, on a single Web page. Then I'd like to add a kind of "menu" to some of them - for example, a set of links that would lead to photos (probably on other pages) of the person or place.

I guess my question is: using #22, Montpelier City Hall, as an example - could I have a menu of links that would appear on mouseover, listing various city agencies and their Web pages? The "menu" could be just a drop-down menu, like a nav bar, or a menu that appears in the "window." Could that be done and, if so, using what languages?

Thank you SO much for any help you can give me!

[bluewalrus]

http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm

Yes, and html, css, and javascript can be used to create the menu.

[Anne Arbor]

Thank you, blue. :) So, to start at the beginning, the Montpelier windows would be considered tooltips? balloons? (some third thing that I haven't come across yet?)

Does one need all three (HTML, CSS and JavaScript) to create a single balloon-tooltip-window?

[Anne Arbor]

Okay, I am working my way down the page that you linked to. Some progress. Some problems. :)


It looks like I might actually be able to do the tooltips.

Can someone point me in the right direction for adding menus to individual icons? I'm still getting used to the idea that it can be done (twenty drop-down menus in the middle of a page?), but haven't been able to begin picturing how to do it.

[bluewalrus]

Javascript pops it up, css styles it, html is the content. So I guess you don't need the css...

If you can't resolve the problems post them and someone will try and help you, also try and include the code or a link.

[azoomer]

this one may also be helpful. it can give you a drop down menu on any link
http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm

[Anne Arbor]

Blue, thanks again for your help. And for the suggestion that help will be available in the future. It's all very encouraging. :cool:



Javascript pops it up, css styles it, html is the content. So I guess you don't need the css...

If you can't resolve the problems post them and someone will try and help you, also try and include the code or a link.

[Anne Arbor]

Azoomer, thank you for the great suggestion.

It's probably hard for you to imagine just how dense one is at the stage where I find myself. I've never even had a real idea as to what DHTML is until today, and only after reading your and Bluewalrus's replies. Suddenly, it feels like the light has gone on! All the possibilities - wow!

Thank you again. :)


this one may also be helpful. it can give you a drop down menu on any link
http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm

[Anne Arbor]

Btw, there seems to be a hack of some kind in the CSS Menu code.

When I put it all together and tried it out, all the menus worked beautifully.

When mousing over the "News" button, though, I also got a box, with a pink background, and a message that says "I'm just an English teacher now but you never know that could change. Save me from being just another YouTube artist . . . . " It also has characters from an Asian language (Korean, I think) in it.

That's not really supposed to be there, is it??

[djr33]

That's very strange. I don't see why that would show up. Exactly what did you do? Is that something you typed at some point, or is related to your website?
I don't see anything like that in the code for the anylink menu currently on this site, so it wouldn't be from that I don't think.

[Anne Arbor]

DJR, believe me, I added absolutely nothing to the code.

The problem seems to be with this line -
data-overimage="http://i43.tinypic.com/24fycd5.gif"

It's in the code for the 4th anchor link - the part that goes in the body of the Web page. If I leave it in, I get the pink box and the strange message. If I take it out, I get an "x" in a box and the menu - not quite right, but close.

:confused:

[traq]

<!--4th anchor link-->

<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu4" data-image="http://i44.tinypic.com/2mni3yx.gif" data-overimage="http://i43.tinypic.com/24fycd5.gif"><img src="http://i44.tinypic.com/2mni3yx.gif" style="border-width:0" /></a></p>

its part of the demo for the anylink css menu. you can replace it with your own content.

[Anne Arbor]

traq,

So it is supposed to be there? <eek>


On edit: Has anyone else actually looked at the image (http://i43.tinypic.com/24fycd5.gif)? It seems bizarre that someone would place it there. A very weird Easter egg?

On second edit: It turns out that the proper data-overimage should be "newsover.gif". Don't know where it's stored, but it can be downloaded from the demo script higher up on the page.

.

[traq]

No, it's just example content to show how the script works. You should replace all such content with your own.

[Anne Arbor]

http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm

. . .


In my attempt to implement this code, I have had approximately 90% success.

When I open the resulting Web page, the first tooltip does not appear the way it should. Instead of the nice tabbed image shown in the demo, I get only a dot in the upper right corner. Is there a graphic that I am missing?


On edit: Okay, yes. I am missing the shadetabs.gif. :D



P.S. I'm still a little disappointed that no one has commented on the crazy pink "I'm a prisoner in a Chinese cookie factory" message.


.