スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

オンマウスでリンク先表示(mozshot使用)javascript;


2FNqS9kQbIYPtU8_1351949807.jpg

mozshotを使うのはただ単に他のより更新が
早いからという理由です。HeartRailsは滅多に
更新してくれませんし・・・・
注意これを使うと古いブラウザだとまれに、
スクリプトエラーを起こします。
もちろんfc2以外でも使うことができます


このサイトのようにリンクにオンマウスで画像を表示させる方法は、
このようになります。
タグ:
<style type="text/css">
<!--
#thumb{
position: absolute;
left: -30px;
border: 1px solid black;
padding: 2px;
visibility: hidden;
z-index: 100;
}

-->
</style>
<script type="text/javascript" charset="euc-jp">
<!--
var offsetfromcursorX=12
var offsetfromcursorY=10
document.write('<div id="thumb"></div>')
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["thumb"] : document.getElementById? document.getElementById("thumb") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function showThumbnail(thetext, thewidth, thecolor){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}
function positiontip(e){
if (enabletip){
var nondefaultpos=false
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20
var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX
var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY
var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000
if (rightedge<tipobj.offsetWidth){
tipobj.style.left=curX-tipobj.offsetWidth+"px"
nondefaultpos=true
}
else if (curX<leftedge)
tipobj.style.left="5px"
else{
tipobj.style.left=curX+offsetfromcursorX+"px"
}
if (bottomedge<tipobj.offsetHeight){
tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px"
nondefaultpos=true
}
else{
tipobj.style.top=curY+offsetfromcursorY+"px"
}
tipobj.style.visibility="visible"
}
}
function closeThumbnail(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip
-->
</script>

<ul>

<li style="text-align:left">
<a onmouseover="showThumbnail('<img alt=ここにタイトルを入れる width=228 height=128 border=0 src=http://mozshot.nemui.org/shot?ここに相手のURLを入れる>')" onmouseout=closeThumbnail() href="http://frantan.blog.fc2.com/" target=_blank>ここにタイトルを入れる</A>
</li><!-- ここからは削除しないでください-->
<li style="text-align:left">
<a onmouseover="showThumbnail('<img alt=PSP,PC,Practical use width=228 height=128 border=0 src=http://mozshot.nemui.org/shot?http://hibiki823.blog.fc2.com/>')" onmouseout=closeThumbnail() href="http://hibiki823.blog.fc2.com/" target=_blank>PSP,PC,Practical use</A>
</li><!-- 削除禁止エリア終了 -->

</ul>

場所:
<body></body>の間ならどこでもいけると思います。

補足:
スクリプトをいちいちいじらないといけませんが、
閲覧者にとってよくわからないところを見に行くのは不安でしょう、
ですが、これを使えば相手先がどんなサイトかわかるので安心でしょう。
このスクリプトは、フリーエリアにでもはっつけてタイトルを「リンク」にすれば
十分使えます。したの削除しないでくださいの中にあるものは削除しないでください。
スポンサーサイト

この記事へのコメント

トラックバック

URL :

閲覧者
Now online
PSPプラグイン
PC
パソコン系

■【比較シリーズ 】
解凍(圧縮)ソフト性能比較
WEBブラウザ比較v1.0


■【Jpcsp SVN】
「Jpcsp SVN r2502」


■【ブラウザー】
FireFox
sleipnir

ページランキング
記事別最新コメント
ランキング
アクセスランキング
[ジャンルランキング]
ゲーム
1204位
アクセスランキングを見る>>

[サブジャンルランキング]
その他
230位
アクセスランキングを見る>>
Links
人気記事