想要将翻转图像创建为更大 [英] Want to creat rollover image to larger
问题描述
我想创建这个..
一个2行表，3行下来。
在第一个col中我想要三个拇指大小的图像，每行1个
当图像滚动时，较大的图像显示在col 2中
换句话说，当拇指滚动时，其较大的图像显示在表格的另一个
区域。
请帮忙吗？
可以用更大的替换小图片，但它们处于相同的位置。
我我试图复制这样的东西..
http：//cgi.ebay .com.au / ws / eBayISAPI .... 4288％26fvi％3D1
谢谢
摇滚
Hi,
I want to create this..
A 2 col table with 3 rows down.
In the 1st col I want three thumb size images, 1 in each row
When an image is rolled on, the larger image shows up in col 2
In other words when a thumb is rolled on, its larger image is shown in another
area of the table.
Any help please?
Can do the replace small image with larger okay, but they are in the same position.
I am trying to duplicate something like this..
http://cgi.ebay.com.au/ws/eBayISAPI....4288%26fvi%3D1
Thanks
Rock
推荐答案
嗨摇滚，
以下是您需要的两个javascript函数：
< script language =" javascript">
function showbigimage（colid， imgName）
{
document.getElementById（colid）.innerHTML ="< img src =''" + imgName +"''>" ;
}
函数hidebigimage（colid）
{
document.getElementById（colid） .innerHTML ="" ;;
}
< / script>
这是您要使用的HTML表格想要：
< table border = 1>
< tr>< td>< img src = i1.jpg onmouseover =''showbigimage （" big1"，
" i1_big.jpg"）''onmouseout =''hidebigimage（" big1"）''>< / td>
< td id =''big1''>< / td>< / tr>
< tr>< td>< img src = i2.jpg onmouseover =' 'showbigimage（" big2"，
" i2_big.jpg" ）''onmouseout =''hidebigimage（" big2"）''>< / td>
< td id =''big2''>< / td>< / tr>
< tr>< td>< img src = i3.jpg onmouseover =''showbigimage（" big3"，
" i3_big。 jpg"）''onmouseout =''hidebigimage（" big3"）''>< / td>
< td id =''big3''>< / td> < / tr>
< / table>
希望这会有所帮助
谢谢，上帝保佑！ ！
Ehsan
http：// ehsan。 bdwebwork.com
Hi Rock,
Following are two javascript functions that you will require:
<script language="javascript">
function showbigimage(colid, imgName)
{
document.getElementById(colid).innerHTML = "<img src=''"+imgName+"''>";
}
function hidebigimage(colid)
{
document.getElementById(colid).innerHTML = "";
}
</script>
Here is the HTML table that you will want:
<table border=1>
<tr><td><img src=i1.jpg onmouseover=''showbigimage("big1",
"i1_big.jpg")'' onmouseout=''hidebigimage("big1")''></td>
<td id=''big1''></td></tr>
<tr><td><img src=i2.jpg onmouseover=''showbigimage("big2",
"i2_big.jpg")'' onmouseout=''hidebigimage("big2")''></td>
<td id=''big2''></td></tr>
<tr><td><img src=i3.jpg onmouseover=''showbigimage("big3",
"i3_big.jpg")'' onmouseout=''hidebigimage("big3")''></td>
<td id=''big3''></td></tr>
</table>
Hope this helps
Thanks and God Bless!!
Ehsan
http://ehsan.bdwebwork.com
谢谢Ehsan，
感谢你去的麻烦。 />
这就是我想要的。现在来看看代码，这样我就能理解它。
问候，
Rock
在OZ。
Ehsan写道：
Thanks Ehsan,
Appreciate the trouble you went to.
It is what I wanted. Now to look at the code so I can understand it.
Regards,
Rock
in OZ.
Ehsan wrote:
嗨Rock，
以下是你需要的两个javascript函数：
< script language =" javascript">
function showbigimage（colid，imgName）
{/> document.getElementById（colid）.innerHTML ="< img src =' '" + imgName +"''>" ;;
}
函数hidebigimage（colid）
{
document.getElementById（colid）.innerHTML ="" ;;
}
< / script>
这是您需要的HTML表格：
<表格边框= 1>
< tr>< td>< img src = i1.jpg onmouseover =''showbigimage（" big1"，
" i1_big.jpg"）''onmouseout =' 'hidebigimage（" big1"）''>< / td>
< td id =''big1''>< / td>< / tr>
& lt; tr>< td>< img src = i2.jpg onmouseover =''showbigimage（" big2"，
" i2_big.jpg"）''onmouseout =''hidebigimage（" big2" ）''>< / td>
< td id =''big2''>< / td>< / tr>
< tr>< td>< img src = i3.jpg onmouseover =''showbigimage（" big3"，
" i3_big.jpg"）''onmouseout =''hidebigimage（" big3"）''>< / td>
< td id =''big3''>< / td>< / tr>
< / table>
希望这会有所帮助
谢谢，上帝保佑!!
Ehsan
http ：//ehsan.bdwebwork.com
Rockaécrit：
Rock a écrit :
我想创建这个..
一个2行的表格，下面有3行。
在第1列中我想要三个拇指大小的图像，每行1个
当一个图像滚动，较大的图像显示在第2栏
Hi,
I want to create this..
A 2 col table with 3 rows down.
In the 1st col I want three thumb size images, 1 in each row
When an image is rolled on, the larger image shows up in col 2
这很难，因为你需要预先充电所有图像
最佳方式是在页面上显示所有图像
其中一些隐形样式
< style type =" text / css"> ;
#visual img {position：absolute;能见度：隐藏;}
img＃bigest {position：relative}
#visual img.show {visibility：visible}
< /风格>
< script type =" text / javascript">
函数hidImages（）{
var P = document.getElementById （''visual''）。getElementsByTag名称（''IMG''）;
for（var i = 0; i< P.length; i ++）P [i] .className ='' '';
}
函数showImage（pictIndex）{
var P = document.getElementById（''visual''）。getElementsByTag Name （''IMG''）;
P [pictIndex-1] .className =''show'';
}
< / script>
< table>
< tr>
< td>
< img src =" thumb / p1.jpg"
onmouseover =" showImage（1）" onmouseout =" hidImages（）">
< img src =" thumb / p2.jpg"
onmouseover =" showImage（2）" onmouseout =" hidImages（）">
< img src =" thumb / p3.jpg"
onmouseover =" showImage（3）" onmouseout =" hidImages（）">
< / td>
< td id =" visual">
< img src =" photos / p1.jpg">
< img src =" photos / p2.jpg" id =" bigest">
< img src =" photos / p3.jpg">
< / td>
< / tr>
< / table>
在这个例子中你的bigest图片将是photos / p2.jpg
并且你给它id''bigest''
来安排这个尺寸的td
-
Stephane Moriaux et son [moins] vieux Mac
is it difficult because you need to pre-charge all images
best way would to have all images on the page
some of then styled in invisible
<style type="text/css">
#visual img { position:absolute; visibility: hidden;}
img#bigest { position: relative }
#visual img.show { visibility: visible }
</style>
<script type="text/javascript">
function hidImages() {
var P = document.getElementById(''visual'').getElementsByTag Name(''IMG'');
for(var i=0;i<P.length;i++) P[i].className = '''';
}
function showImage(pictIndex) {
var P = document.getElementById(''visual'').getElementsByTag Name(''IMG'');
P[pictIndex-1].className = ''show'';
}
</script>
<table>
<tr>
<td>
<img src="thumb/p1.jpg"
onmouseover="showImage(1)" onmouseout="hidImages()">
<img src="thumb/p2.jpg"
onmouseover="showImage(2)" onmouseout="hidImages()">
<img src="thumb/p3.jpg"
onmouseover="showImage(3)" onmouseout="hidImages()">
</td>
<td id="visual">
<img src="photos/p1.jpg">
<img src="photos/p2.jpg" id="bigest">
<img src="photos/p3.jpg">
</td>
</tr>
</table>
in this example your bigest image would be photos/p2.jpg
and you give to it the id ''bigest''
to arrange size of the td to this size
--
Stephane Moriaux et son [moins] vieux Mac
这篇关于想要将翻转图像创建为更大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
