用JavaScript與HTML鏈接列表交換圖像

我正在嘗試使用JavaScript交換圖像。我有一個主要的內容區域負載一個圖像。我有一個鏈接列表的邊欄，我想用JavaScript來改變每個鏈接的圖像。這裏是我到目前爲止的代碼：用JavaScript與HTML鏈接列表交換圖像

<html> 
<head> 
<title>Rat Dog Inc. ~ Services</title> 
<script type="text/javascript"> 
var myImg; 
var myImage= []; 
myImage[0] = "../images/rd_surf_large.jpg"; 
myImage[1] = "../images/laundry.png"; 
myImage[2] = "../images/tug-o-war.png"; 
myImage[3] = "../images/cuddlepuppy.png"; 
myImage[4] = "../images/rd-howling.mp4"; 
function displayImg(){ 
    document.getElementById('myImage[]'); 
    } 
</script> 
</head> 
<body> 
<div id="main"> 
    <img src="../images/rd_surf_large.png" alt="Rat Dog Inc." id="myImg"/> 
</div> 
<div id="sidebar"> 
    <h2>Rat Dog Inc. Most Popular Services</h2> 
    <ul> 
     <li><a href="#" onClick="displayImg(myImage[0]);">Surfing Lessons</a>  <span style="font-size: 12px">(img)</span></li> 
     <li><a href="#" onClick="displayImg(myImage[1]);">Laundry Folding</a> <span style="font-size: 12px">(img)</span></li> 
     <li><a href="#" onClick="displayImg(myImage[2]);">Tug-O-War Arm Workouts</a> <span style="font-size: 12px">(img)</span></li> 
     <li><a href="#" onClick="displayImg(myImage[3]);">Cuddling</a> <span style="font-size: 12px">(img)</span></li> 
     <li><a href="#" onClick="displayImg(myImage[4]);">Howling Lessons</a>  <span style="font-size: 12px">(video)</span></li> 
    </ul> 
</div>

來源

2015-04-12 Gina Gina Bo-Bina

由於圖像是在服務器中，如果你需要加載每次點擊一個鏈接時，一個新的形象，你必須讓服務器爲新圖像的請求，並且將基本上重新加載圖像。如果您不希望在點擊圖片鏈接後重新加載頁面，我可以建議兩種方式： 1.預先加載所有圖像，併爲所有圖像設置顯示樣式，但僅顯示一種。然後每次點擊鏈接時使用JS，使對應的圖片可見並隱藏。 2.在點擊鏈接時調用ajax調用新圖片。 – Sidmeister

確定。這就是交易。當你把你的頁面上的圖像，像這樣：

<img src="image1.jpg" id="myImage">

我們分配我想「MYIMAGE」吧....如果我們想通過鏈接來改變圖像（我prefare一個按鈕），我們使用JavaScript來操縱它。您只需使用此方法稱爲：

document.getElementById()

這在我們的網頁查找元素的我最好。所以，如果我們把這個按鈕，我們的網頁上：

<button onclick="changeImage()">Change The Image</button>

，並把這個腳本（具有changeImage（）函數）：

<script> 
function changeImage(){ 
var myImage = document.getElementById("myImage"); 
//then we change the src of the image 
myImage.src="image2.jpg" 
} 
</script>

我們的圖像將改變我們的點擊按鈕。

僅供參考，請訪問：http://www.htmldog.com/guides/javascript/intermediate/thedom

謝謝

來源

2015-04-12 23:28:01

我會嘗試下一步！謝謝！ –

這很好，謝謝你！ –

，請嘗試使用的getElementById

的這種方法例如：

<img id="image" src="image1.jpg"> 
<button onclick="changeToImage2('image')">Image 2</button> 
<script> 
function changeToImage(id) { 
    var myImage = document.getElementById(id); 
    myImage.src = "image2.jpg"; 
} 
// then create other buttons and other functions to change the image. 
</script>

來源

2015-04-12 23:14:31

嗯不知道我的理解..我不是很好的javaScript，所以我需要更多的細分請:) –

您可以使用document.getElementById("image").src="image.png";更改元素的src標籤。

雖然你在做什麼，我建議你看看jQuery

來源

2015-04-12 23:29:21 Emobe

JavaScript是不正確。我不太確定你瞭解它是如何工作的。

首先，你的函數不接受任何參數，但你要爲它提供一個。它會忽略這個，因爲它不知道如何處理它。

接下來，你document.getElementById在displayImg()有錯誤的輸入。現在它真的在尋找一個ID爲「myImage []」的元素......其中沒有任何元素。

此外，你有一個你永遠不會使用的變量（myImg）。你應該可以擺脫它。

同樣，我收到你真的不知道的JavaScript以及或沒有得到理論背後的意義。如果您需要幫助，w3schools有一些很棒的教程。

來源

2015-04-12 23:32:24 Noah

顯然我沒有得到它，否則我不會在這裏大聲笑 –

用JavaScript與HTML鏈接列表交換圖像

回答

相關問題