css pop up/image rollover trick for myspace

css pop up/image rollover trick for myspace Oct 10, 2006 14:01:34 GMT

Quote

Post by aaron34 on Oct 10, 2006 14:01:34 GMT

This tutorial well allow you to do css popups on your page.

•Works best with a div overlay profile•
For advance coders only.

Place this in your style sheet

a:link,
a:visited,
a:active{
color: 000000;
font-family:arial, verdana, tahoma, sans-serif;
font-size:10px;
text-decoration:none;
}
a span{
display:none;
}
a:hover span {
display: block;
position: absolute;
top: 30px;
left: 30px;
width:125px;
padding: 5px;
margin: 10px;
z-index: 5;
color: white;
background: black;
filter:none;
font-size: 10px;
font-family: arial, verdana, tahoma, sans-serif;
text-align: center;
text-decoration:none;
}

change the under lined type to suit your needs.

That looks like your standard link properties but there are some slight modifications to them. I will attempt to break it down for you.

This part of the code hides the text for the popup when the page first loads.

a span{
display:none;
}

This part is for when you hover over the link.

a:hover span a:hover span {
display: block;
position: absolute;
top: 30px;
left: 30;
width: 125px;
padding: 5px;
margin: 10px;
z-index: 5;
color: white;
background:
black;filter:none;
font-size: 10px;
font-family: arial, verdana, tahoma, sans-serif;
text-align:center;
text-decoration:none;
}

Now, to actually create the pop up we use the span tag when creating the link:

Place this bit in the DIV you would like the pop up to be in

For text:

For images:

Then all you have to do is play with the positioning in the a:hover span to get the popup where you want it.