-
thank you very much for helping..but i have one problem more...how do i make that content apper in center not in left side? i make table align "center" but it is still in left side
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org">
<meta http-equiv="Content-Type" content= "text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href= "gallerystyle.css">
<!-- Do not edit IE conditional style below -->
<!--[if gte IE 5.5]>
<style type="text/css">
#motioncontainer {
width:expression(Math.min(this.offsetWidth, maxwidth)+'px');
}
</style>
<![endif]--><!-- End Conditional Style -->
<script type="text/javascript" src= "motiongallery.js">
/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Modified by Jscheuer1 for autowidth and optional starting positions
***********************************************/
</script>
<style type="text/css">
#dhtmltooltip {
position: absolute;
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
}
</style>
</head>
<body style="background-image:url(images/all_bg.jpg); margin:0px; padding:0px">
<td>
<tr align="center">
<div id="motioncontainer" align="center" style="background-image:url(images/all_bg.jpg);position:relative;overflow:hidden;">
<div id="motiongallery" align="center" style="position:absolute;left:0;top:0;white-space: nowrap;">
<nobr id="trueContainer">
<a href= "javascript:enlargeimage('soodus/1.html')"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt=""img src="soodus/1.jpg" border="1"></a>
<a href= "javascript:enlargeimage('http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif', 300, 300)"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt="" src= "http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border="1"></a>
<a href= "http://www.dynamicdrive.com"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt="" src= "http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border="1"></a>
<a href="#"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt="" src= "http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border="1"></a>
<a href="#"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt="" src= "http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border="1"></a>
<a href="#"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt="" src= "http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border="1"></a>
<a href="#"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt="" src= "http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border="1"></a>
<a href="#"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt="" src= "http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border="1"></a>
<a href="#"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt="" src= "http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border="1"></a>
</nobr>
</div>
</div>
</tr>
</td>
<div id="dhtmltooltip">
</div>
<script type="text/javascript">
/***********************************************
* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var offsetxpoint = -60 //Customize x offset of tooltip
var offsetypoint = 20 //Customize y offset of tooltip
var ie = document.all
var ns6 = document.getElementById && !document.all
var enabletip = false
if (ie || ns6)
var tipobj = document.all ? document.all["dhtmltooltip"] : document.getElementById ? document.getElementById("dhtmltooltip") : ""
function ietruebody(){
return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body
}
function ddrivetip(thetext, thecolor, thewidth){
if (ns6 || ie) {
if (typeof thewidth != "undefined")
tipobj.style.width = thewidth + "px"
if (typeof thecolor != "undefined" && thecolor != "")
tipobj.style.backgroundColor = thecolor
tipobj.innerHTML = thetext
enabletip = true
return false
}
}
function positiontip(e){
if (enabletip) {
var curX = (ns6) ? e.pageX : event.clientX + ietruebody().scrollLeft;
var curY = (ns6) ? e.pageY : event.clientY + ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge = ie && !window.opera ? ietruebody().clientWidth - event.clientX - offsetxpoint : window.innerWidth - e.clientX - offsetxpoint - 20
var bottomedge = ie && !window.opera ? ietruebody().clientHeight - event.clientY - offsetypoint : window.innerHeight - e.clientY - offsetypoint - 20
var leftedge = (offsetxpoint < 0) ? offsetxpoint * (-1) : -1000
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge < tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left = ie ? ietruebody().scrollLeft + event.clientX - tipobj.offsetWidth + "px" : window.pageXOffset + e.clientX - tipobj.offsetWidth + "px"
else
if (curX < leftedge)
tipobj.style.left = "5px"
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left = curX + offsetxpoint + "px"
//same concept with the vertical position
if (bottomedge < tipobj.offsetHeight)
tipobj.style.top = ie ? ietruebody().scrollTop + event.clientY - tipobj.offsetHeight - offsetypoint + "px" : window.pageYOffset + e.clientY - tipobj.offsetHeight - offsetypoint + "px"
else
tipobj.style.top = curY + offsetypoint + "px"
tipobj.style.visibility = "visible"
}
}
function hideddrivetip(){
if (ns6 || ie) {
enabletip = false
tipobj.style.visibility = "hidden"
tipobj.style.left = "-1000px"
tipobj.style.backgroundColor = ''
tipobj.style.width = ''
}
}
document.onmousemove = positiontip
</script>
</body>
</html>
-
You are not using tables in the correct way (understatement). If you just want to centre the whole thing, use css, in your case it would be:
Code:
<div id="motioncontainer" style="margin:auto;position:relative;overflow:hidden;">
To see why you should never use tables for layout, please read this article: http://www.hotdesign.com/seybold/everything.html
Good luck!
-
Is that possible that that content rotate all the time? and when mouse over then it stops and shows info like it is now. At the moment this content moves when you are with mouse in left side or right side. but i want that it rotate all the time..is that possible?
Thanks in advance ;)
PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org">
<meta http-equiv="Content-Type" content= "text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href= "gallerystyle.css">
<!-- Do not edit IE conditional style below -->
<!--[if gte IE 5.5]>
<style type="text/css">
#motioncontainer {
width:expression(Math.min(this.offsetWidth, maxwidth)+'px');
}
</style>
<![endif]--><!-- End Conditional Style -->
<script type="text/javascript" src= "motiongallery.js">
/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Modified by Jscheuer1 for autowidth and optional starting positions
***********************************************/
</script>
<style type="text/css">
#dhtmltooltip {
position: absolute;
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
}
</style>
</head>
<body style="background-image:url(images/all_bg.jpg); margin:0px; padding:0px">
<td>
<tr align="center">
<div id="motioncontainer" align="center" style="background-image:url(images/all_bg.jpg);position:relative;overflow:hidden;">
<div id="motiongallery" align="center" style="position:absolute;left:0;top:0;white-space: nowrap;">
<nobr id="trueContainer">
<a href= "javascript:enlargeimage('soodus/1.html')"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt=""img src="soodus/1.jpg" border="1"></a>
<a href= "javascript:enlargeimage('http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif', 300, 300)"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt="" src= "http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border="1"></a>
<a href= "http://www.dynamicdrive.com"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt="" src= "http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border="1"></a>
<a href="#"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt="" src= "http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border="1"></a>
<a href="#"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt="" src= "http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border="1"></a>
<a href="#"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt="" src= "http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border="1"></a>
<a href="#"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt="" src= "http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border="1"></a>
<a href="#"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt="" src= "http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border="1"></a>
<a href="#"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt="" src= "http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border="1"></a>
</nobr>
</div>
</div>
</tr>
</td>
<div id="dhtmltooltip">
</div>
<script type="text/javascript">
/***********************************************
* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var offsetxpoint = -60 //Customize x offset of tooltip
var offsetypoint = 20 //Customize y offset of tooltip
var ie = document.all
var ns6 = document.getElementById && !document.all
var enabletip = false
if (ie || ns6)
var tipobj = document.all ? document.all["dhtmltooltip"] : document.getElementById ? document.getElementById("dhtmltooltip") : ""
function ietruebody(){
return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body
}
function ddrivetip(thetext, thecolor, thewidth){
if (ns6 || ie) {
if (typeof thewidth != "undefined")
tipobj.style.width = thewidth + "px"
if (typeof thecolor != "undefined" && thecolor != "")
tipobj.style.backgroundColor = thecolor
tipobj.innerHTML = thetext
enabletip = true
return false
}
}
function positiontip(e){
if (enabletip) {
var curX = (ns6) ? e.pageX : event.clientX + ietruebody().scrollLeft;
var curY = (ns6) ? e.pageY : event.clientY + ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge = ie && !window.opera ? ietruebody().clientWidth - event.clientX - offsetxpoint : window.innerWidth - e.clientX - offsetxpoint - 20
var bottomedge = ie && !window.opera ? ietruebody().clientHeight - event.clientY - offsetypoint : window.innerHeight - e.clientY - offsetypoint - 20
var leftedge = (offsetxpoint < 0) ? offsetxpoint * (-1) : -1000
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge < tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left = ie ? ietruebody().scrollLeft + event.clientX - tipobj.offsetWidth + "px" : window.pageXOffset + e.clientX - tipobj.offsetWidth + "px"
else
if (curX < leftedge)
tipobj.style.left = "5px"
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left = curX + offsetxpoint + "px"
//same concept with the vertical position
if (bottomedge < tipobj.offsetHeight)
tipobj.style.top = ie ? ietruebody().scrollTop + event.clientY - tipobj.offsetHeight - offsetypoint + "px" : window.pageYOffset + e.clientY - tipobj.offsetHeight - offsetypoint + "px"
else
tipobj.style.top = curY + offsetypoint + "px"
tipobj.style.visibility = "visible"
}
}
function hideddrivetip(){
if (ns6 || ie) {
enabletip = false
tipobj.style.visibility = "hidden"
tipobj.style.left = "-1000px"
tipobj.style.backgroundColor = ''
tipobj.style.width = ''
}
}
document.onmousemove = positiontip
</script>
</body>
</html>
