shivboy
04-14-2003, 12:00 AM
hi,
i made this totally DOM-based thumbnail generating code. it works absolutely fine but at one place. Kindly visit this link:
http://www14.brinkster.com/spark2003/exp01.html
The problem here is that i do not want the vertical scroll bar to appear. In other words, I want all the images to appear horizontally only. But it is still not appearing that way, i do not understand why. Please help me with this. Any help is appreciated. Here's the code for the same:
<html>
<head>
<title></title>
<style>
.nStyle {top: 50px; left: 20px; height: 90; width: 300px; z-index: 3; position: absolute; overflow: scroll; clip: rect(0,300,90,0);}
.dStyle {z-index: 4; top: 1px; left: 1px; background-color: red; position: absolute; visibility: visible;}
.imStyle{margin-top: 5px; margin-left:10px;}
</style>
<script language="JavaScript">
<!--
var tHeight = 60;
var tWidth = 80;
var tBorder = 0;
var px = "px";
function makeThumb()
{
var img = new Array()
img[0] = "1.jpg"
img[1] = "2.jpg"
img[2] = "3.jpg"
img[3] = "4.jpg"
img[4] = "5.jpg"
var x = document.getElementById("oDiv");
x.style.visibility = "visible";
var w = 0;
x.innerHTML = '';
for(i=0;i<img.length;i++)
{
w += tWidth;
x.style.width = w + px;
x.innerHTML += '<a href="#"><img id="im'+i+'" class ="imStyle" src="'+img[i]+'" height="'+tHeight+'px" width="'+tWidth+'px" border="'+tBorder+'"></a>';
}
}
//--></script>
</head>
<body onload="makeThumb()">
<div id="sDiv" class="nStyle">
<div id="oDiv" class="dStyle"> </div>
</div>
</body>
</html>
Please help me with this.
thanx,
shivboy
i made this totally DOM-based thumbnail generating code. it works absolutely fine but at one place. Kindly visit this link:
http://www14.brinkster.com/spark2003/exp01.html
The problem here is that i do not want the vertical scroll bar to appear. In other words, I want all the images to appear horizontally only. But it is still not appearing that way, i do not understand why. Please help me with this. Any help is appreciated. Here's the code for the same:
<html>
<head>
<title></title>
<style>
.nStyle {top: 50px; left: 20px; height: 90; width: 300px; z-index: 3; position: absolute; overflow: scroll; clip: rect(0,300,90,0);}
.dStyle {z-index: 4; top: 1px; left: 1px; background-color: red; position: absolute; visibility: visible;}
.imStyle{margin-top: 5px; margin-left:10px;}
</style>
<script language="JavaScript">
<!--
var tHeight = 60;
var tWidth = 80;
var tBorder = 0;
var px = "px";
function makeThumb()
{
var img = new Array()
img[0] = "1.jpg"
img[1] = "2.jpg"
img[2] = "3.jpg"
img[3] = "4.jpg"
img[4] = "5.jpg"
var x = document.getElementById("oDiv");
x.style.visibility = "visible";
var w = 0;
x.innerHTML = '';
for(i=0;i<img.length;i++)
{
w += tWidth;
x.style.width = w + px;
x.innerHTML += '<a href="#"><img id="im'+i+'" class ="imStyle" src="'+img[i]+'" height="'+tHeight+'px" width="'+tWidth+'px" border="'+tBorder+'"></a>';
}
}
//--></script>
</head>
<body onload="makeThumb()">
<div id="sDiv" class="nStyle">
<div id="oDiv" class="dStyle"> </div>
</div>
</body>
</html>
Please help me with this.
thanx,
shivboy