Forgot Password ??

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

	Registered : 109,038

HOME > PHP > PHP Forum > JavaScript : mouseover แสดงรูปภาพขนาดใหญ่

[PHP] JavaScript : mouseover แสดงรูปภาพขนาดใหญ่

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

โปรแกรมเมอร์มือใหม่

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

พี่คับ ผมอยากจะเลือกรูปภาพโดยใช้ onmouseover แต่ไม่แสดงคับ

ผมอยากจะให้เมาส์ไปชี้ที่ภาพเล็กแล้วไปแสดงที่ภาพใหญ่อ่ะคับ ถ้าเป็น onclick มันได้คับ แต่พอเปลี่ยนเป็น onmouseover ไม่ได้อะคับ

ccc

Code (JavaScript)

<script language="javascript">
    function showPreview(ele)
    {
            $('#imgAvatar').attr('src', ele.value); // for IE
            if (ele.files && ele.files[0]) {
             
                var reader = new FileReader();
                 
                reader.onload = function (e) {
                    $('#imgAvatar').attr('src', e.target.result);
                }
 
                reader.readAsDataURL(ele.files[0]);
            }
    }
     
</script>
 
 
 
 <input onclick="showPreview(this)" value="img/b111.png" size="10" />

Tag : Java, JavaScript

Date : 2017-03-31 19:26:20

By : comfoy

View : 2576

Reply : 2

No. 1

Just Leave

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

ลองดูครับ

https://jsfiddle.net/Luxa11tc/2/

ประวัติการแก้ไข
2017-03-31 23:37:08

Date : 2017-03-31 23:35:58

By : promraungdet

No. 2

TC Admin

โพสกระทู้ ( 74,059 )
บทความ ( 838 )

Code (JavaScript)

<style type="text/css">
    .outer {
  width:100%;
  text-align:center;
}
.image > img {
  width:200px;
  height:200px;
  margin: 10px auto;
}
.list > img {
  cursor:pointer;
  width:100px;
  height:100px;
  border:1px solid #ccc;
  border-radius:3px;
  display:inline-block;
  margin:5px;
  padding:10px;
  background-color:#fff;
}
  </style>
 
  <title></title>
 
   
     
 
 
 
 
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
$(function(){
    $(".list > img").on('click', function(){
    var value = $(this).attr('src');
    $(".image > img").attr('src',value);
  });
});
}//]]> 
 
</script>
 
   
</head>
 
<body>
  <div class="outer">
  <div class="image">
    <img src="http://www.easternlivingguide.com/th/wp-content/uploads/2013/10/kasikornbank.jpg"/>
  </div>
  <div class="list">
    <img src="http://www.easternlivingguide.com/th/wp-content/uploads/2013/10/kasikornbank.jpg"/>
    <img src="http://bualuang.co.th/th/images/BBL_logo.png"/>
    <img src="http://static1-velaeasy.readyplanet.com/www.105beautyshop.com/images/content/original-1465118342131.png"/>
    <img src="https://www.job4thai.com/wp-content/uploads/job-bank-of-ayudhya-256x256.jpg"/>
  </div>
</div>
  

Date : 2017-04-02 20:25:02

By : mr.win

ค้นหาข้อมูล

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

Re : JavaScript : mouseover แสดงรูปภาพขนาดใหญ่

รายละเอียด

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

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

Notice

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

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

โดย

อีเมล์

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

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)