单击图像时背景图像发生变化

因此，我试图根据点击的图标更改背景，并且我不确定我的代码有什么问题！这只是一个测试页面（请原谅奇怪的代码，但我需要它在实际的网站本身！）单击图像时背景图像发生变化

<!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

单击图像时背景图像发生变化

回答

相关问题