http://perhapsspy.egloos.com/2798445
html:
<a href="archive.html" class="roll">
<img src="imgs/archive.gif"/>
<img src="imgs/archive_hover.gif" class="over"/>
</a>css:
a.roll img.over { display: none;}
a.roll:hover img { display: none;}
a.roll:hover img.over { display: inline;}위 사이트에서 소개한 방법은 망할 윈도우즈 익스플로러에서 스타일시트가 적용되지 않기때문에 jQuery를 이용하여 아래와 같이 수정하였고 <head>...</head>사이에 넣어주면 된다.
<script type='text/javascript'>
$(document).ready(function(){
$('blockquote').each(function() {
var citelink = $(this).attr('cite');
if (citelink != '' && citelink != null) {
var cite = document.createElement('cite');
var a = document.createElement('a');
$(a).attr({'href': citelink, 'title': citelink});
$(a).append(citelink);
$(cite).append(a);
$(this).prepend(cite);
}
});
});
</script>스타일시트로 cite를 block으로 만들어준다.
blockquote cite { display: block; margin-bottom: 0.5em; font-style: italic;}이제 아래처럼 cite속성에 링크만 설정해줘도
<blockquote cite="http://support.google.com/blogger/bin/answer.py?hl=en&answer=47270#posts">dateHeader: The date of this post, <b>only present if this is the first post in the list that was posted on this day.</b></blockquote>아래처럼 링크가 걸린다.
dateHeader: The date of this post, only present if this is the first post in the list that was posted on this day.
망할 윈도우즈 익스플로러에선 동작하지 않는다. blockquote태그에 설정한 cite링크를 자동으로 표시하려면 자바스크립트의 도움이 필요하다.
blockquote[cite]:before {
content: attr(cite);
display: block;
margin-bottom: 0.5em;
color: #aaa;}<meta name="robots" content="noindex, noarchive, nofollow, nosnippet, noodp, notranslate, noimageindex"> <meta name="googlebot" content="noindex, noarchive, nofollow, nosnippet, noodp, notranslate, noimageindex"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="pragma" content="no-cache">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">