4在HTML中的圖像，需要幫助，以顯示在大圖中徘徊時的小圖片

-4

所以我有3個圖像在HTML中排成一行，下面是一個大圖，下面的一個大圖與一個圖像相同前3名。沒有縮略圖或任何正在使用的東西。我想要做的就是當我將鼠標懸停在第一幅應該顯示的小圖像上並更改底部圖像時，如果我將鼠標懸停，它會變回其原始狀態，並且當我將大圖片懸停在底部時與其他兩張照片相同應該應該。有組織等（HTML）4在HTML中的圖像，需要幫助，以顯示在大圖中徘徊時的小圖片

PIC1 PIC2 pic3的

PIC4（較大）

<img src="guitars.jpg" width="80" height="60" alt="Guitars"> 
    <img src="control.jpg" width="80" height="60" alt="Control Room" onmouseover=""> 
    <img src="singing.jpg" width="80" height="60" alt="Singing Room" onmouseover=""> 
    <br> 
    <img src="guitars.jpg" width="400" height="300">

來源

2015-10-07 Sid

這不是一個非常複雜的任務，你嘗試過這麼遠嗎？ –

你的問題不清楚。請添加一些代碼示例。 – Kesavan

我是這個新手，iv嘗試了一些他們沒有工作的功能，只是試圖包裝我應該使用什麼概念來完成它。 – Sid

我要給你只有兩個元素（僅具有單一的一個例子事件功能），然後您可以擴展到3個圖像。基本的想法是將圖像的src更改爲圖像的this.src（在JS中是onmouseover事件）。然後在onmouseout上將src設置回它的正常圖像。如果原始圖像只是第一個小圖像，只需將其設置爲<img>元素即可。否則，請跟蹤它。

在下面的例子中#main是大圖像#apple是第一個小圖像和#banana第二個小圖像。

// This gets the original src of the main (large image) 
// That way when it's changed we can refer to this variable to revert it 
var original = document.getElementById("main").src; 

// On mouseover the "banana" image, that the src of the main image to src of the banana 
document.getElementById("banana").onmouseover = function(){ 
    document.getElementById("main").src = this.src; 
} 

// On mouseout of "banana" we change the main image back to it's original image 
document.getElementById("banana").onmouseout = function(){ 
    document.getElementById("main").src = original; 
}

Fiddle Example

來源

2015-10-07 05:27:16

非常感謝！說得通！ – Sid

@Wieczorek你能解釋爲什麼我需要var original = document.getElementById（「main」）。src;在一開始的時候？謝謝 – Sid

@Wieczorek如果你能解釋每一行請，這將是偉大的 – Sid

一個簡單的解決辦法是的onclick或onmouseover事件實現小圖象，並更新大圖像的src值。

參考見本：http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb

如果你想輕鬆地在將來添加更多的圖像，那麼你可能想自定義尋呼機的滑塊。

如果您習慣使用jQuery，我建議這個插件，因爲它是相當容易使用：

http://jquery.malsup.com/cycle2/ （退房轉盤尋呼機演示）

祝你好運！

來源

2015-10-07 05:05:49 Himechi90

謝謝！但我們只是應該用Javascript來做到這一點 – Sid

嘗試使用css:hover，:nth-of-type()，:not()，一般的兄弟姐妹選擇

img:not(.lg) { 
 
    width:50px; 
 
    height: 50px; 
 
} 
 

 
img.lg { 
 
    width:160px; 
 
    height:160px; 
 
    background-image:url(http://placehold.it/160/ff0000/ffffff); 
 
} 
 

 
img:nth-of-type(1) { 
 
    background-image:url(http://placehold.it/50/ff0000/ffffff); 
 
} 
 

 
img:nth-of-type(2) { 
 
    background-image:url(http://placehold.it/50/00ff00/ffffff); 
 
} 
 

 
img:nth-of-type(3) { 
 
    background-image:url(http://placehold.it/50/0000ff/ffffff); 
 
} 
 

 
img:nth-of-type(1):hover ~ .lg { 
 
    background-image:url(http://placehold.it/160/ff0000/ffffff); 
 
} 
 

 
img:nth-of-type(2):hover ~ .lg { 
 
    background-image:url(http://placehold.it/160/00ff00/ffffff); 
 
} 
 
img:nth-of-type(3):hover ~ .lg { 
 
    background-image:url(http://placehold.it/160/0000ff/ffffff); 
 
}

<img /> <img /> <img /> <br /> 
 
<img class="lg" />

來源

2015-10-07 05:21:18 guest271314

4在HTML中的圖像，需要幫助，以顯示在大圖中徘徊時的小圖片

回答

相關問題