How To Do CSS Popups ?

[superman408 0]

On myspace i was wondering how to do those clean css popups that while you hover over an image another image pops up

[iGuest 3]

On myspace i was wondering how to do those clean css popups that while you hover over an image another image pops up

You mean like a rollover effect, you hover over an image and it changes to another image?

Or you mean you hover over an image and another window pops up showing another image?

If it's the rollover effect, both can be done using Javascript and CSS.

If it's the window pop up, that would be Javascript only, using onmouseover though CSS could do similar but it would not be a seperate window.

If you can provide a link to what you mean, then I might be able to explain how it works.

Cheers,


MC

[Hercco 0]

I guess you mean setting certain elements visible and not on a mouse event.

 

 

You do this by changing the value of CSS property display or visibility to either block (or other display mode, like inline) or none (for display) or visible or hidden (for visibility).

 

Display and visibility work in a bit different ways. Element with visibility: hidden; takes it's space normally, it just isn't show. It is, well, invisible. Element with display: none; is treated as it didn't exist, so it doesn't take space.

 

You can chenge the values of these properties with javascript. For example:

 

document.getElementById( ID ).style.visibility="visible";

Where ID would be the unique id you have set for the element. I regularly use these functions:

 

function show(item)				{						document.getElementById(item).style.display="block";				}				function hide(item)				{					document.getElementById(item).style.display="none";				}

Just call the function from OnClick and include the rigtt ID as parameter.

[iGuest 3]

If it is pure css "tooltip" style pop-ups you want, go here and have a look. I have been told that if you have an image as the 'span' item it works to display the image, but I haven't done it with images yet, personally.
Maybe in a spare moment I will try it and see how it goes, but this tooltip procedure works to produce nicely styled "tooltips", and I can't see why it wouldn't work. It uses the display:none techniques discussed above, but no javascript. Here is the critical portion of the css. Notice how the hover changes from display:none to display:block. There is more to it, so read the tutorial linked above.

a.info span{display: none}a.info:hover span{ /*the span will display just on :hover state*/	display:block;	position:absolute;	top:2em; left:2em; width:15em;	border:1px solid #0cf;	background-color:#cfc;	color:#cc3366;	text-align: center}

Edited August 30, 2007 by jlhaslip (see edit history)