แสดงข้อความบนรูปภาพพื้นหลังสีจางด้วย CSS และ jQuery

26 March 2009

CSS Code

<style type="text/css"> 
#overLayText{ 
    position:relative; 
    bottom:0px; 
    font-size:12px; 
    padding:5px; 
} 
</style> 

HTML Code

<div id="hilightDiv"> 
<img src="demo/big_img.jpg" /> 
<div id="overLayText"> 
เรียนรู้การทำอาหารจากมืออาชีพ ได้แล้ว โดยไม่เสียค่าใช้จ่ายใดๆ
</div> 
</div> 

Javascript Code

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    var Tw=$("#hilightDiv img").width(); 
    var Tw2=Tw-$("#overLayText").css("padding"); 
    $("#hilightDiv").width(Tw);     
    var Th=$("#overLayText").height()+10; 
    $("#overLayText").css({ 
        "background-color":"#000000", 
        "color":"#FFFFFF", 
        "top":-Th, 
        opacity:0.75 
    }); 
}); 
</script> 

ตัวอย่าง

เรียนรู้การทำอาหารจากมืออาชีพ ได้แล้ว โดยไม่เสียค่าใช้จ่ายใดๆ







บทความในหมวดที่่น่าสนใจ อื่นๆ jQuery Learning

16 Nov 08 jQuery กับการจำกัดการเลือก checkbox อ่าน 4864 27 Mar 10 ทำให้ เลือก list box แล้วแสดง checkbox ด้วย jQuery อ่าน 4708 22 Nov 08 ซ่อนและแสดงเนื้อหาแบบหีบเพลง (accordion) ด้วย jquery อย่างง่าย อ่าน 4707 27 Aug 10 เทคนิค jQuery สร้าง preloading page หรือ loading image ก่อนแสดงหน้าเว็บ อ่าน 4682 06 Nov 09 สร้าง swap แบนเนอร์ effect แบบ fade ด้วย jQuery อย่างง่าย อ่าน 4672 20 Dec 09 ประยุกต์การทำ overlay เพจ กับกล่องข้อความ ด้วย jQuery อ่าน 4660 21 Jul 10 เทคนิค การเพิ่ม ลบ แถว ในตาราง รายการข้อมูล ด้วย jQuery อย่างง่าย อ่าน 4652 17 Nov 09 พิมพ์ข้อมูลใน textbox เพื่อ เพิ่มรายการใน listbox ด้วย jQuery อ่าน 4640 18 Oct 08 การประยุกต์ใช้ฟังก์ขัน after() กับ text input อ่าน 4559 19 Apr 10 สอน jQuery เพิ่มรูปภาพ ให้ตัวเลือก ใน listbox อ่าน 4550 19 Feb 09 สร้างกล่อง alert ข้อความเฉพาะตัว ด้วย jQuery และ CSS อย่างง่าย อ่าน 4541 24 Feb 10 เทคนิค สร้าง effect add to cart ด้วย jQuery อย่างง่าย อ่าน 4519 30 Dec 08 การใช้งาน ajax ใน jQuery อย่างง่าย อ่าน 4513 15 Feb 09 สร้างเมนู Accordion อย่างง่ายแบบที่ 2 ด้วย jQuery อ่าน 4440 25 Sep 08 การกำหนด selectors ด้วย jQuery เกี่ยวกับ form อ่าน 4347

บทความคนเข้าอ่านวันนี้

08 Oct 10 การอัพเดท สถานะบน facebook อัตโนมัติ แบบ graph api ด้วย php sdk อ่าน 3534 11 Aug 10 ปรับแต่ง facebook comments ด้วย css กำหนด style ให้เข้ากับเว็บ อ่าน 17763 02 May 10 ใช้งาน ajax ใน jQuery ดึงข้อมูลจากฐานข้อมูลมาแสดง ใน tooltip อ่าน 5973 02 Apr 09 สร้างรายการตัวเลือกให้กับ input text ด้วย jQuery อย่างง่าย อ่าน 4089 02 Jun 10 การหา ขนาด ความกว้าง ความสูงของ รูปภาพ ด้วย javascript อ่าน 2168 06 Mar 11 แนะนำ ปลั๊กอิน comment ตัวใหม่ของ facebook อ่าน 3274 25 Sep 08 ตรวจสอบระดับความปลอดภัยของ รหัสผ่านด้วย Ajax อ่าน 3928 17 Sep 10 กำหนด infowindow ให้กับตัว marker จำนวนมาก ใน google map อ่าน 2932 15 Sep 10 สร้าง ตัว marker ระบุตำแหน่ง ใน google map จำนวนมาก จาก xml ไฟล์ อ่าน 3726 12 Sep 10 การดึง attribute และค่าต่างๆ จาก xml ไฟล์ด้วย jQuery อย่างง่าย อ่าน 2426 05 Nov 08 CSS สร้างเมนูแนวนอน 2 ชั้นโดยไม่ใช้ javascript และตาราง table อ่าน 10257 25 Sep 08 ฟังก์ชั่นเกี่ยวกับ วันที่ เวลา ใน javascript อ่าน 7135 09 Jul 10 เพิ่มความเร็ว ให้กับการ cache ด้วย jquery ajax และ php cache class อ่าน 2299 04 Oct 10 รู้จัก และใช้งาน php sdk สำหรับ facebook เพิ่มขึ้น อ่าน 2856
จำนวนผู้เยี่ยมชม 784686
คน 2012 © Copyright ninenik.com. All rights reserved.