PDA

View Full Version : Modifying pop up viewer link text



dasadler
04-15-2008, 07:15 PM
1) Script Title: Modifying pop up viewer link text

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/P20/#thumb

3) Describe problem: I have copied the code precisely except for minor modifications for size and position but when the image pops up, the text caption appears as a link (underlined). I would like the text to appear as it does in the example... that is, no underline. If you got to the DD example page and hover your mouse over the examples, you will se what I mean.

The page is question is:http://ai-dev.freehostia.com/cc/popupdev.html and I hope you can find where my code differs from the example on DD. There must be a difference but I cannot find it.

Also... on the DD example page, what does it mean in the HTML code where it says href="#thumb" ??

Nile
04-15-2008, 09:04 PM
Try changing your CSS to:


.thumbnail{
position: relative;
z-index: 0;
color: #990000;
text-decoration: none;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
text-decoration: none;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
width:200; height:200;
}

.thumbnail:hover span{ /*CSS for enlarged image background frame on hover*/
visibility: visible;
top: -50;
left: 260px; /*position where enlarged image should offset horizontally */
width:204; height:225;
text-decoration: none;
}

dasadler
04-15-2008, 11:28 PM
Cool... I tweaked it just a little so the page text was underlined but the popup text was not.

Nile
04-15-2008, 11:28 PM
Alright, glad to help you. :D
Nile