哪位朋友可以帮我解释一下如下这段HTML代码吗，是关于淘宝店铺装修的

最近在网上找到一段淘宝店铺装修的HTML的代码，具体作用是当鼠标滑过图片时经过的图片会切换，也配有解释，但小弟是外行，看的不太懂，调了下也没成功，希望有哪位朋友帮忙详细解释下，谢谢！原文如下：
<div class="sub all_t10" style="width:300px;height:300px; dashed #ccc;background:url(图片一的地址);float:left;margin-right: 20px">

<div data-widget-config="{'trigger':'.all_t10','align':{'node':'.all_t10','offset':[0,-300],'points':['bc','tc']}}" data-widget-type="Popup" class="J_TWidget hidden">
<div style="width:298px;height:298px;background:url(图片二的地址)">
<a href="#" style="display:block;width:298px;height:298px;" target="_blank"></a></div>
</div>
</div>
注意：
“sub all_t10”这个序列号需要修改一下，全部修改，一个图片切换一个对应的数字。否则切换的图片会混掉。
图片网址链接换成自己做的网址链接。还有图片大小都要修改。
上面还有一个图片指向链接，大家可以换掉#。
{'node':'.all_t10','offset':[0,-300],'points':['bc','tc']}}"这段里面的【0，-300】的300一定要修改。修改成你要切换图片高度。

举报该问题

推荐答案 2014-03-14

1.sub all_t10一个图对应一个数字，不要重复就行了。

2.淘宝没做过，图片地址的话我不知道是怎么弄上去的，你应该清楚吧。
3.链接如果需要链到淘宝页页直接复制该页的地址替换掉这个#号。

最后说明一下，他这个切换图片用的是一张宽300像素高600像素的图片，也就是说两个切换图片实际上是在同一张图片里; [0,-300] 是定位shu标滑过的的图像，如果要改大小，比如你要做的图片是200X200像素大小的，你就做一张200X400高的图片，上半部是正常状态的，下半部是shu标经过时的图片，-300改成-200.其他数字也要相应修改。追问

好的，非常感谢，我先试试，谢谢您的详细解答，关于第一条“1.sub all_t10一个图对应一个数字，不要重复就行了。”一个图对应一个数字，那这切换的两张图，在代码中怎么更改，不是太清楚？是不是说我要是用两个这种效果的话，那有一个就用“sub all_t11” ?

追答

“那这切换的两张图”不是分开的两张图片，是用比如ps把两张状态图片放在一张图片里。

你说的一个图对应一个数字是当你要多张图片切换效果就改下这个数字sub all_t10，比如sub all_t11,sub all_t12，以此类推。

给你个图片吧，上面黄色就是正常状态下的，经过后就切换成下面红色图像了。