buonkhongem

Hiển thị các bài đăng có nhãn THỦ THUẬT ẢNH. Hiển thị tất cả bài đăng

Home » Posts filed under THỦ THUẬT ẢNH

TẠO SLIDESHOW ẢNH (Kiểu 7)

Người đăng: buonkhongem on Thứ Ba, 25 tháng 3, 2014

Giống các kiểu slideshow khác đã được chia sẻ TẠI ĐÂY. Slideshow kiểu 7 này cũng không chiếm không gian của Blog, các hình ảnh của bạn được trình chiếu gọn gàng trong một khung ảnh, đặc biệt của slideshow này là hiệu ứng rơi ảnh khá ngộ nghĩnh. Lúc bắt đầu slideshow sẽ tự trình chiếu...Phía dưới có các thẻ XEM LẠI, XEM TRƯỚC VÀ STOP.
Lưu ý khi slideshow đang được trình chiếu tự động, bạn bấm một trong các thẻ phía dưới sẽ làm mất đi chế độ autostart của slideshow...

Mời các bạn bấm vào Xem thử phía dưới để xem trước slideshow này nha.

Xem thử

Bạn chỉ việc đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML/Javacript (nếu bạn chưa biết các thêm HTML/Javacript thì mời bạn xem TẠI ĐÂY). Sau đó copy tất các code phía dưới dán vào.

Bây giờ, bạn có thể thay đổi các dòng lệnh màu đỏ, trong đó:

Width: chiều rộng của khung trình chiếu

Height: chiều cao của khung trình chiếu

Margin-left: khoảng cách từ lề trái đến khung trình chiếu (khoảng cách này nếu bạn để ngắn quá thì hiệu ứng rơi ảnh sẽ không được đẹp).

Và các dòng lệnh màu xanh là link ảnh.

Cuối cùng bấm Lưu là xong.

Ở code trên tôi làm 7 ảnh, nếu bạn muốn nhiều ảnh hơn nữa thì dán đoạn code:

<div class="inner">
<img src="link ảnh" />
</div>

lên phía trên thẻ đóng </div> cuối cùng.

Để slideshow được đẹp, bạn nên resize các ảnh có cùng kích thước với khung trình chiếu.

Chúc bạn thành công

More about →

TẠO SLIDESHOW (Kiểu 6)

Người đăng: buonkhongem on Thứ Năm, 26 tháng 9, 2013

Ở kiểu 6 này, dưới slideshow ảnh có các thẻ bấm bao gồm: XEM TIẾP, QUAY LẠI và XEM LẠI TỪ ĐÂU...

Trên đầu slideshow có dòng chữ chạy để các bạn giới thiệu mô tả vài nét về slideshow, ngoài ra các bạn có thể điều chỉnh kích thước ảnh mà mình mong muốn (không lệ thuộc vào ảnh gốc) và tốc độ load ảnh rất nhanh. Slideshow này có thể add các định dạng ảnh (ảnh động hoặc ảnh tĩnh đều được).

Mời các bạn xem thử slideshow phía dưới nha.

Các hình ảnh động dưới đây được lấy từ trang anhdepblog.blogspot.com. Cám ơn các bạn đã ghé tham quan và ủng hộ dunghennessy. Chúc các bạn luôn vui khoẻ và hạnh phúc

Trở lại từ đâu

Để làm được như vậy, các bạn đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML/Javacript (nếu chưa biết cách thêm tiện ích HTML mời các bạn xem TẠI ĐÂY), sau đó copy đoạn code phía dưới dán vào.

<center><table border="0" cellpadding="0">
<caption><marquee onmouseover="this.stop();" onmouseout="this.start();" behavior="scroll" direction="left" bgcolor="#FFE87C" scrollamount=3> <span style="font-weight:bold;font-size:150%;color: rgb(#ffffff,#7D053F, 0);">Lời giới thiệu về slideshow ghi tại đây</span>
</marquee>
</caption>
<tr>
    <td width="100%"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW4-eae7zZqyD25ydcvfo7zjzhPBu-mzMXkJQw8Hrc8epuL1-jDt01Kmo8jE8fSnAXb8oswc4D64nmsZDlNuuhQpSgJuQM6y-onm2B5F3uOUQxnQdqHRs2rXlsM3lkt1v9CUWlIeOhG0Lo/s1600/0014.gif" width="300" height="400" name="photoslider" /></td>
</tr>
<tr>
    <td width="100%"><form method="POST" name="rotater">
      <div align="center"><center><p><script language="JavaScript1.1">
var photos=new Array()
var which=0

/*Change the below variables to reference your own images. You may have as many images in the slider as you wish*/
photos[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW4-eae7zZqyD25ydcvfo7zjzhPBu-mzMXkJQw8Hrc8epuL1-jDt01Kmo8jE8fSnAXb8oswc4D64nmsZDlNuuhQpSgJuQM6y-onm2B5F3uOUQxnQdqHRs2rXlsM3lkt1v9CUWlIeOhG0Lo/s1600/0014.gif"
photos[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibe9ss8LPP-KOaLOk3r1abQH2CL9aGGIL7hxWWIyXgrLM0T4rjOEw0RvJ5LdVB8jFaVqFvDOH9TJwI1blkg5gfRxbOgEPhASjE5kgCY_Yu44iml488AeSkMmcLD6Nm6lvZq2iq8hZDZyQ/s1600/0355.gif"
photos[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHHOCxoCCHSrx2rYKQcshNXlO5HMVhuA8_rGH3Ee-TQUiz8jUJLqgI1yEIsqcZS_K3aco0Xab7jNNCAcs7JDMogejPAIntIYH_BuXQ-sHpv3TiKyr5_6DVHSR0Mw13oeXD23zoZvQrfuqq/s1600/0039.gif"
photos[3]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Bj00nSL_KOrHbeVKHrNHDYq3AClKEWQ5XS7IQTOrGfE-309beS0HNjDL3Ll3jMgnU-qDsHu836VPkrzLGq636r0w1dXbZj2pBl8Fwbl559RAS3TCLMvnTvDc5fL8ysYky1hsSCEo3Po/s1600/0210.gif"
photos[4]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfwjfn2KIUipgsfsu6UtbcpwrQ-f0HadzaVoT3olY8gYxz85lre-mY_S3KNysJUQC_CQs69jog7W4OjDrz0kNYohoutyUCN3t18U8WRUtHL3_puo43bremb-1u3gl-s5E9uYiELmo95xP1/s1600/0073.gif"
photos[5]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2DmLGSMxWkdC6jUFemkIYen_zEa_MZvCrwKcGLq5ZF-362dR8198GFE591GYFG1mCibtoXxFg9i3QEF_l9yr6ngHdigFou3sO4WT5Nn4T0pJSvWquE5S403wgdnQgCAiYxjzsoHw4TKrc/s1600/0231.gif"
photos[6]="link ảnh"
photos[7]="link ảnh"
photos[8]="link ảnh"
photos[9]="link ảnh"
photos[10]="link ảnh"

function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which]
}
}

function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
}
else window.status='End of gallery'
}
</script><input type="button" value="<<Xem lại" name="B2"
onclick="backward()" /> <input type="button" value="Xem tiếp>>" name="B1"
onclick="forward()" /><br />
      <a href="#" onclick="which=1;backward();return false"><small>Trở lại từ đâu</small></a></p>
      </center></div>
    </form>
    </td>
</tr>
</table>

</center>

Bây giờ các bạn có thể thay đổi các dòng lệnh màu đỏ (lời mô tả giới thiệu cho slideshow), dòng lệnh màu trắng (kích thước của ảnh) và dòng lệnh màu vàng (các link ảnh). Cuối cùng bấm Lưu lại và trở lại blog xem kết quả nha.

* Mở rộng thêm: muốn thêm ảnh vào slideshow, các bạn chỉ việc thêm đoạn code sau:

photos[n+1]="link ảnh"

dán tiếp theo sau dòng lệnh photos [10] cuối cùng, trong đó n là số thứ tự cuối cùng của ảnh (ở code trên số thứ tự cuối cùng của ảnh là số 10). Ví dụ bạn muốn thêm một ảnh nữa thì code là:

photos[11]="link ảnh"

Chúc các bạn thành công.

More about →

CHÈN VIDEO CLIP YOUTUBE VÀO KHUNG ẢNH

Người đăng: buonkhongem on Thứ Ba, 9 tháng 4, 2013

Bạn có thể dễ dàng chèn video clip YouTube hoặc nhaccuatui vào Blogspot bằng thẻ nhúng của "nó".

Để sinh động cho video clip, dunghennessy chia sẻ với các bạn một số khung ảnh để chèn video clip vào blog khá đẹp mắt.

Ứng với mỗi mẫu là code để chèn ở phía dưới, các bạn chỉ cần thêm tiện ích HTML hoặc khi đăng bài ở chế độ HTML, các bạn dán code vào và thay đổi đường link màu đỏ là link của video clip hoặc link của nhaccuatui vào là xong...

More about →

TẠO SLIDESHOW (Kiểu 5)

Người đăng: buonkhongem on Thứ Sáu, 13 tháng 7, 2012

Với kiểu 5 này, các ảnh lần lượt trình diễn với hiệu ứng thu nhỏ và phóng to rất đẹp mắt.
Ở mỗi ảnh bạn cũng có thể ghi vài dòng chú thích cho ảnh.

Mời bạn bấm vào Xem thử phía dưới để thấy rõ kiểu SLIDESHOW này.

Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<style>

.textboxstyle {

font-family:Arial;

font-size:16pt;

color:black;

text-align:center;

vertical-align:top;

}

.textboxbackgroundstyle {

background-color:white;

padding:5px;

/* rounded corners for Firefox */

-moz-border-radius-topleft: 15px;

-moz-border-radius-bottomright: 15px;

/* rounded corners for for Safari and Chrome */

-webkit-border-top-left-radius: 15px;

-webkit-border-bottom-right-radius: 15px;

/* rounded corners for Opera */

border-top-left-radius: 15px;

border-bottom-right-radius: 15px;

}

.curveandshadowstyle {

/* shadow and rounded corners for Firefox */

-moz-box-shadow: 5px 5px 8px #818181;

-moz-border-radius-topleft: 25px;

-moz-border-radius-bottomright: 25px;

/* shadow and rounded corners for Safari and Chrome */

-webkit-box-shadow: 5px 5px 8px #818181;

-webkit-border-top-left-radius: 25px;

-webkit-border-bottom-right-radius: 25px;

/* shadow and rounded corners for Opera */

box-shadow: 5px 5px 5px #818181;

border-top-left-radius: 25px;

border-bottom-right-radius: 25px;

/* shadow for Internet Explorer */

filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#818181');

border-style:solid;

border-width:1px;

border-color:white;

}

</style>

var imgurl= new Array()

var message= new Array()

var thislink= new Array()

/////////////////////////////////////////////////

// SCRIPT-CONFIGURATION STARTS HERE

/////////////////////////////////////////////////

// Các link ảnh theo thứ tự

imgurl[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhafqldBw8plF52wbAz925uklhsne7vJs8AcpKQh8qd_4KJxtBQbGgUsi1pJqSHz6Xj0q_OVWz8CzjKS5kIRhEkW1rAr3RKo7wiMEIk5v6Xsml7VHaUrW6lFSHYiXwbYLmurwMDh92chLgL/s1600/0003.gif"

imgurl[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOJcP10qsjyzUg9kOc-Xa09N7DBMF_rO1Lik0lIbtQbXgVJ3wbqYiPq47bx8RH6zG_UdW05Aizu-p_Ys43v1wP3g5aHTCaFP5mhsJye1IHZX7Y4MLjazvn4pAHBUOjCVPjb5vWziPsMlFq/s1600/0008.gif"

imgurl[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Aho_pP9c898ZQfa_OaBGmaqD14p4nEaKtat0SlUA-W0czJ-OeK36xCB3QqrC015X4x-HbMdfExm6Um4td4_vta9qnsE8HdOPv3bFyahVc3W0nJ6N6CpkKOWHrgj8vpqzK0kpIsxy0DWA/s1600/0009.gif"

imgurl[3]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSJIgpp5qkVkW6ANWvfFhriICDP7N4LoRztsohM8hgkWPtLcANhyphenhyphen6C7byJidVfLI-RBMBKbPZUjGx9cFQVJ_hTQryppHUBD41vz-7tZbmr7JpuqIW_eWxfwkj184tOrnxxCz9w8qt-6UiR/s1600/0019.gif"

imgurl[4]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf2CSC8jZ6NPvpj6C9hdcovQpNeq4EDBKYKznm_EJAfHppTndHL9Zj8J-1hszNS0-jG7_tk2s7QXvTJnrNyUKMVp8DYX9hMPAiT71RwSXRTeUGnOQxjvcRnFMNIeQlpc1rF85BxJrpdrcM/s1600/0027.gif"

imgurl[5]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn_Xt6WEOFy83oufzdKuR_Msq_fjy3qC-loVjVlNzkJZRnaJWnh-E-7fU-TeaqI2KO1Yq1-dkkSxtID8FkcMudjd2965J5BipBVhQtWfbYA4WSNeIX7wMz4weL99ESYOj_2RxcPXpRosZH/s1600/0048.gif"

imgurl[6]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmoouIV3yIDMOQpes9NZ8VKdZWLDdjHqYUXEgXp9WODAvUCofCoN7jywCR6253dbz9q6yg2EADIupoChGb7zhyphenhyphenzkdTLSPPxt3e9pGWDVNRi6oVj5SL3wfRpwm39ws0cqOgweGZZCbLJBU0/s1600/0050.gif"

imgurl[7]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQJ1kKggxWrkgJBTIOL2wkxlKH8Lme0nCn-jjZ_a8KcPI7abKhp6oFYqyw7cS3CFxRj79yDWDpx4fd30OcNFPUDohqrVybEJxA4XqwVYiHLRPFCrlzZNlafLumW5EDAuRsQUsUu7faSbVC/s1600/0059.gif"

imgurl[8]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpyKp-NSDVgJORQ59kAiZzQl1-qwOvECygLsyNNZXB4ssYJFBJUIv6SbU_x_dXImlPoL0pmY2NgFKtTplYFhPySECeP2Jt2lGeHMHF4u0L-bc9RiY1KoaW9Hkvyo8KdND4elbN7DPtO03O/s1600/0062.gif"

imgurl[9]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMEH67jBK8jhDSBFDVlizbIq-c2MW96bjyXdEjWvvt32t1DZnXgYykeqmqzhkuX-rXz34cOEvw1EPGJ2LQWU7zPBZY6jBi9LnXECFYX0-yjJycXJyyCtFrSwcqg6e9Z3WkuPIrAQruWyD-/s1600/0069.gif"

// Ghi chú cho ảnh

message[0]="Welcome to my Blog"

message[1]="dunghennessy"

message[2]="Cám ơn các bạn đã ghé tham quan"

message[3]="Chúc các bạn luôn vui khoẻ"

// set the links corresponding to the images above (no more no less than the images above)

// Nếu muốn đặt liên kết thì thay dấu # bằng link mình muốn liên kết đến

thislink[0]="#"

thislink[1]="#"

thislink[2]="#"

thislink[3]="#"

// Chiều rộng của ảnh (pixel)

var imgwidth=240

// Chiều cao của ảnh (pixel)

var imgheight=320

// set stillstand of picture (seconds)

var stillstand=2.5

// set opacity-strength (transparency-effect). Values may range from 1 to 100

var opacitystrength=60

/////////////////////////////////////////////////

// SCRIPT-CONFIGURATION STOPS HERE

/////////////////////////////////////////////////

// Do not edit below this line

var tmr

var step=10

var i=imgwidth

var i_imgurl=0

stillstand*=1000

var preloadedimages=new Array()

for (iii=0;iii<imgurl.length;iii++){

preloadedimages[iii]=new Image()

preloadedimages[iii].src=imgurl[iii]

}

function shrinkpic() {

document.getElementById("textbox").innerHTML=""

if (i>0) {

i-=step

document.getElementById("picdiv").style.width=i+"px"

document.getElementById("picdiv").style.height=i*(imgheight/imgwidth)+"px"

document.getElementById("picdiv").style.left=imgwidth/2-(i/2)+"px"

document.getElementById("picdiv").style.top=(imgwidth/2-(i/2))*(imgheight/imgwidth)+"px"

tmr=setTimeout("shrinkpic()",20)

}

else {

i_imgurl++

if (i_imgurl>=imgurl.length) {

i_imgurl=0

}

document.getElementById("picdiv").style.background="url("+imgurl[i_imgurl]+")"

i=1

tmr=setTimeout("enlargepic()",20)

}

function enlargepic() {

if (i<=imgwidth) {

i+=step

document.getElementById("picdiv").style.width=i+"px"

document.getElementById("picdiv").style.height=i*(imgheight/imgwidth)+"px"

document.getElementById("picdiv").style.left=imgwidth/2-(i/2)+"px"

document.getElementById("picdiv").style.top=(imgwidth/2-(i/2))*(imgheight/imgwidth)+"px"

tmr=setTimeout("enlargepic()",20)

}

else {

i=imgwidth

showmessage()

}

function showmessage() {

document.getElementById("textbox").innerHTML='<span class="textboxbackgroundstyle">'+message[i_imgurl]+'</span>'

tmr=setTimeout("shrinkpic()",stillstand)

}

function gotothislink(){

document.location.href=thislink[i_imgurl]

}

document.write('<div id="roof" style="position:relative;width:'+imgwidth+'px;height:'+imgheight+'px;">')

document.write('<div id="picdiv" class="curveandshadowstyle" style="position:absolute;background:url('+imgurl[0]+');width:'+imgwidth+'px;height:'+imgheight+'px;top:0px;left:0px;"></div>')

document.write('<div id="tt" onClick="gotothislink()" style="position:absolute;width:'+imgwidth+'px;height:'+imgheight+'px;top:0px;left:0px;filter:alpha(opacity='+opacitystrength+');opacity:'+(opacitystrength/100)+';cursor:pointer;"><table width='+imgwidth+' height='+imgheight+'><tr><td id="textbox" class="textboxstyle"><span class="textboxbackgroundstyle">'+message[0]+'</span></td></tr></table></div>')

document.write('</div>')

window.onload=shrinkpic

</script></center>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ theo ý thích của mình, sau cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Nếu muốn thêm nhiều ảnh nữa, bạn copy dòng lệnh này

imgurl[n+1]="Link ảnh"

Dán tiếp xuống phía dưới các link ảnh, trong đó n là số thứ tự cuối cùng của ảnh. Ví dụ ở code trên tôi có SlideShow gồm tất cả 10 ảnh được đánh số từ 0 - 9, nếu thêm một ảnh nữa thì ảnh cuối cùng của tôi là 10 thì SlideShow sẽ có tất cả 11 ảnh...thì code sẽ giống như vầy:
.......................

.........................
Dòng lệnh màu xanh là dòng lệnh mới thêm.

Và để slideshow được đẹp, các bạn nên chọn các ảnh có cùng kích thước và thay đổi kích thước của khung trình chiếu bằng với kích thước của ảnh....

Chúc các bạn thành công!!!

More about →

TẠO SLIDESHOW ẢNH (Kiểu 4)

Người đăng: buonkhongem on Thứ Sáu, 15 tháng 6, 2012

Với kiểu 4 này, các ảnh sẽ được xếp lại khá gọn, khi muốn xem ảnh nào, các bạn rê chuột vào ảnh, ảnh sẽ tự động "bung" ra kèm theo những dòng chú thích cho ảnh...

Mời bạn bấm vào Xem thử phía dưới để thấy rõ kiểu SLIDESHOW này.

Xem thử

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ theo ý thích của mình, trong đó:
* Fullw: độ rộng của slideshow
* h: Chiều cao của slideshow
* Background: màu nền của Slideshow
* Img src: Link của ảnh
* Height: chiều cao của mỗi ảnh
* Width: Độ rộng của mỗi ảnh
* a herf: Địa chỉ link liên kết.
sau cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Nếu muốn thêm nhiều ảnh nữa, bạn copy dòng lệnh này

<li>
<div class="hpanel">
<img src="Link ảnh" style="float: left; height: 320px; padding-right: 8px; width: 240px;" />Còn đây là một trong những ảnh động với chủ đề "Báo và Sư Tử", bạn sẽ tìm thấy nhiều ảnh động hơn tại<a href="Link liên kết"> anhdepblog.blogspot.com.</a>
</div>
</li>

Dán trên dòng lệnh </ul> (màu xanh) gần cuối dòng.

Và để slideshow được đẹp, các bạn nên chọn các ảnh có cùng kích thước....

Chúc các bạn thành công!!!

More about →

TẠO SLIDESHOW ẢNH (Kiểu 3)

Người đăng: buonkhongem on Thứ Tư, 13 tháng 6, 2012

Bài trước, tôi đã giới thiệu cho các bạn cách tạo slideshow ảnh kiểu 1 (Xem TẠI ĐÂY), kiểu 2 (Xem TẠI ĐÂY). Tiếp tục bài này tôi xin giới thiệu thêm cách TẠO SLIDESHOW ẢNH (kiểu 3).

Ở kiểu 3 này, các ảnh này sẽ được trình diễn "chạy" từ trên xuống hoặc từ dưới lên, khi bạn rê chuột vào thì ảnh sẽ "dừng" lại và hiện ra dòng chú thích nhỏ cho ảnh. Khi bạn bấm vào "nó" sẽ dẫn bạn đến trang liên kết mà bạn muốn.

Mời bạn bấm vào Xem thử phía dưới để thấy rõ kiểu SLIDESHOW này.

Xem thử

</marquee></center> </div></div></div>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ (link ảnh), màu xanh (link liên kết), màu vàng (độ rộng và chiều cao của ảnh), title (chú thích cho ảnh) theo ý thích của mình, muốn ảnh chạy từ trên xuống thay chữ "up" thành chữ "down", sau cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Nếu muốn thêm nhiều ảnh nữa, bạn copy dòng lệnh này
<div><a target="_blank" href="Link liên kết"> <img border="1" src="Link ảnh" width="240" height="320"title="Các loại hoa đẹp" /></a></div>

Dán trên dòng lệnh: </marquee></center> </div></div></div>

Và để slideshow được đẹp, các bạn nên chọn các ảnh có cùng kích thước....

Chúc các bạn thành công!!!

More about →

TẠO CHÚ THÍCH CHO ẢNH (Kiểu 2)

Người đăng: buonkhongem on Thứ Ba, 12 tháng 6, 2012

Trước đây, tôi có chia sẻ với các bạn cách tạo chú thích cho ảnh (Xem TẠI ĐÂY). Hôm nay, tiếp tục tôi chia sẻ thêm cho các bạn cách tạo chú thích cho ảnh (kiểu 2).

Cũng giống như kiểu 1, khi bạn rê chuột vào ảnh thì lập tức sẽ xuất hiện một bảng chú thích khá đẹp nhưng khác ở kiểu 1 là bảng chú thích này sẽ được trượt từ bên phải của hình ảnh ra phía ngoài. Khi bạn rê chuột ra ngoài ảnh thì bảng ghi chú sẽ được ẩn vào trong ảnh.

Mời bạn bấm vào Xem thử phía dưới để thấy rõ hiệu ứng của thủ thuật này.

Xem thử

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ (kích thước của bảng ghi chú, màu chữ...) và màu xanh (link ảnh, nội dung bảng ghi chú...) theo ý thích của mình, sau cùng bấm Lưu lại là xong.

* Chú ý ở mục height (chiều cao) và Width (chiều rộng): đây là kích cỡ thật của ảnh, ví dụ ảnh có kích thước như sau: 240x320 thì mục width phải là 240px và height phải là 320px (bạn không thể đặt theo ý mình được)

Chúc các bạn thành công!!!

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

More about →

TẠO SLIDESHOW ẢNH (Kiểu 2)

Người đăng: buonkhongem on Thứ Năm, 7 tháng 6, 2012

Bài trước, tôi đã giới thiệu cho các bạn cách tạo slideshow ảnh kiểu 1 (Xem TẠI ĐÂY). Tiếp tục bài này tôi xin giới thiệu thêm cách TẠO SLIDESHOW ẢNH (kiểu 2).

Ở kiểu 2 này, các ảnh này sẽ được trình diễn "chạy" từ bên phải qua bên trái, khi bạn rê chuột vào thì ảnh sẽ "dừng" lại và hiện ra dòng chú thích nhỏ cho ảnh. Khi bạn bấm vào "nó" sẽ dẫn bạn đến trang liên kết mà bạn muốn.

Mời bạn bấm vào Xem thử phía dưới để thấy rõ kiểu SLIDESHOW này.

Xem thử

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ theo ý thích của mình, trong đó sliderwidth (Độ rộng của Slidershow) sliderheight (Chiều cao của Slidershow) sau cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Nếu muốn thêm nhiều ảnh nữa, bạn copy dòng lệnh này
leftrightslide[n+1]='<a href="địa chỉ liên kết"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'.
Trong đó n là số thứ tự của ảnh cuối cùng...

Dán tiếp phía dưới theo thứ tự tăng dần

Ví dụ: ở đoạn code trên Slideshow sẽ có tất cả 5 ảnh được tính từ số 0 đến số 4, bây giờ tôi muốn slideshow có tất cả 10 ảnh thì code sẽ giống như vầy:
<script type="text/javascript">
..............................
..............................
leftrightslide[0]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[1]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[2]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[3]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[4]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[5]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[6]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[7]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[8]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[9]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'

...............................
..............................
</script>

Và để slideshow được đẹp, các bạn nên chọn các ảnh có cùng kích thước....

Chúc các bạn thành công!!!

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

More about →

TẠO SLIDESHOW ẢNH (Kiểu 7)

TẠO SLIDESHOW (Kiểu 6)

CHÈN VIDEO CLIP YOUTUBE VÀO KHUNG ẢNH

TẠO SLIDESHOW (Kiểu 5)

TẠO SLIDESHOW ẢNH (Kiểu 4)

TẠO SLIDESHOW ẢNH (Kiểu 3)

TẠO CHÚ THÍCH CHO ẢNH (Kiểu 2)

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

TẠO SLIDESHOW ẢNH (Kiểu 2)

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

shares

Like

menu

Category

Popular Posts

About Me

Labels

Recent Posts

Categories

Subscribe

Recent Comments

Popular Posts

Connect With Us

Popular Posts