TJKPop Ups
Pushing the Envelope
If we can nest a SPAN tag pair within A tags why not try to plug more than one? That should give us one more "layer" to play with...
HTML
Adding the new SPAN containers with their content:
<div id="set_of_links">
<a href="javascript:;"><img src="10.gif" /><span class="site_1"></span>
<span class="site_11"><br />eCommerce</span></a><br />
<a href="javascript:;"><img src="20.gif" /><span class="site_2"></span>
<span class="site_22"><br />Design</span></a><br />
<a href="javascript:;"><img src="60.gif" /><span class="site_3"></span>
<span class="site_33"><br />Hosting</span></a><br />
<a href="javascript:;"><img src="70.gif" /><span class="site_4"></span>
<span class="site_44"><br />Marketing</span></a>
</div><!-- /set_of_links -->
Note: If I'm using a <BR /> instead of a padding or margin declaration it is just to make the CSS rule shorter.
CSS
Adding the rules for the new CLASSes:
We do it the exact same way we did it before, we just have different declarations regarding image placement.
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
}
div#set_of_links a span.site_11,
div#set_of_links a span.site_22,
div#set_of_links a span.site_33,
div#set_of_links a span.site_44 {display:none;font-size:80%}
div#set_of_links a:hover span.site_11,
div#set_of_links a:hover span.site_22,
div#set_of_links a:hover span.site_33,
div#set_of_links a:hover span.site_44 {
display:inline;
position:absolute;
top:115px;
left:100px;
width:160px;
height:40px
}
.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}
.site_11 {background:url(images/10.gif) no-repeat bottom right}
.site_22 {background:url(images/20.gif) no-repeat bottom right}
.site_33 {background:url(images/60.gif) no-repeat bottom right}
.site_44 {background:url(images/70.gif) no-repeat bottom right}
And there is still no JavaScript involved!
Give it a try:
Et voilà!
