将图像与文本链接

时间:2013-07-12 16:34:06

标签: javascript html

我目前正在开发一个网络应用,我希望用户对图像进行评分。我使用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,那就是我正在构建应用程序的地方。代码用于图像滑块。我想将滑块中的不同图像链接到它自己独特的评级小部件。问题是我不确定在哪里插入评级小部件的编码。我已经待了将近两个星期了。请协助

1 个答案:

答案 0 :(得分:0)

我建议在<img>代码中包装每个<a>代码,例如:

<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>