PDA

View Full Version : help with CSS image viewer



riptide
05-23-2007, 02:01 PM
1) Script Title: Image w/ description tooltip

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm

3) Describe problem: I had it before it was updated.

the text at the bottom of the image goes into a new line after every word
also there are problems when you have large images.
.thumbnail{
position: relative;
z-index: 0;
}

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

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #00CCFF;
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;
z-index:60;

}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
z-index:61;
}

riptide
05-23-2007, 02:05 PM
<!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=iso-8859-1" />
<title>riptide02</title>



<style type="text/css">








#toplogo {
background-color: #02113C;
position: absolute;
height: 160px;
width: 79%;
float:right;
z-index:2;
right:0px;
top:0px;
background-image: url(http://i3.photobucket.com/albums/y73/JadetheG/plamblue3.jpg);
background-repeat: repeat-x;




}







#topnav {
position: absolute;
z-index: 9;
left:21%;
top: 160px;
width:81%;
border:1px ridge #CC3300;
float:right;
height:2em;
font-family: Impact, Arial, Helvetica, sans-serif;
background-image: url(http://i3.photobucket.com/albums/y73/JadetheG/topnavimage.jpg);
color: #CC0000;
letter-spacing: 3px;


}
#navcell {
background-color: #17181D;
position: absolute;
width: 23%;
top:0%;
z-index:3;
left:0px;
height:70em;
background-repeat: no-repeat;
background-position: 0px 0px;
background-image: url(http://i3.photobucket.com/albums/y73/JadetheG/palmgray3.jpg);
}
#transtable {
border: dashed #CC0000;
position: absolute;
height: 360px;
width: 17%;
left: 1%;
top:34%;
z-index:7;
background-image: url(http://i3.photobucket.com/albums/y73/JadetheG/tabebase2.jpg);
background-position: center center;
padding-bottom:3px;

}
#stripe {
height: 70em;
width: 10px;
z-index:6;
background-color:#FFFF00;
background:url(http://i3.photobucket.com/albums/y73/JadetheG/yellowstripe2.jpg);
position:absolute;
left:22%;
top:0%;
}
.navbase {
position:relative;
width: 95%;
z-index:16;
height:310px;
}
.thumbnail{
position: relative;
z-index: 0;
}

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

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #00CCFF;
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;
z-index:60;

}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
z-index:61;
}

#sectab {
display:none;
z-index:7;
position: absolute;
top:50px;
left:12em;
height:120px;
width:120px;
background-color: #CCCCCC;
list-style-position: outside;
list-style-type: circle;
border:solid #EAC206 2px;
text-align: left;
background-image: url(http://i3.photobucket.com/albums/y73/JadetheG/sectabone.jpg);
overflow:hidden;

}
#catagory {
background-color: #680702;
position: relative;
height: 1em;
width: 100%;
z-index:5;
padding-top:1em;
font-family: Helvetica, Impact, "Comic Sans MS", Haettenschweiler;
color: #33FFFF;
font-size: 16px;
font-weight: bolder;
}


.mainhead { position: absolute;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #CCCC00;
top: 11em;
left:30em;

}
.maintext { position: absolute;
font-family: "Trebuchet MS", Univers, Helvetica, monospace;
font-size: 14px;
color: #8B0101;
top: 17em;
font-weight: 600;
margin-left:6em;
margin-right:1em;
left:16em;


}


#sectab2 {
position: absolute;
display: none;
left: 12em;
top: 97px;
z-index:10;
height:120px;
width:120px;
background-color: #CCCCCC;
list-style-position: outside;
list-style-type: circle;
border:solid #EAC206 2px;
text-align: left;
background-image: url(http://i3.photobucket.com/albums/y73/JadetheG/sectabtwo.jpg);
overflow:hidden;

}

#sectab3 { position: absolute;
display: none;
left: 12em;
top: 134px;
z-index:11;
height:120px;
width:120px;
background-color: #CCCCCC;
list-style-position: outside;
list-style-type: circle;
border:solid #EAC206 2px;
text-align: left;
background:url(http://i3.photobucket.com/albums/y73/JadetheG/sectabthree.jpg);
overflow:hidden;

}

#sectab4 { position: absolute;
display: none;
left: 12em;
top: 177px;
z-index:12;
height:120px;
width:120px;
background-color: #CCCCCC;
list-style-position: outside;
list-style-type: circle;
border:solid #EAC206 2px;
text-align: left;
background-image: url(http://i3.photobucket.com/albums/y73/JadetheG/sectabone.jpg);
overflow:hidden
}
#sectab5 { position: absolute;
display: none;
left: 12em;
top: 218px;
z-index:13;
height:120px;
width:120px;
background-color: #CCCCCC;
list-style-position: outside;
list-style-type: circle;
border:solid #EAC206 2px;
text-align: left;
background-image: url(http://i3.photobucket.com/albums/y73/JadetheG/sectabtwo.jpg);
overflow:hidden;
}
#sectab6 {position: absolute;
display: none;
top: 260px;
left: 12em;
z-index:14;
height:120px;
width:120px;
background-color: #CCCCCC;
list-style-position: outside;
list-style-type: circle;
border:solid #EAC206 2px;
text-align: left;
background:url(http://i3.photobucket.com/albums/y73/JadetheG/sectabthree.jpg);
overflow:hidden;
}


#sectab7 { position: absolute;
display: none;
left: 12em;
top: 303px;
z-index:15;
height:120px;
width:120px;
background-color: #CCCCCC;
list-style-position: outside;
list-style-type: circle;
border:solid #EAC206 2px;
text-align: left;
background-image: url(http://i3.photobucket.com/albums/y73/JadetheG/sectabone.jpg);
overflow:hidden;
}







#net {
position: relative;
z-index: 20;
height: 4em;
width: 35em;
bottom: 0px;
background: #02113C;
left:27em;
font-family: "Courier New", Courier, monospace;
font-size: 12px;
color: #CC3300;
text-align: center;
top:770px;



}

#ripbanner {
background-position: center center;
position: absolute;
z-index: 21;
left: 19%;
top: 4px;
}
#tableimage {
position: absolute;
left: 25%;
top: 269px;
border-color:#666666;
height: 450px;
margin-left: 2%;



}
</style>
</head>

<!--body-->

<body bgcolor="#02113C" alink="#0000FF" >








<!--top right cell with logo-->
<img id="ripbanner" src="riptide02logotest.jpg" align="middle" alt="an image of my banner"/>

<div id="toplogo" align="center">
</div>
<!--end of top cell-->



<!--ghost table. must fix glitch...-->



<div class="imagetable">
<table align="center" id="tableimage" width="70%" height="450px" cellpadding="20" cellspacing="0" border="4" frame="void" bordercolor="#666666" rules="all" summary="the table that all my images are in">






<tr> <td><a class="thumbnail" href="#"><img src="30364243.jpg" width="100px" height="66px" border="0" /><span><img src="30364243.jpg" /><br />Simply beautiful.</span></a>
</td> <td><a class="thumbnail" href="#"><img src="30364243.jpg" width="100px" height="66px" border="0" /><span><img src="30364243.jpg" /><br />Simply beautiful.</span></a>
</td> <td><a class="thumbnail" href="#"><img src="30364243.jpg" width="100px" height="66px" border="0" /><span><img src="30364243.jpg" /><br />Simply beautiful.</span></a>
</td> <td><a class="thumbnail" href="#"><img src="30364243.jpg" width="100px" height="66px" border="0" /><span><img src="30364243.jpg" /><br />Simply beautiful.</span></a>
</td> <td><a class="thumbnail" href="#"><img src="30364243.jpg" width="100px" height="66px" border="0" /><span><img src="30364243.jpg" /><br />Simply beautiful.</span></a>
</td> </tr>

<tr>
</td> <td><a class="thumbnail" href="#"><img src="30364243.jpg" width="100px" height="66px" border="0" /><span><img src="30364243.jpg" /><br />Simply beautiful.</span></a>
</td> <td><a class="thumbnail" href="#"><img src="30364243.jpg" width="100px" height="66px" border="0" /><span><img src="30364243.jpg" /><br />Simply beautiful.</span></a>
</td> <td><a class="thumbnail" href="#"><img src="30364243.jpg" width="100px" height="66px" border="0" /><span><img src="30364243.jpg" /><br />Simply beautiful.</span></a>
</td><td><a class="thumbnail" href="#"><img src="http://i3.photobucket.com/albums/y73/JadetheG/peekibnryuna26nj.gif" width="100px" height="66px" border="0" /><span><img src="http://i3.photobucket.com/albums/y73/JadetheG/peekibnryuna26nj.gif" /><br /><p>Yuna with gun banner </p>.</span></a>
</td> <td><a class="thumbnail" href="#"><img src="http://i3.photobucket.com/albums/y73/JadetheG/peekiavyuna21iy.gif" width="100px" height="66px" border="0" /><span><img src="http://i3.photobucket.com/albums/y73/JadetheG/peekiavyuna21iy.gif" /><br />Simply beautiful.</span></a> </tr> </table></div>





<!--mainsection-->






<h1 class="mainhead">Image page one</h1>
<p class="maintext">All images are random</p>



<!--end of mainsection-->






<!--end on netscapelinks-->







<!--the stripe between the divs yellow-->
<div id="stripe">
</div>
<!--end of the stripe-->

<!--end of whole page-->

</body>
</html>

riptide
05-23-2007, 07:23 PM
you don't have to look at my code. I can't upload the HTML. just look at the script on the site