Forgot Password ??

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

	Registered : 109,035

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

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 : 2488

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,058 )
บทความ ( 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 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 00