Multiple iFrames enlarges on hover
What am looking for is to have multiple iFrames (or something similar) on a page, any of which when hovered over enlarges in size. By default, they should only show part of the page.For example, most of the iFrames will have some charts or graphs. I was wondering if there was a way for me to only see the chart/graph and additionally when hovered-over the iFrame can expand in width and heigh开发者_如何学JAVAt. Would highly appreciate if anyone can provide any recommendation/pointers/code snippets about the same revolving around jsp/jquery/java script/css or something related. Thanks in advance!
jQuery -
$(document).ready(function() {
$("#frame-1").mouseover(function() {
$(this).attr({width: 800,
height: 500});
}).mouseleave(function() {
$(this).attr({width: 300,
height: 400});
});
});
w/ HTML -
<html>
<head>
<title>Frame Enlargementationing</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#frame-1").mouseover(function() {
$(this).attr({width: 800,
height: 500});
}).mouseleave(function() {
$(this).attr({width: 300,
height: 400});
});
});
</script>
</head>
</html>
<body>
<h1>Hover:</h1>
<iframe id="frame-1" src="http://jquery.com/" width="300" height="400"></iframe>
</body>
</html>
you could try this trick,
CSS
iframe {
width: 100%;
height: 100%;
}
div {
width: 300px;
height: 200px;
}
div.hover {
width: 400px;
height: 300px;
}
html
<div>
<iframe src="http://google.com"></iframe>
</div>
jquery
$('div').hover(function(){
$(this).addClass('hover');
},
function(){
$(this).removeClass('hover');
});
demo
You could do a CSS psuedo hover class that makes the iframe bigger.
For example:
iframe {
width: 500px;
height: 700px;
}
iframe:hover {
width: 700px;
height: 900px;
}
I'm not 100% sure if this will work with iframes... but it's worth a try!
加载中,请稍侯......
精彩评论