Hướng Dẫn Tạo Tooltip bằng Jquery Ajax Cho Website

Hướng Dẫn Tạo Tooltip bằng Jquery Ajax Cho Website

! Nếu bài lap này giúp ích cho bạntrong việc thiết kế web thì thanks 1 phát nha

Sau Khi hoàn thành Bài lab bạn sẽ được kết quả:

live demo: http://vu.nhatnghe.vn/tooltip/index.html

Source download:

http://vu.nhatnghe.vn/jquerytol1.rar

Begin:
Bước 1: Sau khi download source về các bạn Dùng DW tạo site trỏ vào folder TOOLTIP

Bước 2: Tạo 1 trang html trắng với tên là test.php

Bước 3: Vào Insert->html->Script Object->Script
Chèn 2 file javascript jquery và jtip vào

Bước 4: Attach file Css global.css vao(nằm trong folder css)!!

Sau khi chèn xong bạn sẽ được đoạn code như sau

Bước 5: Trong thẻ body bạn paste đoạn code sau vào:

Code:

<p><a href="nhatnghe.html" name="NhatNghe..." id="yahooCopy" class="jTip">TRUNG TAM DAO TAO MANG MAY TINH NHAT NGHE</a></p>

Bước 6:Tạo trang nhatnghe.html trắng và paste đoạn code sau vào trong thẻ <body>

Code:

<p>Thành lập vào tháng 3 năm 2003, Nhất Nghệ  đã nhanh chóng trở thành Trung Tâm Đào Tạo Mạng Máy Tính Hàng Đầu tại thành phố Hồ Chí Minh.

Vị Thế Hàng Đầu của Nhất Nghệ có được nhờ vào chất lượng đào tạo ưu việt cùng với những chính sách hộ trợ Học viên 
</p>
<img src="images/ajaxImage.jpg" />

Chạy file test.html.Test thử chúc cá bạn thành công

Bài 2:

Hướng dẫn Làm Tootip cho website bằng CSS(rất nhẹ và gọn))

Sau khi hoàn thành bài lap bạn sẽ được kết quả

Live DEMO(các bạn rê chuột vào tên các sản phẩm nha)

Bắt đầu:

Bước 1:
-Tạo trang test.html tại thẻ <head> paste đoạn code sau vào

Code:

<style>

 #rollover a {
text-decoration:none;}

#rollover  a span {
visibility:hidden;
display:block;
position:absolute;
/**adjust disjointed text position in % or px**/ 
left:10%;

color:#666;
background-color:#CCFF99;
border: 2px solid silver;
padding: 5px; }

#rollover  a:hover span, #rollover  a:active span, #rollover  a:focus span {
visibility:visible;
}

#rollover  a:hover, #rollover  a:focus{
text-decoration: none;
color:#FF6600;
visibility:visible; }

 
</style>

-Bước 2

Trong thẻ <body> paste doạn code sau vào

Trích:

<div id="rollover">
<a href="http://nhatnghe.com">Trung Tâm đào tạo mạng Nhất Nghệ<span><img src="http://nhatnghe.com/forum/nn/banner11.jpg" align="left"/>Nội dung của bạn</span></a>

</div>

Nghĩa là các nội dung trong thẻ span

Trích:

sẽ được show ra cho người dùng xem!! các bạn có thể thay thế theo ý mình

Test thử !! chúc bạn thành công

Bài 3;

Hướng Dẫn Tạo Tooltip bằng Jquery Cho Website

Tình hình là mình thấy trên forum có nhiều bạn hỏi về tooltip jquery này nhiều!!Nên viết 1 bài đơn giản về tooltip sử dụng jquery!! Nếu bài lap này giúp ích cho bạntrong việc thiết kế web thì thanks 1 phát nha

Sau Khi hoàn thành Bài lab bạn sẽ được kết quả:

live demo: http://vu.nhatnghe.vn/tooltip/demo.html

Source download:

http://vu.nhatnghe.vn/jquerytol.rar

Begin:
Bước 1: Sau khi download source về các bạn Dùng DW tạo site trỏ vào folder jquery

Bước 2: Tạo 1 trang html trắng với tên là test.php

Bước 3: Vào Insert->html->Script Object->Script
Chèn 2 file javascript jquery và jquerystcky tootips vào

Bước 4: Attach file Css stickyTootips.css vao!!

Sau khi chèn xong bạn sẽ được đoạn code như sau

Bước 5: Trong thẻ body bạn paste đoạn code sau vào:
<p><a href="#" data-tooltip="sticky1">NHẤT NGHỆ</a></p>

<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">

<div id="sticky1" class="atip" style="width:200px">
<img src="http://nhatnghe.com/images/ads/ads_07_new2.gif" /><br /> TRUNG TÂM ĐÀO TẠO MẠNG CHUYÊN SÂU VÀ WEB DESIGNER </div>
</div>
<div class="stickystatus"></div>
</div>

Nguồn: nhatnghe.com/forum