TJKPop Ups

Do you want images with that?

Popping up images instead of text is as simple as applying different classes to the SPAN containers.
Doing so allows us to set specific backgound images without size constraints.

To continue with our example, we will add images to the text that is already in the pop ups.

HTML

Plugging the CLASS attribute:

<div id="set_of_links">
<a href="javascript:;"><img src="10.gif" />
<span class="site_1"><strong>http://www.MyVeryFirstSite.com</strong><br />It's a frames-design layout with a whole bunch of tags. There are also a few cool animated gifs and a hit counter.</span></a><br />
<a href="javascript:;"><img src="20.gif" />
<span class="site_2"><strong>http://www.NumberTwo.com</strong><br />I dropped the frames and I replaced the animated gifs with cool flash banners. I have also 3D buttons with cool rolover effects!</span></a><br />
<a href="javascript:;"><img src="60.gif" />
<span class="site_3"><strong>http://www.TheThirdOne.com</strong><br />I dropped the flash banners, I'm using JavaScript to do all kind of cool stuff, I have a pop up navigation menu.</span></a><br />
<a href="javascript:;"><img src="70.gif" />
<span class="site_4"><strong>http://www.TheLastOne.com</strong><br />I dropped JavaScript and a whole bunch of stuff. Actually I removed everything I can live without.I'm thinking the leaner the better...</span></a>
</div><!-- /set_of_links -->

CSS

Creating CLASSes and working on padding:
We declare a different background property for each class [to hold and display the images] and we slightly modify the padding for positionning the text right under the background image.

div#set_of_links {
	position:relative;
	padding:9px;
	border:1px dotted #999;
	background-color:#fff;
	margin-bottom:20px
}
div#set_of_links a {
	display:inline;
	padding:0px 9px 0px 9px;
	text-decoration:none;
	color:maroon
}
div#set_of_links a:hover {background:transparent}
div#set_of_links a span {display:none}
div#set_of_links a:hover span {
	display:inline;
	position:absolute;
	top:9px;
	left:100px;
	padding:80px 15px 5px 0
}
.site_1 {background:url(b_10.gif) no-repeat top left}
.site_2 {background:url(b_20.gif) no-repeat top left}
.site_3 {background:url(b_60.gif) no-repeat top left}
.site_4 {background:url(b_70.gif) no-repeat top left}