單擊圖像時背景圖像發生變化

因此，我試圖根據點擊的圖標更改背景，並且我不確定我的代碼有什麼問題！這只是一個測試頁面（請原諒奇怪的代碼，但我需要它在實際的網站本身！）單擊圖像時背景圖像發生變化

<!DOCTYPE HTML> 
<html> 
<head> 
<style type="text/css"> 

body { 

background: url('<?php echo $_GET['image']; ?>'; 

} 


</style> 


<script> 
    function showWeather(Weather) { 
    //alert(Weather); 
     myform.weather.value=Weather; 
    // alert(Weather); 

    // ._Weather 
     myform.submit(); 


} 
</script> 


<link href="teststyle.css" rel="stylesheet" type="text/css"> 
</head> 
<body background="images/gradientsky.jpg"> 
<div id="weather"> 

<ul id="nav-reflection"> 
<form method="post" action="cloudy_name.php" id="myform"> 
    <li class="button-color-1"><a href="cloudy_name.php?image=images/cloudysky.png" onclick="showWeather('cloudy');" title="My fancy link"><img src="images/cloudybubble.png" width="211" height="180" align="left"></a></li> 

    <input type="hidden" name="weather" value="whatever"> 
</form> 
</ul> 
</div> 

</body> 
</html>

來源

2012-04-20 Christine Austin

你要改變目標頁面的BG？ – chepe263 2012-04-20 19:54:16

是的，目的地頁面的背景被改變了，那個頁面正在變爲cloudy_name.php – 2012-04-20 19:57:16

由於您使用'window.location'進行重定向，因此您無法在目標頁面中更改樣式。另外，當你調用'getElementById'時，你應該在「test」周圍加引號。 – 2012-04-20 19:57:27

您在這裏有幾個問題，我會盡力解決這些問題：

<form method="post" action="cloudy_name.php" id="myform"> 
     <li class="button-color-1"><a href="javascript:showWeather('cloudysky')" onclick="changeBgImage(images/cloudysky)" title="My fancy link"><img src="images/cloudybubble.png" width="211" height="180" align="left"></a></li> 
</form>

你錯過了「ul」包裝。列表項不能單獨存在。
你在說showWeather（'cloudy'）。 'cloudysky'不是一個完整的文件名，所以也許它是cloudysky.jpg？
用戶正在點擊一個鏈接並被髮送到另一個頁面，所以您在JavaScript中所做的任何更改都不會在用戶返回時粘住。
的document.getElementById（測試）需要引用一個字符串，像這樣的document.getElementById（「測試」）

給那些一杆並提出報告。

來源

2012-04-20 19:58:10

感謝您找到我的愚蠢錯誤x_x！但不幸的是沒有解決我的問題！：[ – 2012-04-20 20:30:31

更新了上面的代碼。我相信我解決了你發現的問題。 – 2012-04-20 20:33:02

-2

想法：在鏈接上創建一個鏈接到一個PHP文件。像chg_bg.php？形象=渾濁

在PHP文件，創建一些代碼來設置背景

<style> 
    background: url('<php echo $_GET['image']; ?>'; 
</style>

來源

2012-04-20 20:03:33 chepe263

所以顯然我應該使用你的方法！我上面更新了我的代碼，試圖修復它，但它仍然不工作，也許我有一個愚蠢的錯誤，我看不到？ – 2012-04-22 17:11:41

創建一些cookie或會話變量來存儲值。我從@Joshua Pack的評論 – chepe263 2012-04-22 20:37:44

你changeBgImage功能沒有通過字符串「圖像」

嘗試這樣的：

<script type="text/javascript"> 
     function changeBgImage (image) { // added Image 
      var element = document.getElementById('test'); 
      element.style.backgroundImage = "url('"+image+"')"; // added single qoutes around image 
      // Took out window.location - see comments below for explanation 
      return false;// Added to stop Link execution 
     } 
    </script> 
</head> 
<body> 
<div id="test"> 
    <form method="post" action="cloudy_name.php" id="myform"> 
     <li class="button-color-1"><a href="#" onclick="showWeather('cloudy'); changeBgImage('images/cloudysky.png');" title="My fancy link"><img src="images/cloudybubble.png" width="211" height="180" align="left"></a></li> 
    </form> 
</div>

我添加了所有的JavaScript功能到的onclick，既showWeather和changeBgImage

請參閱下面的註釋。

來源

2012-04-20 20:07:41

讀了它，我拿出了window.location，因爲它會改變頁面。如果您需要它來保存它，則可能必須使用cookie來保存系統中保存的背景圖像，或者如果使用服務器端語言並且它們已登錄，則可以通過數據庫保存它。 – 2012-04-20 20:13:39

增加了'return false;'來使鏈接不執行，但是如果你需要它，你可以把它取出來。 – 2012-04-20 20:22:45

嗯，它仍然沒有鏈接到頁面，我需要在那裏有「javascript：showWeather（'cloudy'）」，因爲這最終會被用作放入數據庫的值。 – 2012-04-20 20:29:36

單擊圖像時背景圖像發生變化

回答

相關問題