Xem hình trong popup window

[hunghsmn]

Trong có một món đồ cổ...rất cổ, do chính admin của chia sẻ. Topic đó không có một bài comment nào. Riêng mình vẫn thấy nó hay, muốn mang ra để giới thiệu với thành viên mới nhưng topic đó đã khóa nên mình phải lập topic khác để giới thiều. Hiiii , đồ cổ giá trị lắm các bạn ạ!

Chắc các bạn đã biết Google có một kiếu cho xem ảnh cũng khá hay như thế này:[You must be registered and logged in to see this link.]
( XIn lỗi đã vi phạm vì link này mà cho vào code thì không ai hiểu là cái gì nên viết vậy để bấm cho tiện)

Nghĩa là trang ảnh được trình bày dưới dạng thunbail. Khi rê chuột lên thumbnail thì hiện ảnh lớn trong popup window có kèm lời chú thích bên dưới ảnh. và khi clich vào thì mở ra trang chứa ảnh đó.

Mình làm ví dụ để minh họa đây:

Code:

http://www.trekhuyettat.org/h192-page

Nếu có bạn nào thích chơi kiểu đó thì xem bài chia sẻ của admin tại đây: [You must be registered and logged in to see this link.]

[handsomevip007]

Nó khá giống tooltips bác nhỉ? Chỉ khác là dùng CSS không dùng script

[Teeñ]

rất hay...vote bạn...

[Cyhitmen]

rất hay...vote bạn...

kêu bằng BÁc đó

[hunghsmn]

Nó khá giống tooltips bác nhỉ? Chỉ khác là dùng CSS không dùng script

Ừ nhỉ, kết quả thì giống kiểu tooltip của mình, nhưng cách làm thì khác. Ủa mà sao ta không dùng kiểu này để làm tooltip nhỉ. CSS thì mình muốn làm trời làm đất gì chả được. Để mình bo góc, tạo bóng 3D cho ảnh lớn đó coi nghen.

rất hay...vote bạn...

Vote vào cái topic viết từ năm 2008 đó bạn.

[taulai]

Vote vào cái topic viết từ năm 2008 đó bạn.

Lấy cái đó làm tooltip đi bác

[LiBee KS]

Cũng ngon đấy bác Hùng

[hunghsmn]

Làm tooltip như mình hồi giờ muốn thêm người gửi vào tooltip thì buộc phải nghỉ chơi màu nick thành viên, nghỉ chơi icon trước nich thì mới được. Còn làm bằng kiểu này thì vô tư, không ảnh hưởng gì,

Kiểu cũ viết dễ lỗi, không được enter xuống hàng, còn kiểu này viết thỏa mái.

Hay quá! Từ từ đã

[hunghsmn]

Vận dụng Vào trang chủ.
Xem hình:

Code:

http://i609.photobucket.com/albums/tt175/hunghsmn/Capture-4.jpg

CSS:

Code:

.popupimg{
position: relative;
z-index: 0;
}

.popupimg:hover{
text-decoration: none!important;
background-color: transparent;
z-index: 50;
}

.popupimg span{ /*CSS for enlarged image*/
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: #FFFFFF;
text-decoration: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-top : 6px solid #6F6F6F;
border-right : 6px solid #6F6F6F;
border-bottom : 6px solid #6F6F6F;
border-left : 6px solid #6F6F6F;
}

.popupimg span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-top : 5px solid #6F6F60;
border-right : 5px solid #6F6F60;
border-bottom : 5px solid #6F6F60;
border-left : 5px solid #6F6F60;
}

.popupimg:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -80px;
left: 60px; /*position where enlarged image should offset horizontally */
}


Code của một ô (<td>):

Code:

          <TD Width = "33%" Align = "left" Valign = "top" bgcolor = "#FFFFFF">
<Table class="k2" width="100%">
    <TR  background="http://i46.servimg.com/u/f46/14/26/60/46/thanhb10.gif" bgcolor="#0000A0">
          <TD width="100%" height="24" align="center" colspan="2"><font face = "Times New Roman" size = "3" color = "#FFFFFF"><b>Tiêu đề ô</b></font></TD>  </TR>
    <TR>
        <TD width="80" height="240" align ="center" valign="center">
<a class="popupimg" href="http://link của box khi click vào popupimg"><img src="Link ảnh popupimg" width="80" height="128" border="0"><span><img src="Link ảnh lớn" height="300"/>
Nọi dung chú thích dưới ảnh</span></a> </td>

<td> NỌI DUNG CỦA Ô </TD>
    </TR>
</Table>
          </TD>


[handsomevip007]

Bác xem cháu ứng dụng nó để mần "status tips" này

Code:

http://www.a14toiyeu.net/h91-page

Chỉ mới thử nhiêu đó mà thấy có nhiều cái phát sinh quá bác àh Như ứng dụng để làm tooltips trên lasttopic có lẽ hơi khó vì cái vị trí của nó hơi kì ^^!

[[D]ark[R]aven]

Ý tưởng tốt nhỉ ! Mà nếu áp dụng thế vào CSS thì hơi cứng ngắc nhỉ =.=' ! Mượt tí như Tools Tips kia mà lại ấn tượng như cái này thì Côl

[Sponsored content]