鏈接圖像和文字

Question

我目前正在開發一個網絡應用程序，我希望用戶評分圖像。我使用Polldaddy.com作爲評級小部件的來源。

<div id="scriptwrapper"> 
    <script type="text/javascript"> 
    var slides = [{ 
     img : 'slidepagepic01.jpg', 
     desc : 'Cotswolds, England' 
    }, { 
     img : 'slidepagepic02.jpg', 
     desc : 'Patagonia, Chile' 
    }, { 
     img : 'slidepagepic03.jpg', 
     desc : 'Kauai, Hawaii' 
    }, { 
     img : 'slidepagepic04.jpg', 
     desc : 'Morzine, France' 
    }, { 
    img : 'slidepagepic05.jpg', 
     desc : 'Fernando De Noronha, Brazil' 
    }, { 
     img : 'slidepagepic06.jpg', 
    desc : 'Isla Vieques, Puerto Rico' 
    }]; 
</script> 
</div> 
<div style="overflow: hidden; position: relative;" id="wrapper"><div 
    style="position: relative; top: 0px; height: 100%; width: 100%;" id="swipeview- 
slider"><div data-upcoming-page-index="5" data-page-index="5" style="position: 
absolute; top: 0px; height: 100%; width: 100%; left: -100%;" id="swipeview-masterpage- 
0"><img src="slidepagepic06.jpg" class="loading" height="470" width="328"><span>Isla 
Vieques, Puerto Rico</span></div><div class="swipeview-active" data-upcoming- 
page-index="0" data-page-index="0" style="position: absolute; top: 0px; height: 100%; 
width: 100%; left: 0%;" id="swipeview-masterpage-1"><img style="left: -1px; width: 
339px; top: 0px; height: 420px;" src="slidepagepic01.jpg" class="loading"> 
<span>Cotswolds, England</span></div><div data-upcoming-page-index="1" data-page- 
index="1" style="position: absolute; top: 0px; height: 100%; width: 100%; left: 
100%;" 
id="swipeview-masterpage-2"><img src="slidepagepic02.jpg" class="loading" height="470" 
width="328"><span>Patagonia, Chile</span></div></div></div> 

<ul id="nav" style="padding-left: 11px; left: 158px; width: 203px; top: 8px; height: 
18px;"><li id="prev" onclick="gallery.prev()"> - </li><li class="selected" 
onclick="gallery.goToPage(0)"><br></li><li class="" onclick="gallery.goToPage(1)"> 
<br></li><li class="" onclick="gallery.goToPage(2)"><br></li><li class="" 
onclick="gallery.goToPage(3)"><br></li><li class="" onclick="gallery.goToPage(4)"> 
<br></li><li class="" onclick="gallery.goToPage(5)"><br></li><li id="next" 
onclick="gallery.next()"> + </li></ul> 

這個編碼是從seattleclouds.com和那是我目前正在建設的應用程序。該代碼用於圖像滑塊。我想將滑塊中的不同圖像鏈接到它自己的獨特評級小部件。問題是我不確定在哪裏插入評級小部件的編碼。我已經呆了近2周。請協助

Answer 1

我建議包裝在<a>標籤所以每個<img>標記，例如：

<img src="slidepagepic06.jpg" class="loading" height="470" width="328"><span>Isla
Vieques, Puerto Rico</span></div><div class="swipeview-active" data-upcoming- page-index="0" data-page-index="0" style="position: absolute; top: 0px; height: 100%;
width: 100%; left: 0%;" id="swipeview-masterpage-1">

將成爲：

<a href="www.WIDGET URL.com"><img src="slidepagepic06.jpg" class="loading" height="470" width="328"><span>Isla
Vieques, Puerto Rico</span></div><div class="swipeview-active" data-upcoming- page-index="0" data-page-index="0" style="position: absolute; top: 0px; height: 100%;
width: 100%; left: 0%;" id="swipeview-masterpage-1"></a>