how to display a small window when mouse moved to a designated link?

[bigwhiteegg]

hi here
i just started learning HTML & CSS couple days ago
so please help me out :)
what I'm trying to do here is to
show a little box/window when the user moves his/her mouse to the designated point
in my case it is a city(that will be in a table cell w/ couple more cities)
the box/window will show an address correspond to the city
if the user can move his/her mouse into the box/window and is able to copy the address
that will be even better :)

please do inform me if the description isn't understandable.
thanks a lot for helping with my problem :)

[tinymark]

Do you know Javascript? It sounds like you want a mouseover effect that displays a hidden div when the mouse is over the target. You would use a mouseout to hide the div when the mouse moves away.

[bigwhiteegg]

Do you know Javascript? It sounds like you want a mouseover effect that displays a hidden div when the mouse is over the target. You would use a mouseout to hide the div when the mouse moves away.

oh~~~
I just started learning javascript earlier this afternoon
I'll take a look at the mouseover/mouseout part
thanks a lot!

[bigwhiteegg]

I found something similar in jQuery's mouseover() method
looks like a possible solution to my problem

seems to me the mouseover() method does trigger something
but how do I make a little pop out window to show the content?
maybe the hide() and show() will do the trick?
or is there another way?

[teedoff]

A simpler way without javascript, since some ppl chose to disable js in their browsers, would be with a hidden div thats activated with the hover. There are plenty of tutorials for that as well, but the basic jist of it would be:

Create a div or even an image with whatever you want to "pop-up" in a window, then set it to 0 width and 0 height. Then in your stylesheet have something like:

#divName a:hover {
         width: 200px;
         height: 200px;
         position: (whereever you need)

}

Then when the user hovers over the table cell or whereever the hidden div/image is, it will display. That simple. No hard to understand javascript and no worries about users not being able to see the window.

[teedoff]

hmm marked solved. What did you do? Inquiring minds want to know! lol