今天在做網(wǎng)站頁面的時候發(fā)現(xiàn),在超鏈接中也可以使用id來引用,例如用在這樣的場合:
在一些電子商務(wù)網(wǎng)站的產(chǎn)品頁面的圖片會有一個鏈接,用于在新頁面查看產(chǎn)品的圖片,html代碼:
<!-- 開新窗口瀏覽大圖 -->
<div class="viewFull">
<img src="$content.getURI('images/show-room/zoom_in.gif')"/>
<a id="bigImgC" href="$ImageList1.get(0).getImageUrl_big()" target="_blank">
View Large Image
</a>
</div>
<!-- 新窗口瀏覽大圖結(jié)束 -->
這樣,可看到<a>鏈接的id為bigImgC,在js方法中可以動態(tài)給bigImgC的鏈接地址賦值,js代碼:
function change1(url,index,obj){ //onmouse at the product image event
var objA = document.getElementById('bigImgA');
var objS = document.getElementById('bigImg');
var objC = document.getElementById('bigImgC');
objS.src = url;
objA.href = bigImg1[index];
objC.href = bigImg1[index];
if(parentIdStr != ""){
document.getElementById(parentIdStr).className = '';
obj.parentNode.className = "active";
}else{
obj.parentNode.className = "active";
}
parentIdStr = obj.parentNode.id;
}
change1()方法在用戶鼠標放在產(chǎn)品大圖片下的的不同小圖片時觸發(fā),當用戶鼠標放在小圖片上時,大圖片的區(qū)域?qū)@示相應(yīng)的大產(chǎn)品圖片,并且objC處的<href>的值將會變化,會賦與同產(chǎn)品大圖片相同的url。
產(chǎn)品大圖下的小圖片代碼:
#foreach($imgVo in $ImageList1)
<li id="$imgVo.getProductImageId()" #if($index1==0)class="active"#end>
<img src="$imgVo.getImageUrl_little()" width="40"
height="40" onmouseover="change1(mediumImg1[$index1],$index1,this)"
/>
</li>
可見,html的操作內(nèi)容還是可以挖掘出不少東東的@
如對本文有疑問,請?zhí)峤坏浇涣髡搲?,廣大熱心網(wǎng)友會為你解答!! 點擊進入論壇