如何在HTML/Javascript中創建活動/無效縮略圖

我正在爲網站的主頁設置「廣告牌」。該廣告牌將顯示一個活動圖像，右側將顯示用於更改廣告牌上圖像的縮略圖。如何在HTML/Javascript中創建活動/無效縮略圖

事情是這樣的：

Billboard

目前我換了相似圖片：

 <div id="_bbImage"> 
     <img src="images/bill1.png" class="bbImage" id= "MainBB"/> 
     </div><!--_bbImage--> 

     <div id="_bbTab1" class="inactiveTab"> 
     <a href="images/bill2.png" onclick="swap(this); return false;"> 
      <img src="images/bbtab1.png" class="bbTabImg" id="bbTabImg1" /> 
     </a> 
     </div><!--bbTab1-->

以及JavaScript函數如下：

function swap(image){document.getElementById("MainBB").src = image.href;}

但現在，我想讓縮略圖有一個不同的 enter image description here

我需要完成的類別轉換爲主動，但我也需要確保的是，之前選擇的選項卡被重新設置爲「不活動」類：當其選擇或「活動」來實現這一目標效果一流再次。

我想是這樣的：

function inactiveTab(name){document.getElementById(name).className = "inactiveTab";} 
function activeTab(name){document.getElementById(name).className = "activeTab";} 
function inactiveTabAll(){ 
inactiveTab("_bbTab1"); 
inactiveTab("_bbTab2"); 
inactiveTab("_bbTab3"); 
inactiveTab("_bbTab4"); 
inactiveTab("_bbTab5"); 
inactiveTab("_bbTab6");

}

有：

<div id="_bbTab1" class="inactiveTab"> 
     <a href="images/bill1.png" onclick="swap(this); inactiveTabAll(); activeTab("_bbTab1"); return false;"> 
      <img src="images/bbtab2.png" class="bbTabImg" id="bbTabImg1" /> 
     </a> 
</div><!--bbTab1-->

但是，這似乎並沒有工作，當我點擊縮略圖我只是得到鏈接到顯示「image/bill2.png」圖像的空白頁面。

有沒有人知道一個很好的方法來完成這一點，或任何人都可以指出我在正確的方向。

由於提前，

羅布

來源

2012-11-08 Rob_IGS

在我看來，你可以看看下面的jQuery方法：

http://api.jquery.com/hover/

它有回調函數，在這裏可以進行您的內容可見/不可見。

而是你的「inactivateTab」的 - 功能，您可以使用「隱藏」 - 方法：

來源

2012-11-08 15:19:23 mcknight

的問題是，你正在使用的標籤內的圖像的HREF。一個標籤最初是一個鏈接到給定的網址替換 href =「xx.png」與 href =「javascript：swap（this）; inactiveTabAll（）; activeTab（」_ bbTab1「）;」

我不明白什麼是在你的代碼中的href的原創角色，但你似乎並沒有無論如何都要使用它

來源

2012-11-08 15:23:09

相反img元素，使用div S和把圖像轉換成背景（使用background-image風格）。這使您可以定義應在純CSS中顯示哪個圖像。您也可以通過添加/刪除類的交換圖片：

.bbTabImg { background-image: url(images/bbtab1-inactive.png); } 
.bbTabImg.active { background-image: url(images/bbtab1.png); }

至於不活動，使用這個jQuery的：

$('.active').removeClass('active');

此找到與active類的所有元素，並把它關閉。現在你可以設置其中一個再次激活，上面的CSS將加載正確的圖像。

來源

2012-11-08 15:33:29

如何在HTML/Javascript中創建活動/無效縮略圖

回答

相關問題