CSS Popup Image Viewer

**Dazza30** · 12-11-2008, 01:47 PM

1) Script Title: CSS Popup Image Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...-image-viewer/

3) Describe problem: I need to be able to add a buy now link and a more offers link to the pop up image text, so far ive tried but with no luck can anyone assist?

**Snookerman** · 12-11-2008, 02:23 PM

That is because you cannot have an anchor inside another anchor. Try replacing the anchor with a div container:

HTML Code:

<div class="thumbnail">Hover to view image
<span><img src="http://www.google.com/intl/en_ALL/images/logo.gif" /><br />
Image Text <a href="http://www.google.com">Google</a></span>
</div>

**Dazza30** · 12-11-2008, 04:00 PM

Originally Posted by Snookerman

That is because you cannot have an anchor inside another anchor. Try replacing the anchor with a div container:

HTML Code:

<div class="thumbnail">Hover to view image
<span><img src="http://www.google.com/intl/en_ALL/images/logo.gif" /><br />
Image Text <a href="http://www.google.com">Google</a></span>
</div>

Thanks for your assistance Snookerman.

But i still have a problem, when i change the anchor to a DIV it wont validate because im coding in XHTML 1.0 Transitional and the class="thumbnail" is not allowed to be placed within a DIV tag.

I went a head an tried it anyway, but instead of lining up in three rows of three the images displayed in a centered single row.

**Snookerman** · 12-11-2008, 04:13 PM

Originally Posted by Dazza30

But i still have a problem, when i change the anchor to a DIV it wont validate because im coding in XHTML 1.0 Transitional and the class="thumbnail" is not allowed to be placed within a DIV tag.

What? You can place any class in a div tag. You must have made some other mistake. Here is the code in a xhtml 1.0 transitional page, go ahead and validate it:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="thumbnail">Hover to view image <span><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" /><br />
  Image Text <a href="http://www.google.com">Google</a></span> </div>
</body>
</html>

Please post a link to your site, or attach your code, and I will try to help you validate it.

**Dazza30** · 12-11-2008, 04:29 PM

I highlighted the wrong part of the code.

Heres the pop up image viewer html im working with and the offending code highlighted in red, which wont validate when i change the a tag to a div.

<div class="style24" style="left: 0px; top: 10px">

<a class="thumbnail" href="#thumb"><img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></a>

<a class="thumbnail" href="#thumb"><img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></a>

<a class="thumbnail" href="#thumb">
<img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></a>

<br/>
<br/>
<a class="thumbnail" ><img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></a>

<a class="thumbnail" href="#thumb">
<img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></a>

<a class="thumbnail" href="#thumb">
<img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></a>

<br/>
<br/>
<a class="thumbnail" href="#thumb"><img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></a>

<a class="thumbnail" href="#thumb">
<img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></a>

<a class="thumbnail" href="#thumb">
<img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></a>

<br />

</div>

**Snookerman** · 12-11-2008, 04:30 PM

Could you post the code after you have changed it, i.e. the one that won't validate?

**Dazza30** · 12-11-2008, 04:39 PM

This time i changed the a tags to divs and highlighted the offending code in red again, but i also added the hyper link where i need it to go.

<div class="style24" style="left: 0px; top: 10px">

<div class="thumbnail" href="#thumb"><img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />Some text<a href="www.myhomepage.com" target="_blank">some text</a></span></div>

<div class="thumbnail" href="#thumb"><img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></div>

<div class="thumbnail" href="#thumb">
<img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></div>

<br/>
<br/>
<div class="thumbnail" ><img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></div>

<div class="thumbnail" href="#thumb">
<img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></div>

<div class="thumbnail" href="#thumb">
<img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></div>

<br/>
<br/>
<div class="thumbnail" href="#thumb"><img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></div>

<div class="thumbnail" href="#thumb">
<img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></div>

<div class="thumbnail" href="#thumb">
<img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></div>

<br />

</div>

**Snookerman** · 12-11-2008, 04:41 PM

Your problem is the part you marked in red. You cannot have a href value for div containers, only for anchors.

**Dazza30** · 12-11-2008, 04:48 PM

Originally Posted by Snookerman

Your problem is the part you marked in red. You cannot have a href value for div containers, only for anchors.

Problem is though the href part of the code is suppost to be there, if i cant change the a tag and get the images to dispaly properly im going to have to scrap it.