jquery를 이용하여 hover시 툴팁과 이미지 미리보기

Jquery를 이용하여 툴팁과 이미지 미리보기 

 Jquery의 다양한 기능중에 자주 사용하는 기능을 올리려고합니다.

바로  마우스를 hover 시켰을시 툴팁과 이미지를 볼 수있게 해주는 것인데요

http://cssglobe.com/easiest-tooltip-and-image-preview-using-jquery/

사이트 메인화면입니다

지금은 업데이트가 안되는 css globe입니다.

괜찮은 사이트였는데 안타깝네요

아래와 같이 한줄의 코드만 넣어주면 툴팁이 가능합니다.

<a href="http://cssglobe.com" class="tooltip" title="Web Standards Magazine">Roll over for tooltip</a>

<a href="1.jpg" class="preview"><img src="1s.jpg" alt="gallery thumbnail" /></a>

<a href="image.jpg" class="preview" title="Great looking landscape">Roll over to preview</a>

<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg">Css Globe</a>

<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg" title="Web Standards Magazine">
Css Globe</a>

각 태그에 따른 화면은 아래와 같습니다.

마우스 hover시 툴팁만나오는것

이미지만 나오는것

이미지와 설명까지 나오게하는것

사이트의 화면을 보여주는것

사이트에 대한 설명까지 preview해줍니다.

다운로드 받으셔서 사용하시면되는데요

용량이 매우 적습니다.

main.js만 삽입해주신후 사용하면되요

jquery.js는 이미 사용하시겠죠?

요즘엔 CSS만으로 할 수있지만. 간단한 방법이라서 올려봤습니다.

그리고 사진 나오는 디자인은 여러분의 몫입니다. 어떻게 꾸미느냐에 따라 달라지기때문이죠