TJKPop Ups
Getting rid of the Text
If you simply remove the text from the SPAN container, there is a good chance you will see only part of the images.
This is because the text was giving its container some width and height by "filling the space". For this reason, it is important to give that element explicit values regarding size.
HTML
"Emptying" the SPAN containers:
<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>I dropped the frames and I replaced the animated gifs with cool flash banners. I have also 3D buttons with cool rollover effects!
</span></a><br />
<a href="javascript:;"><img src="60.gif" />
<span class="site_3"><strong>http://www.TheThirdOne.com</strong>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>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 -->
We end up with this:
<div id="set_of_links">
<a href="javascript:;"><img src="10.gif" />
<span class="site_1"></span>
</a><br />
<a href="javascript:;"><img src="20.gif" />
<span class="site_2"></span>
</a><br />
<a href="javascript:;"><img src="60.gif" />
<span class="site_3"></span>
</a><br />
<a href="javascript:;"><img src="70.gif" />
<span class="site_4"></span>
</a>
</div><!-- /set_of_links -->
CSS
Setting some width and height values:
You can simply set these dimensions to the same values as your larger image's width and height.
Note that there is no need for the padding property anymore.
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;
width:340px;
height:150px
}
.site_1 {background:url(images/b_10.gif) no-repeat top left}
.site_2 {background:url(images/b_20.gif) no-repeat top left}
.site_3 {background:url(images/b_60.gif) no-repeat top left}
.site_4 {background:url(images/b_70.gif) no-repeat top left}
Et voilà!
Give it a try:
