Tạo cửa sổ popup khi rê chuột vào ảnh

admin Mar 31, 2011 7
Sau một lúc dạo quanh blog của các pro,  mình tình cờ đọc được thủ thuật này bên blog của FanDung, mặc dù đây chỉ có vài dòng CSS đơn giản nhưng đã hiện được popup của hình rất hay. Rất cám ơn FanDung về thủ thuật này.

Với vài đọan code CSS nhỏ ta có thể tạo một cửa sổ popup để hiển thị ảnh rất chuyên nghiệp mà không cần tới javascript. Thủ thuật cho phép hiện thị của sổ popup của ảnh gốc khi ta rê chuột vào.

Xem demo trực tiếp ở đây : http://fandung.110mb.com/test/popup-images-view.html

Hình ảnh minh họa:

Tạo cửa sổ popup khi rê chuột vào ảnh

Để thực hiển, trước tiên bạn chèn đọan code CSS này vào trước thẻ đóng </head> trong code template:
– Đăng nhập blog
– Vào bố cục
– Vào chỉnh sửa code HMTL
– Chèn đọan code CSS bên dưới vào trước dòng code </head>


<style type=’text/css’>

.img-thumbnail{
position: relative;
z-index: 0;
}

.img-thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.img-thumbnail span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}

.img-thumbnail span img{
border-width: 0;
padding: 2px;
}

.img-thumbnail:hover span{
visibility: visible;
top: -100px;
left:100px;
}

</style>

– Dòng code màu đỏ chính là vị trí popup sẽ hiển thị ở trong blog của bạn. Hãy điều chỉnh 2 giá trị này để có được vị trí thích hợp nhất trên blog của bạn.

– Save template.

sau cùng là code 2 HTML:

<a href="#">
<img src="link ảnh1" border="0" height="98" width="130"/>
<span>
<img src="link ảnh1"/>
</span>
</a>

bạn muốn ảnh hiển thị ở đâu thì bạn cứ chèn code 2 HTML vào đó. Ví dụ như trong bài viết, hay ở ngòai blog (nếu ở ngòai blog thì tạo 1 widget HTML/Javascript rồi dán code vào)
Chúc bạn thành công
Theo fandung blog

7 Comments »

  1. get rid of cellulite naturally Apr 17, 2011 at 3:40 pm - Reply

    Your body has a few layer with skin. You get hold of cellulite any time fat tissue in the inner tier starts to help you push that connective tissue in the centre layer and you just get smallish dimples. Women have a much thinner skin as opposed to men thereby they have an overabundance of cellulite.

  2. Breanne Buffalo Apr 17, 2011 at 7:10 pm - Reply

    Hey – good weblog, simply trying around some blogs, seems a pretty nice platform You Are using. I’m presently utilizing Drupal for a number of of my sites but seeking to change one in all them over to a platform very a lot the identical to yours as a trial run. Something in particular you’ll advocate about it?

  3. Stop Dog Barking Apr 18, 2011 at 2:01 pm - Reply

    I’ve been visiting your blog for a while now and I always find a gem in your new posts. Thanks for sharing.

  4. Trula Kingshott Apr 18, 2011 at 6:09 pm - Reply

    Its like you read my mind! You seem to know a lot about this, like you wrote the book in it or something. I think that you could do with a few pics to drive the message home a little bit, but instead of that, this is magnificent blog. An excellent read. I’ll certainly be back.

  5. Issac Maez Apr 18, 2011 at 8:52 pm - Reply

    Howdy just wanted to give you a brief heads up and let you know a few of the images aren’t loading correctly. I’m not sure why but I think its a linking issue. I’ve tried it in two different internet browsers and both show the same outcome.

  6. Rob Rasner Magic Apr 19, 2011 at 7:44 am - Reply

    When feasible, as you get knowledge, would you thoughts adding to your site with much more information? It’s very ideal for all of us.

  7. great neck locksmith Apr 19, 2011 at 3:50 pm - Reply

    Undeniably believe that which you said. Your favorite justification seemed to be on the web the easiest thing to be aware of. I say to you, I certainly get irked while people think about worries that they plainly don’t know about. You managed to hit the nail upon the top as well as defined out the whole thing without having side-effects , people can take a signal. Will likely be back to get more. Thanks

Đăng Bình Luận »