javascript - リンクのマウスオーバー効果でdivにWebページをロードする

Question

私はウェブサイトを開発しています（php、html、およびcssを使用）。URLのリストを含む「ニュースとイベント」のページがあります。私がやりたいことは、マウスをリンクの上に置くことです。ユーザーがリンクに含まれるニュースの種類を知ることができるように、対応する Web サイトの小さなミニチュアを div にロードする必要があります。

画像とビデオのマウスオーバーでコードを試しましたが、Web ページで同じことを行うことができません。

画像の場合:

<a href="Happy-Birthday-1.gif" rel="enlargeimage" rev="targetdiv:loadarea,link:dynamicdrive.com">Happy Birthday</a><br /> <div id="loadarea" style="width: 600px"></div> 

ビデオの場合:

 <a onClick="document.getElementById('dynloadarea').innerHTML='<iframe src=\'osmosis.mpg\' width=\'300\' height=\'300\' scrolling=\'auto\' frameborder=\'0\'></iframe>'"> Osmosis</a> <div id="dynloadarea"></div>

-前もって感謝します ！

Answer 1

これを試して：

$('a').hover(function(){
   var imgpath = $(this).attr('href');
   $('#loadarea').load(imgpath)
}, function(){
   $('#loadarea').empty()
})

Answer 2

jQuery .load()が必要です。

$('a').hover(function(){
   var path = $(this).attr('href');//Get the path
   $('#result').load(path);//Load contents into a div#result
   , function() {
     $('#result').show();
   }
});

$('a').mouseout(function(){
 $('#result').hide();
});

同じサーバー上のページのみをロードできます。

Answer 3

$(document).ready(function(){
$('#a').mouseover(function(){
$('#page').css('visibility','visible');
       $('#ss').attr('src',"http://www.w3schools.com/css/default.asp");
});

$('#a').mouseout(function(){
$('#page').css('visibility','hidden');
});
});​


<a href="Happy-Birthday-1.gif" rel="enlargeimage" r id="a">Happy Birthday</a><br />
<div id="page">
<iframe width="300" height="300" scrolling="auto" id="ss">
</iframe>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Answer 4

blockUI の使用例はこちら: http://jquery.malsup.com/block/#demos