|
 |
| |
การใช้ id ร่วมกัน chrome ทดสอบผ่าน แต่ทำไมเปิดใน ie แล้วไม่ได้ละค๊ะ |
| |
 |
|
|
 |
 |
|
การใช้ id ร่วมกัน chrome ทดสอบผ่าน แต่ทำไมเปิดใน ie แล้วไม่ได้ละค๊ะ
คือเวลาเอาเมาส์ไปชี้ที่รูปนะค๊ะ ทดสอบกับ chrome ก็ ok ค๊ะ
แต่พอทดสอบกับ ie7 เวลาเอาเมาส์ไปชี้รูปที่ 2 fading มันไม่โชว์ค๊ะ จะแก้ไขอย่างไรได้ค๊ะ
( เท่าที่เคยทำมาคือต้องแยก id ทุกรูปเลยค๊ะ ie7 ถึงจะ ok แต่พอดีหนูต้องทำรูปเยอะมากเลยไม่อยากเขียน script ให้เยอะมากน่ะค๊ะ )
Code (PHP)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="web design, website development, web application development, print design, database development, ecommerce websites, search engine optimization, packaging design" />
<meta name="description" content="Tutorial demo showing how to add fading jQuery captions to an image thumbnail gallery" />
<meta name="robots" content="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
body,html,div,blockquote,img,label,p,h1,h2,h3,h4,h5,h6,pre,ul,ol,li,dl,dt,dd,form,a,fieldset,input,th,td{border:0;outline:none;margin:0;padding:0;}
body{height:100%;background:#fff;color:#1f1f1f;font-family:"Lucida Sans Unicode","Lucida Grande",Arial,Verdana,sans-serif;font-size:13px;padding:7px 0;}
ul{list-style:none;}
.text-center {text-align: center; padding: 10px 0;}
.wrap {width: 960px; margin: 0 auto;}
/* Tutorial CSS */
#gallery1 {}
#gallery1 li {
float: left;
margin: 0 3px 3px 0;
width: 314px;
height: 272px;
position: relative;
color: #fff;
}
#gallery1 li img {
padding: 6px;
background: #FFF;
border: 1px solid #ccc;
}
#gallery1 li h3 {
font: bold 11px Helvetica,Arial,sans-serif;
padding: 0;
margin: 0;
}
#gallery1 li span {
display: none;
font-size: 11px;
position: absolute;
bottom: 2px;
left: 2px;
padding: 5px;
background-color: #333;
opacity: 0.9;
width: 300px;
line-height: 1.2em;
}
#gallery2 {}
#gallery2 li {
float: left;
margin: 0 3px 3px 0;
width: 154px;
height: 154px;
position: relative;
color: #fff;
}
#gallery2 li img {
padding: 6px;
background: #FFF;
border: 1px solid #ccc;
}
#gallery2 li h3 {
font: bold 11px Helvetica,Arial,sans-serif;
padding: 0;
margin: 0;
}
#gallery2 li span {
display: none;
font-size: 11px;
position: absolute;
bottom: 2px;
left: 2px;
padding: 5px;
background-color: #333;
opacity: 0.9;
width: 140px;
line-height: 1.2em;
filter: alpha(opacity=90);
}
</style>
<script type="text/JavaScript">
$(document).ready(function() {
$('#gallery1 li').hover(
function(){$('span',this).fadeIn('fast');},
function(){$('span',this).fadeOut('fast');
});
});
</script>
<script type="text/JavaScript">
$(document).ready(function() {
$('#gallery2 li').hover(
function(){$('span',this).fadeIn('fast');},
function(){$('span',this).fadeOut('fast');
});
});
</script>
</head>
<body>
<div class="wrap">
<ul id="gallery1">
<li>
<img src="http://www.designchemical.com/lab/jquery/demo/images/gallery/thumb/img_3a.jpg" alt="" />
<span>
<h3>Image 1</h3>
Click here to View.
</span>
</li>
</ul>
<ul id="gallery1">
<li>
<img src="http://www.designchemical.com/lab/jquery/demo/images/gallery/thumb/img_3a.jpg" alt="" />
<span>
<h3>Image 2</h3>
Click here to View.
</span>
</li>
</ul>
<ul id="gallery2">
<li>
<img src="http://www.designchemical.com/lab/jquery/demo/images/gallery/thumb/img_3a.jpg" alt="" />
<span>
<h3>Image 2</h3>
Click here to View.
</span>
</li>
</ul>
</div>
</body>
</html>
Tag : PHP, MySQL
|
|
|
 |
 |
 |
 |
| Date :
2013-02-25 12:03:40 |
By :
dferru |
View :
770 |
Reply :
2 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
id ตามความหมายของมันคือเลขประจำตัวครับ แต่ละคนก็จะมีไม่เหมือนกัน ไม่ซ้ำกัน เป็นเอกลักษณ์ ใช้ร่วมกันไม่ได้
ลองเปลี่ยน id เป็น class แทนครับ (class ออกแบบมาให้ใช้ร่วมกันได้)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="web design, website development, web application development, print design, database development, ecommerce websites, search engine optimization, packaging design" />
<meta name="description" content="Tutorial demo showing how to add fading jQuery captions to an image thumbnail gallery" />
<meta name="robots" content="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
body,html,div,blockquote,img,label,p,h1,h2,h3,h4,h5,h6,pre,ul,ol,li,dl,dt,dd,form,a,fieldset,input,th,td{border:0;outline:none;margin:0;padding:0;}
body{height:100%;background:#fff;color:#1f1f1f;font-family:"Lucida Sans Unicode","Lucida Grande",Arial,Verdana,sans-serif;font-size:13px;padding:7px 0;}
ul{list-style:none;}
.text-center {text-align: center; padding: 10px 0;}
.wrap {width: 960px; margin: 0 auto;}
/* Tutorial CSS */
/* เปลี่ยนจาก id เป็น class (เปลี่ยนจาก # เป็น .) */
.gallery1 {}
.gallery1 li {
float: left;
margin: 0 3px 3px 0;
width: 314px;
height: 272px;
position: relative;
color: #fff;
}
.gallery1 li img {
padding: 6px;
background: #FFF;
border: 1px solid #ccc;
}
.gallery1 li h3 {
font: bold 11px Helvetica,Arial,sans-serif;
padding: 0;
margin: 0;
}
.gallery1 li span {
display: none;
font-size: 11px;
position: absolute;
bottom: 2px;
left: 2px;
padding: 5px;
background-color: #333;
opacity: 0.9;
width: 300px;
line-height: 1.2em;
}
.gallery2 {}
.gallery2 li {
float: left;
margin: 0 3px 3px 0;
width: 154px;
height: 154px;
position: relative;
color: #fff;
}
.gallery2 li img {
padding: 6px;
background: #FFF;
border: 1px solid #ccc;
}
.gallery2 li h3 {
font: bold 11px Helvetica,Arial,sans-serif;
padding: 0;
margin: 0;
}
.gallery2 li span {
display: none;
font-size: 11px;
position: absolute;
bottom: 2px;
left: 2px;
padding: 5px;
background-color: #333;
opacity: 0.9;
width: 140px;
line-height: 1.2em;
filter: alpha(opacity=90);
}
</style>
<script type="text/JavaScript">
$(document).ready(function() {
$('.gallery1 li').hover(
function(){$('span',this).fadeIn('fast');},
function(){$('span',this).fadeOut('fast');
});
$('.gallery2 li').hover( // ย้ายมาอยู่ในที่เดียวกัน จะได้ทำครั้งเดียว
function(){$('span',this).fadeIn('fast');},
function(){$('span',this).fadeOut('fast');
});
});
</script>
</script>
</head>
<body>
<div class="wrap">
<ul class="gallery1">
<li>
<img src="http://www.designchemical.com/lab/jquery/demo/images/gallery/thumb/img_3a.jpg" alt="" />
<span>
<h3>Image 1</h3>
Click here to View.
</span>
</li>
</ul>
<ul class="gallery1">
<li>
<img src="http://www.designchemical.com/lab/jquery/demo/images/gallery/thumb/img_3a.jpg" alt="" />
<span>
<h3>Image 2</h3>
Click here to View.
</span>
</li>
</ul>
<ul class="gallery2">
<li>
<img src="http://www.designchemical.com/lab/jquery/demo/images/gallery/thumb/img_3a.jpg" alt="" />
<span>
<h3>Image 2</h3>
Click here to View.
</span>
</li>
</ul>
</div>
</body>
</html>
|
ประวัติการแก้ไข
2013-02-25 12:13:56
| |
|
|
| |
| Date :
2013-02-25 12:11:58 |
By :
cookiephp |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 03
|
