Javascript 在链接的鼠标悬停效果上加载div中的网页
我正在开发一个网站使用php,html和css。我有一个包含URL列表的新闻和事件页面。我想做的是把鼠标放在一个链接上,相应网站的一个小缩影应该加载到一个div中,这样用户就知道链接包含什么类型的新闻 我已经尝试过用鼠标在图片和视频上运行代码,但无法对网页执行同样的操作 对于图像:Javascript 在链接的鼠标悬停效果上加载div中的网页,javascript,html,mouseout,mousehover,Javascript,Html,Mouseout,Mousehover,我正在开发一个网站使用php,html和css。我有一个包含URL列表的新闻和事件页面。我想做的是把鼠标放在一个链接上,相应网站的一个小缩影应该加载到一个div中,这样用户就知道链接包含什么类型的新闻 我已经尝试过用鼠标在图片和视频上运行代码,但无法对网页执行同样的操作 对于图像: <a href="Happy-Birthday-1.gif" rel="enlargeimage" rev="targetdiv:loadarea,link:dynamicdrive.com">Happy
<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>
-提前谢谢 使用blockUI
例如:
使用blockUI
例如:
试试这个:
$('a').hover(function(){
var imgpath = $(this).attr('href');
$('#loadarea').load(imgpath)
}, function(){
$('#loadarea').empty()
})
试试这个:
$('a').hover(function(){
var imgpath = $(this).attr('href');
$('#loadarea').load(imgpath)
}, function(){
$('#loadarea').empty()
})
您将需要jQuery
您将只能在同一台服务器上加载页面 您将需要jQuery
$(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>
您将只能在同一台服务器上加载页面 试试这个
$(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>
<p id="p3"><a href="http://apple.com">Apple</a></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="http://codegena.com/assets/css/image-preview-for-link.css" rel="stylesheet">
<script src="http://codegena.com/assets/js/image-preview-for-link.js"></script>
<script type="text/javascript">
$(function () {
$('#p3 a').miniPreview({ prefetch: 'parenthover' });
$('#p3 a').miniPreview({ prefetch: 'pageload' });
});
</script>
试试这个
<p id="p3"><a href="http://apple.com">Apple</a></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="http://codegena.com/assets/css/image-preview-for-link.css" rel="stylesheet">
<script src="http://codegena.com/assets/js/image-preview-for-link.js"></script>
<script type="text/javascript">
$(function () {
$('#p3 a').miniPreview({ prefetch: 'parenthover' });
$('#p3 a').miniPreview({ prefetch: 'pageload' });
});
</script>
对于图像:视频的生日:图像的生日:视频的生日:渗透我认为只有当您试图加载的页面在同一台服务器上时,这才有效。@soupy1976是的,图像在同一台服务器上。@undefined:我可以加载图像/视频。我想在div中加载悬停效果的网页!我认为只有当您试图加载的页面在同一服务器上时,这才有效。@soupy1976是的,图像在同一服务器上。@undefined:我可以加载图像/视频。我想在div中加载悬停效果的网页!我尝试了你的代码,但是链接在div上没有显示任何内容。我尝试了你的代码,但是链接在div上没有显示任何内容。