懸停和點擊圖片顯示內容（與初始顯示的內容）

當最初加載，右側爲內容的初始圖像顯示（並應該着色）。
將鼠標懸停在圖像上時，圖像將變爲彩色，該圖像的內容將顯示在右側。
點擊後，內容將保留在右側，圖像將保持着色，因爲它是選定的內容。

我知道你可以只讓圖像簡單地使用CSS的彩色圖像顯示有一個翻轉功能，但是我不知道如何使圖像停留彩色點擊，如何在正確的內容時出現，我認爲可以使用Jquery或Javascript。

它看起來像什麼： http://i.stack.imgur.com/73oFL.png

<ul id="testb"> 
    <li id="companies"> 
     <img src="images/linkedin.gif" width="120" height="95" alt="" /> 
     <img src="images/specsavers.gif" width="100" height="95" alt="" /> 
     <img src="images/avc.gif" width="110" height="95" alt="" /> 
    </li> 
    <li id="testcont">content here</li></ul>

#testb{ 
width:950px; 
margin:0 auto; 
list-style:none; 
padding:0; 
} 
#companies{ 
    width:440px; 
    float:left; 
    list-style:none; 
    padding:85px 0 45px 0; 
    margin:0; 
    height:130px; 
    display:block; 
} 
#testcont{ 
    float:left; 
    width:395px; 
    height:170px; 
    padding:45px 0 45px 70px; 
    margin:0; 
    background: url(images/testglow.gif) no-repeat; 
}

如果你能幫忙將非常感激。

感謝

來源

2015-04-12 xichil

你嘗試過這麼遠嗎？請顯示你這樣做的嘗試。我沒有看到任何**懸停狀態在您的CSS或JavaScript事件/功能，所以目前還不清楚問題是什麼。如果你期望人們只是讓願望清單發生，那麼你就錯了。堆棧溢出是開發人員調試源代碼，找到問題，解釋問題並提供解決方案（如果可能的話），**不是**用於發佈請求並希望獲得免費源代碼的站點。 – NewToJS

即使壽NewToJS是絕對正確，有時有點免費的源代碼可能會幫助你開始：

var contentValues = ["slide 1 content", "slide 2 content", "slide 3 content"]; 
 
var contentColors = ["#333333", "#777777", "#000000"]; 
 
$(function() { 
 
    $("#companies img").on("mouseover", function() 
 
    { 
 
     console.log($(this).data("slide")); 
 
     $("#testcont").html(contentValues[$(this).data("slide")]); 
 
     $("#testcont").css("background-color",contentColors[$(this).data("slide")]); 
 
     
 
    }); 
 

 
    $("#companies img").on("click", function() 
 
    { 
 
     console.log($(this).data("slide")); 
 
     
 
     $("#companies img").css("background-color", "transparent") 
 
     
 
     $(this).css("background-color", contentColors[$(this).data("slide")]); 
 
     
 
    }); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul id="testb"> 
 
    <li id="companies"> 
 
     <img data-slide="0" src="images/linkedin.gif" width="120" height="95" alt="" /> 
 
     <img data-slide="1" src="images/specsavers.gif" width="100" height="95" alt="" /> 
 
     <img data-slide="2" src="images/avc.gif" width="110" height="95" alt="" /> 
 
    </li> 
 
    <li id="testcont">content here</li> 
 

 
</ul>

來源

2015-04-12 16:24:36 RobertoNovelo

非常感謝，我不打算粗魯，只是希望代碼能夠爲我提供，更多的是指向正確的方向！我忘了提及這一點，因爲我完全不知道任何Javascript，並且在大約6年的時間裏幾乎沒有做過任何編碼。我已經嘗試了你的建議，但是我似乎不明白爲什麼它不在我的文檔中工作 - 但它是在提供的代碼段中，並且當我使用jsfiddle集成我的代碼時。 – xichil

沒問題的人！有時候一些代碼很適合開始移動。你包括jQuery嗎？這也應該包裝在一個$（function（）{ }）;看看我編輯過的編輯 – RobertoNovelo

我編輯了我的評論，你已經評論了我編輯的時間，所以不確定你是否會閱讀我的其他消息，以幫助我多出一點點！ https://jsfiddle.net/xowkc9fg/ - 在jsfiddle上它完美的工作，但是當我把它放到html文檔中不起作用？懸停或點擊圖片時，沒有任何變化。 – xichil

懸停和點擊圖片顯示內容（與初始顯示的內容）

回答

相關問題