minhhd
05-03-2008, 15:19
Em vừa làm một cái như thế này bằng IR sau đó em lấy code CSS nhưng em ko thể canh cho nó vào giữa được có pác nào giúp em với em xin cám ơn nhiều:
Code:
<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (Untitled-1) -->
<script type="text/javascript">
<!--
userAgent = window.navigator.userAgent;
browserVers = parseInt(userAgent.charAt(userAgent.indexOf("/")+1),10);
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function findElement(n,ly) {
if (browserVers < 4) return document[n];
var curDoc = ly ? ly.document : document;
var elem = curDoc[n];
if (!elem) {
for (var i=0;i<curDoc.layers.length;i++) {
elem = findElement(n,curDoc.layers[i]);
if (elem) return elem;
}
}
return elem;
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
var img;
for (var i=0; i<changeImages.arguments.length; i+=2) {
img = null;
if (document.layers) {
img = findElement(changeImages.arguments[i],0);
}
else {
img = document.images[changeImages.arguments[i]];
}
if (img) {
img.src = changeImages.arguments[i+1];
}
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
home_over = newImage("images/home-over.gif");
link1_over = newImage("images/link1-over.gif");
link2_over = newImage("images/link2-over.gif");
link3_over = newImage("images/link3-over.gif");
link4_over = newImage("images/link4-over.gif");
preloadFlag = true;
}
}
// -->
</script>
<!-- End Preload Script -->
<!-- ImageReady Styles (Untitled-1) -->
<style type="text/css">
table{
table-layout: automatic
}
<!--
<table>
<tr>
<td>
#Table_01 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:600px;
}
#shark-01 {
position:absolute;
left:0px;
top:0px;
width:90px;
height:600px;
}
#shark-02 {
position:absolute;
left:90px;
top:0px;
width:710px;
height:26px;
}
#home {
position:absolute;
left:90px;
top:26px;
width:150px;
height:24px;
}
#link1 {
position:absolute;
left:240px;
top:26px;
width:139px;
height:24px;
}
#link2 {
position:absolute;
left:379px;
top:26px;
width:141px;
height:24px;
}
#link3 {
position:absolute;
left:520px;
top:26px;
width:130px;
height:24px;
}
#link4 {
position:absolute;
left:650px;
top:26px;
width:150px;
height:24px;
}
#shark-08 {
position:absolute;
left:90px;
top:50px;
width:710px;
height:550px;
}
-->
</style>
<!-- End ImageReady Styles -->
</head>
<body onload="preloadImages();" style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (Untitled-1) -->
<table align=center>
<tr>
<td>
<div id="Table_01">
<div id="shark-01">
<img src="images/shark_01.gif" width="90" height="600" alt="">
</div>
<div id="shark-02">
<img src="images/shark_02.jpg" width="710" height="26" alt="">
</div>
<div id="home">
<a href="home.htm" target="_parent"
onmouseover="changeImages('home', 'images/home-over.gif'); return true;"
onmouseout="changeImages('home', 'images/home.gif'); return true;"
onmousedown="changeImages('home', 'images/home-over.gif'); return true;"
onmouseup="changeImages('home', 'images/home-over.gif'); return true;">
<img name="home" src="images/home.gif" width="150" height="24" border="0" alt=""></a>
</div>
<div id="link1">
<a href="link1.htm" target="_parent"
onmouseover="changeImages('link1', 'images/link1-over.gif'); return true;"
onmouseout="changeImages('link1', 'images/link1.gif'); return true;"
onmousedown="changeImages('link1', 'images/link1-over.gif'); return true;"
onmouseup="changeImages('link1', 'images/link1-over.gif'); return true;">
<img name="link1" src="images/link1.gif" width="139" height="24" border="0" alt=""></a>
</div>
<div id="link2">
<a href="link2.htm" target="_parent"
onmouseover="changeImages('link2', 'images/link2-over.gif'); return true;"
onmouseout="changeImages('link2', 'images/link2.gif'); return true;"
onmousedown="changeImages('link2', 'images/link2-over.gif'); return true;"
onmouseup="changeImages('link2', 'images/link2-over.gif'); return true;">
<img name="link2" src="images/link2.gif" width="141" height="24" border="0" alt=""></a>
</div>
<div id="link3">
<a href="link3.htm"
onmouseover="changeImages('link3', 'images/link3-over.gif'); return true;"
onmouseout="changeImages('link3', 'images/link3.gif'); return true;"
onmousedown="changeImages('link3', 'images/link3-over.gif'); return true;"
onmouseup="changeImages('link3', 'images/link3-over.gif'); return true;">
<img name="link3" src="images/link3.gif" width="130" height="24" border="0" alt=""></a>
</div>
<div id="link4">
<a href="link4.htm" target="_parent"
onmouseover="changeImages('link4', 'images/link4-over.gif'); return true;"
onmouseout="changeImages('link4', 'images/link4.gif'); return true;"
onmousedown="changeImages('link4', 'images/link4-over.gif'); return true;"
onmouseup="changeImages('link4', 'images/link4-over.gif'); return true;">
<img name="link4" src="images/link4.gif" width="150" height="24" border="0" alt=""></a>
</div>
<div id="shark-08">
<img src="images/shark_08.jpg" width="710" height="550" alt="">
</div>
</div>
</td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
Code:
<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (Untitled-1) -->
<script type="text/javascript">
<!--
userAgent = window.navigator.userAgent;
browserVers = parseInt(userAgent.charAt(userAgent.indexOf("/")+1),10);
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function findElement(n,ly) {
if (browserVers < 4) return document[n];
var curDoc = ly ? ly.document : document;
var elem = curDoc[n];
if (!elem) {
for (var i=0;i<curDoc.layers.length;i++) {
elem = findElement(n,curDoc.layers[i]);
if (elem) return elem;
}
}
return elem;
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
var img;
for (var i=0; i<changeImages.arguments.length; i+=2) {
img = null;
if (document.layers) {
img = findElement(changeImages.arguments[i],0);
}
else {
img = document.images[changeImages.arguments[i]];
}
if (img) {
img.src = changeImages.arguments[i+1];
}
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
home_over = newImage("images/home-over.gif");
link1_over = newImage("images/link1-over.gif");
link2_over = newImage("images/link2-over.gif");
link3_over = newImage("images/link3-over.gif");
link4_over = newImage("images/link4-over.gif");
preloadFlag = true;
}
}
// -->
</script>
<!-- End Preload Script -->
<!-- ImageReady Styles (Untitled-1) -->
<style type="text/css">
table{
table-layout: automatic
}
<!--
<table>
<tr>
<td>
#Table_01 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:600px;
}
#shark-01 {
position:absolute;
left:0px;
top:0px;
width:90px;
height:600px;
}
#shark-02 {
position:absolute;
left:90px;
top:0px;
width:710px;
height:26px;
}
#home {
position:absolute;
left:90px;
top:26px;
width:150px;
height:24px;
}
#link1 {
position:absolute;
left:240px;
top:26px;
width:139px;
height:24px;
}
#link2 {
position:absolute;
left:379px;
top:26px;
width:141px;
height:24px;
}
#link3 {
position:absolute;
left:520px;
top:26px;
width:130px;
height:24px;
}
#link4 {
position:absolute;
left:650px;
top:26px;
width:150px;
height:24px;
}
#shark-08 {
position:absolute;
left:90px;
top:50px;
width:710px;
height:550px;
}
-->
</style>
<!-- End ImageReady Styles -->
</head>
<body onload="preloadImages();" style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (Untitled-1) -->
<table align=center>
<tr>
<td>
<div id="Table_01">
<div id="shark-01">
<img src="images/shark_01.gif" width="90" height="600" alt="">
</div>
<div id="shark-02">
<img src="images/shark_02.jpg" width="710" height="26" alt="">
</div>
<div id="home">
<a href="home.htm" target="_parent"
onmouseover="changeImages('home', 'images/home-over.gif'); return true;"
onmouseout="changeImages('home', 'images/home.gif'); return true;"
onmousedown="changeImages('home', 'images/home-over.gif'); return true;"
onmouseup="changeImages('home', 'images/home-over.gif'); return true;">
<img name="home" src="images/home.gif" width="150" height="24" border="0" alt=""></a>
</div>
<div id="link1">
<a href="link1.htm" target="_parent"
onmouseover="changeImages('link1', 'images/link1-over.gif'); return true;"
onmouseout="changeImages('link1', 'images/link1.gif'); return true;"
onmousedown="changeImages('link1', 'images/link1-over.gif'); return true;"
onmouseup="changeImages('link1', 'images/link1-over.gif'); return true;">
<img name="link1" src="images/link1.gif" width="139" height="24" border="0" alt=""></a>
</div>
<div id="link2">
<a href="link2.htm" target="_parent"
onmouseover="changeImages('link2', 'images/link2-over.gif'); return true;"
onmouseout="changeImages('link2', 'images/link2.gif'); return true;"
onmousedown="changeImages('link2', 'images/link2-over.gif'); return true;"
onmouseup="changeImages('link2', 'images/link2-over.gif'); return true;">
<img name="link2" src="images/link2.gif" width="141" height="24" border="0" alt=""></a>
</div>
<div id="link3">
<a href="link3.htm"
onmouseover="changeImages('link3', 'images/link3-over.gif'); return true;"
onmouseout="changeImages('link3', 'images/link3.gif'); return true;"
onmousedown="changeImages('link3', 'images/link3-over.gif'); return true;"
onmouseup="changeImages('link3', 'images/link3-over.gif'); return true;">
<img name="link3" src="images/link3.gif" width="130" height="24" border="0" alt=""></a>
</div>
<div id="link4">
<a href="link4.htm" target="_parent"
onmouseover="changeImages('link4', 'images/link4-over.gif'); return true;"
onmouseout="changeImages('link4', 'images/link4.gif'); return true;"
onmousedown="changeImages('link4', 'images/link4-over.gif'); return true;"
onmouseup="changeImages('link4', 'images/link4-over.gif'); return true;">
<img name="link4" src="images/link4.gif" width="150" height="24" border="0" alt=""></a>
</div>
<div id="shark-08">
<img src="images/shark_08.jpg" width="710" height="550" alt="">
</div>
</div>
</td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>