Hi,
In my website i am planning to do portfolio things in that i gave fade in fade for all images this is working with same size of image.But i have images like this sizes 500/300, 300/150 like if i give this images into portfolio that time if one image fading to another one means that time small size imGE is going top or bottom like that ,I alighed as center.
Please can anyone tell me how to fix this prloblem.
<!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>Untitled Document</title>
<script src="include/dw_event.js" type="text/javascript"></script>
<script src="include/dw_rotator.js" type="text/javascript"></script>
<script src="include/dw_rotator_aux.js" type="text/javascript"></script>
<script type="text/javascript">
var rotator1 = {
path: 'images/', // path to your images
id: 'r1', // id assigned in image tag
bTrans: true, // transition filter for IE Win
bTrans: true,
speed: 5400,
bMouse: true,
bRand: true,
images: ["logo_newark_mission.jpg", "logo_expert.jpg"]
}
function initRotator() {
// pass name of variable containing rotator properties
dw_Rotator.setup(rotator1);
}
dw_Event.add( window, 'load', initRotator);
</script>
<style type="text/css">
<!--
.style3 {color: #ffffff}
-->
</style>
<script type="text/javascript"><!--
var lastDiv = "";
function showDiv(divName) {
// hide last div
if (lastDiv) {
document.getElementById(lastDiv).className = "hiddenDiv";
}
//if value of the box is not nothing and an object with that name exists, then change the class
if (divName && document.getElementById(divName)) {
document.getElementById(divName).className = "visibleDiv";
lastDiv = divName;
}
}
//-->
</script>
<style type="text/css">
.hide { display:none; }
.div_center{text-align:center;}
.show {
position:absolute;
display:inline-table;
width: 792px;
top: 214px;
height: 290px;
left: 93px;
}
form#search { text-align:center; }
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.stylecursor{
cursor:hand;
}
</style>
<!-- JS for hiding tables and form validation-->
<script type="text/javascript">
function showSelect(theId)
{
var hiddenTables = document.getElementById("hiddenTables").getElementsByTagName("table");
for (var t = 0; t < hiddenTables.length; t++)
{
var tableClass = "hide";
if (hiddenTables[t].id == theId)
tableClass = "show";
hiddenTables[t].className = tableClass;
}
if(theId == "web")
{
document.getElementById("web").style.display = "block";
document.getElementById("logo").style.display = "none";
document.getElementById("print").style.display = "none";
document.getElementById("banner").style.display = "none";
}
if(theId == "logo")
{
document.getElementById("web").style.display = "none";
document.getElementById("logo").style.display = "block";
document.getElementById("print").style.display = "none";
document.getElementById("banner").style.display = "none";
}
if(theId == "print")
{
document.getElementById("web").style.display = "none";
document.getElementById("logo").style.display = "none";
document.getElementById("print").style.display = "block";
document.getElementById("banner").style.display = "none";
}
if(theId == "banner")
{
document.getElementById("web").style.display = "none";
document.getElementById("logo").style.display = "none";
document.getElementById("print").style.display = "none";
document.getElementById("banner").style.display = "block";
}
}
function action()
{
}
</script>
<style type="text/css" media="screen">
.hiddenDiv {
display: none;
}
.visibleDiv {
display: block;
border: 1px grey solid;
}
.color{
color:#D94111;}
.style7 {font-size: 12px}
--></style>
<style type="text/css">
.hideDisplayStyle {
visibility: hidden;
font-weight:bold;
color:#ff9900;}
</style>
</head>
<body bgcolor="#000000">
<table width="800" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="10" colspan="3" valign="bottom" bgcolor="#ffffff" style="background-image:url(images/top.gif); background-repeat:repeat-x;"> </td>
</tr>
<tr height="194" align="center">
<td height="347" colspan="3" align="center" valign="middle" bgcolor="#ffffff" >
<div id="hiddenTables">
<table border="0" id="web" align="center" class="hide">
<tr>
<td colspan="2" align="center" valign="middle"><iframe
src="web1.php" name="mainwnd"
marginwidth="0" marginheight="0" align="top" scrolling="No"
frameborder="0" id="mainwnd" allowtransparency="allowtransparency" noresize="noresize"
target="_top"></iframe></td>
</tr>
</table>
<div align="center" id="logo" class="hide">
<img src="images/logo_expert.jpg" align="absmiddle" name="r1" id="r1"></div>
</div></td>
</tr>
<tr>
<td valign="bottom" colspan="3" bgcolor="#000000" style="background-image:url(images/bottom.gif); background-repeat:repeat-x;"> </td>
</tr>
</table>
</body>
</html>
thanks in advance
Punithapary