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/dynamici...agetooltip.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

Code:


	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=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

Thread: help with CSS image viewer

Thread Tools

Search Thread

help with CSS image viewer

Bookmarks

Bookmarks

Posting Permissions