Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,027

HOME > PHP > PHP Forum > ทำไม IE7 tag <a> ของ รูปภาพใหญ่ คลิ๊กไม่ได้น่ะครับ

ทำไม IE7 tag <a> ของ รูปภาพใหญ่ คลิ๊กไม่ได้น่ะครับ

เริ่มหัวข้อใหม่

โพสกระทู้ ( 471 )
บทความ ( 0 )

Code (PHP)

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  
  
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  
  <style type="text/css">
    body { background-color:#fff; position:relative; font-size:14px; font-family:arial;}
.mask { float:left; margin:40px; width:810px; height:310px; overflow:hidden;  }
ul.images { position:relative; top:0px;left:0px; }
  ul.images li { position:absolute; top:0px;left:0px; }

ul.triggers { position:absolute; top:291px; left:614px; }
    ul.triggers li { 
        float:left; margin:0 5px; font: bold 16px arial; cursor:pointer;
        background-color:#ccc; color:#000; padding:10px;
    }ul.triggers li.selected {background-color:red; color:#000;}


.control {position:absolute; top: 380px; color:#fff; cursor:pointer;}
.prev { left:120px; }
.next { left:180px; }
  </style>
  


<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;
var target;

triggers.first().addClass('selected');
images.hide().first().show();

function sliderResponse(target) {
    images.fadeOut(3000).eq(target).fadeIn(3000);
    triggers.removeClass('selected').eq(target).addClass('selected');
}

triggers.click(function() {
    if ( !$(this).hasClass('selected') ) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});
$('.next').click(function() {
    target = $('ul.triggers li.selected').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    resetTiming();
});
$('.prev').click(function() {
    target = $('ul.triggers li.selected').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
    resetTiming();
});
function sliderTiming() {
    target = $('ul.triggers li.selected').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
}
var timingRun = setInterval(function() { sliderTiming(); },7000);
function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function() { sliderTiming(); },7000);
}
});//]]>  

</script>


</head>
<body>
<div class="mask">
<ul class="images">
   <a href="#">
   <li>
      <img src="img path 1">
   </li>
</a>
   <a href="#">
   <li>
      <img src="img path 2">
   </li>
</a>
   <a href="#">
    <li>
      <img src="img path 3">
   </li>
</a>
   <a href="#">
   <li>
      <img src="img path 4">
   </li>
</a>
   <a href="#">
   <li>
      <img src="img path 5">
   </li>
</a>
</ul>
</div>

<ul class="triggers">
   <li>0</li>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
</ul>
<span class="control prev">Prev</span>
<span class="control next">Next</span>

</body>
</html>

Tag : PHP, MySQL

Date : 2013-08-20 00:03:55

By : peap

View : 698

Reply : 5

No. 1

Mongkon.k

โพสกระทู้ ( 3,844 )
บทความ ( 0 )

ไม่ได้ยังไงครับ แล้วมันแสดงรูปภาพไม๊ครับ เห็นใส่พาร์ท img path 1-5

Date : 2013-08-20 08:34:10

By : mangkunzo

No. 2

โพสกระทู้ ( 471 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 1 เขียนโดย : mangkunzo เมื่อวันที่ 2013-08-20 08:34:10

รายละเอียดของการตอบ ::

ยังไงลอง ใส่ path image แล้วทดสอบครับ คือปกติเวลาเอาเมาส์ไปไว้ตรงรูปภาพสไลด์ จากสามารถคลิ๊กลิงค์ได้ แต่พอทดสอบกับ IE กลับคลิ๊กลิงค์ไม่ได้ซะงั้น แนะนำหน่อยนะครับ

อันนี้โค๊ดเต็มๆ ครับ

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  
  
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  
  <style type="text/css">
    body { background-color:#fff; position:relative; font-size:14px; font-family:arial;}
.mask { float:left; margin:40px; width:810px; height:310px; overflow:hidden;  }
ul.images { position:relative; top:0px;left:0px; }
  ul.images li { position:absolute; top:0px;left:0px; }

ul.triggers { position:absolute; top:291px; left:614px; }
    ul.triggers li { 
        float:left; margin:0 5px; font: bold 16px arial; cursor:pointer;
        background-color:#ccc; color:#000; padding:10px;
    }ul.triggers li.selected {background-color:red; color:#000;}


.control {position:absolute; top: 380px; color:#fff; cursor:pointer;}
.prev { left:120px; }
.next { left:180px; }
  </style>
  


<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;
var target;

triggers.first().addClass('selected');
images.hide().first().show();

function sliderResponse(target) {
    images.fadeOut(3000).eq(target).fadeIn(3000);
    triggers.removeClass('selected').eq(target).addClass('selected');
}

triggers.click(function() {
    if ( !$(this).hasClass('selected') ) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});
$('.next').click(function() {
    target = $('ul.triggers li.selected').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    resetTiming();
});
$('.prev').click(function() {
    target = $('ul.triggers li.selected').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
    resetTiming();
});
function sliderTiming() {
    target = $('ul.triggers li.selected').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
}
var timingRun = setInterval(function() { sliderTiming(); },7000);
function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function() { sliderTiming(); },7000);
}
});//]]>  

</script>


</head>
<body>
<div class="mask">
<ul class="images">
   <a href="#">
   <li>
      <img src="http://image.ohozaa.com/i/8ab/cTg6WZ.png">
   </li>
</a>
   <a href="#">
   <li>
      <img src="http://image.ohozaa.com/i/aa2/OUICdi.png">
   </li>
</a>
   <a href="#">
    <li>
      <img src="http://image.ohozaa.com/i/a4e/pyZIS3.png">
   </li>
</a>
   <a href="#">
   <li>
      <img src="http://image.ohozaa.com/i/653/HuUrwT.png">
   </li>
</a>
   <a href="#">
   <li>
      <img src="http://image.ohozaa.com/i/93c/fm3chW.png">
   </li>
</a>
</ul>
</div>

<ul class="triggers">
   <li>0</li>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
</ul>
<span class="control prev">Prev</span>
<span class="control next">Next</span>

</body>
</html>

ประวัติการแก้ไข
2013-08-20 08:54:08
2013-08-20 08:56:33

Date : 2013-08-20 08:46:43

By : peap

No. 3

Mongkon.k

โพสกระทู้ ( 3,844 )
บทความ ( 0 )

น่าจะเป็นที่ IE7 น่ะครับ

Date : 2013-08-20 09:53:38

By : mangkunzo

No. 4

ฟูฟู

โพสกระทู้ ( 99 )
บทความ ( 0 )

ลองเอา <li><a>.....</a></li> ดูครับ

Date : 2013-08-20 11:07:48

By : jackkichan

No. 5

โพสกระทู้ ( 471 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 4 เขียนโดย : jackkichan เมื่อวันที่ 2013-08-20 11:07:48

รายละเอียดของการตอบ ::

ได้แล้วครับ ขอบคุณครับ

Date : 2013-08-20 11:59:51

By : peap

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ทำไม IE7 tag <a> ของ รูปภาพใหญ่ คลิ๊กไม่ได้น่ะครับ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก