link inside link

[irukandji]

I found this image gallery (http://www.cssplay.co.uk/menu/gallery.html#nogo) and think it is very cool, yet I was wondering if it were altered a bit, could I get the description text for the image to be linked to open another page?

As it looks now the text is inside the span which is called from the link of the thumb.

Wonder if I am reaching beyond the abilities of CSS...

I've put his css below:


.a, .a:visited {color:#000;}
#container {position:relative; width:600px; height:700px; background:#888; border:1px solid #000; margin:10px auto;}
#container b {font-weight:normal; width:600px; text-align:center; position:absolute; bottom:250px; left:0; color:#eee; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; letter-spacing:1px; line-height:1.7em; z-index:1;}

a.gallery, a.gallery:visited {display:inline; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:75px; float:left; margin:7px 21px; position:relative; cursor:default;}

a.slidea {background:url();}
a.slideb {background:url();}
a.slidec {background:url();}
a.slided {background:url();}
a.slidee {background:url();}
a.slidef {background:url();}
a.slideg {background:url();}
a.slideh {background:url();}
a.slidei {background:url();}
a.slidej {background:url();}

a.gallery span {visibility:hidden; display:block; position:absolute; width:580px; height:500px; top:189px; left:9px; color:#000; background:#ccc; text-align:center; border:1px solid #fff; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; letter-spacing:1px; cursor:default;}

a.slidea span {left:-13px; top:180px;}
a.slideb span {left:-132px; top:180px;}
a.slidec span {left:-251px; top:180px;}
a.slided span {left:-370px; top:180px;}
a.slidee span {left:-489px; top:180px;}
a.slidef span {left:-13px; top:89px;}
a.slideg span {left:-132px; top:89px;}
a.slideh span {left:-251px; top:89px;}
a.slidei span {left:-370px; top:89px;}
a.slidej span {left:-489px; top:89px;}

a.gallery:hover {white-space:normal; border:1px solid #fff; z-index:100;}

a.gallery:hover span {visibility:visible; z-index:100;}

a.gallery:hover span img {margin:10px; border:1px solid #000; position:relative; z-index:100;}

a.gallery:active, a.gallery:focus {border:1px solid #c00; z-index:10;}

a.gallery:active span, a.gallery:focus span {visibility:visible; z-index:10;}

a.gallery:active span img, a.gallery:focus span img {border:1px solid #000; position:relative; margin:10px; z-index:10;}



The HTML is below:


<div id="container">
<b>Photographs<br />by kind permission of<br /><a href="http://www.simon-pole.co.uk/">Simon Pole</a></b>
<a class="gallery slidea" href="#nogo"><span><img src="spole/simonh1.jpg" alt="Warm to Cold" title="Warm to Cold" /><br />Warm to Cold</span></a>
<a class="gallery slideb" href="#nogo"><span><img src="spole/simonh2.jpg" alt="Wheels" title="Wheels" /><br />Wheels</span></a>
<a class="gallery slidec" href="#nogo"><span><img src="spole/simonh3.jpg" alt="Urban Squirrel" title="Urban Squirrel" /><br />Urban Squirrel</span></a>
<a class="gallery slided" href="#nogo"><span><img src="spole/simonh4.jpg" alt="Mother and Daughter" title="Mother and Daughter" /><br />Mother and Daughter</span></a>
<a class="gallery slidee" href="#nogo"><span><img src="spole/simonh5.jpg" alt="River Junk" title="River Junk" /><br />River Junk</span></a>

<a class="gallery slidef" href="#nogo"><span><img src="spole/simonv1.jpg" alt="Portrait One" title="Portrait One" /><br />Portrait One</span></a>
<a class="gallery slideg" href="#nogo"><span><img src="spole/simonv2.jpg" alt="Portrait Two" title="Portrait Two" /><br />Portrait Two</span></a>
<a class="gallery slideh" href="#nogo"><span><img src="spole/simonv3.jpg" alt="Portrait Three" title="Portrait Three" /><br />Portrait Three</span></a>
<a class="gallery slidei" href="#nogo"><span><img src="spole/simonv4.jpg" alt="Bow and Fiddle rock" title="Bow and Fiddle rock" /><br />Bow and Fiddle rock</span></a>
<a class="gallery slidej" href="#nogo"><span><img src="spole/simonv5.jpg" alt="The Pose" title="The Pose" /><br />The Pose</span></a>
</div>

[Snookerman]

Have you tried adding anchor tags (<a></a>) around it?

[irukandji]

Yeah, been there, done that...
using the <a></a> around the text I want makes the link drop outside the span(ed) text area.

See below:


<a class="gallery slidea" href="#nogo"><span><img src="cropped files/portfolio/webdesign/LHD.jpg" alt="Left Hand Designs, LLC." title="Left Hand Designs" /></span><span id="pic-text" class="pink">Left Hand Designs</span><span id="pic-text2">client: Left Hand Designs<br />
agency: Left Hand Designs<br />
programming: LHD</span><span id="pic-text3" class="pink" >www.lefthanddesigns.com</span></span></a>

Wondering if javascript can make this happen...

[Snookerman]

I just noticed that everything was inside anchor tags. Doesn't that mean that the text is already linked to something (#nogo)?

[irukandji]

yes it does.. #nogo

Somehow that #nogo calls the large image to be displayed at a specified location relative to
a.slidea span {left:0px; top:-295px;} section.

The nogo i think is coming from the <a class=""> inside the Thumb Container Div.