图像缩略图，最大宽度和最大高度 - onmouseover，以某种方式查看更大的图像 [英] image thumbnail, with max-width, and max-height -- onmouseover, view a bigger image somehow
问题描述
我设置了一个缩略图，使其具有最大宽度和最大高度，并且需要设置某种onmouseover设置，以将它们悬停在图像上时显示给他们一个更大的图像。
我无法使用链接来做到这一点。
有什么想法？
html
< img src =imageurlclass =s3_rightstyle =max-width：400px;> ;
我尝试使用下面的代码;然而，它会因为我有一个最大宽度/最大高度而混乱。
html
< img src =图片网址类=s3_rightonmouseover ='Big（this）;'onmouseout ='Small（this）;'style =max-width：400px;>
javascript
< script language = javascript>
<！ -
函数Big（me）
{
me.width * = 2;
me.height * = 2;
}
函数Small（me）
{
me.width / = 2;
me.height / = 2;
}
- >
< / script>
还有一个问题，也许x2会比实际图片大。我不需要代码来扩大比实际图像大的图像。所以我真的只需要代码来设置一个新的最大宽度和最大高度或弹出图像离开页面的最大宽度和最大高度（如，实际上并没有改变布局，因为图像缩略图显示）
是否有可能欺骗绝对定位的副本，以及嵌套在内部的缩略图指定相对位置的包装div？
< style type =text / css>
.meDiv
{
position：relative;
border：1px纯黑色;
width：200px;
height：100px;
}
.meSmall
{
display：block;
宽度：100％;
身高：100％;
}
.meBig
{
z-index：10;
位置：绝对;
left：0px;
top：0px;
display：none;
width：800px;
height：350px;
}
< / style>
< div class =meDiv>
< img class =meSmallsrc =imageURLonmouseover =Big（）; />
< img id =bigOneclass =meBigsrc =imageURLonclick =Small（）;的onmouseout = 小（）; />
< / div>
< script language =javascript>
函数Big（）{
document.getElementById（'bigOne'）。style.display =block;
}
函数Small（）{
document.getElementById（'bigOne'）。style.display =none;
}
< / script>
很明显，给出的代码不会直接插入您的场景或获得任何奖励，但仅限于给出一个概念的概念。
使用这个，您可以将任意大小限制应用到包装div和/或缩略图（最大宽度/最大高度允许）而不会影响大图像或去除任何包裹的文本。如果您需要使用一些JavaScript黑巫术魔法（我自己是jQuery粉丝），您也可以使用缩略图的特征来确定大图片的特征。
I've set a thumbnail to have a max-width and max-height and need to set up some kind of onmouseover setup to where when they hover over the image, it shows them a bigger image.
I cannot use links to do this.
Any ideas?
html
<img src="imageurl" class="s3_right" style="max-width: 400px;">
I tried using the code below; however, it messes up because I have a max-width/max-height.
html
<img src="image url" class="s3_right" onmouseover='Big(this);' onmouseout='Small(this);' style="max-width: 400px;">
javascript
<script language=javascript>
<!--
function Big(me)
{
me.width *= 2;
me.height *= 2;
}
function Small(me)
{
me.width /= 2;
me.height /= 2;
}
-->
</script>
There is also the problem that maybe x2 will be larger than the actual image. I don't need the code to expand the image larger than the actual image is. So I would really just need the code to set a new max-width and max-height or popup the image off the page with a max-width and max-height (like, not actually change the layout because the image thumbnails are displaying with text wrapped around them.)
Is it a possibility to just spoof an absolute positioned duplicate, along with the thumbnail, nested inside a wrapping div assigned a relative position?
<style type="text/css">
.meDiv
{
position:relative;
border:1px solid black;
width:200px;
height:100px;
}
.meSmall
{
display:block;
width:100%;
height:100%;
}
.meBig
{
z-index:10;
position:absolute;
left:0px;
top:0px;
display:none;
width:800px;
height:350px;
}
</style>
<div class="meDiv">
<img class="meSmall" src="imageURL" onmouseover="Big();" />
<img id="bigOne" class="meBig" src="imageURL" onclick="Small();" onmouseout="Small();" />
</div>
<script language="javascript">
function Big() {
document.getElementById('bigOne').style.display = "block";
}
function Small() {
document.getElementById('bigOne').style.display = "none";
}
</script>
Obviously the code given won't directly plug into your scenario or win any awards, but it's just to give an idea of the concept.
Using this you could apply whatever size restrictions you want to the wrapping div and/or thumbnail (bugs with max-width/max-height permitting) without affecting the large image or dislodging any wrapped text. You could also use the characteristics of the thumbnail to determine traits of the large image if you need to by employing a bit of JavaScript black voodoo magic (I'm a jQuery fan myself).
这篇关于图像缩略图，最大宽度和最大高度 - onmouseover，以某种方式查看更大的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
