Question

所以我试图根据点击的图标来改变后续页面的背景，我不确定我的代码是什么问题！这只是一个测试页面（请原谅奇怪的代码，但我需要在实际网站本身！）

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

Answer 1

这里有几个问题，我会尝试解决它们：

<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（'多云'）。 'cloudysky'不是一个完整的文件名，所以也许它是cloudysky.jpg？
用户正在点击链接并被发送到另一个页面，因此您在此处使用javascript所做的任何更改都不会在用户返回后保留。
document.getElementById（test）需要引用一个字符串，如document.getElementById（“test”）

给那些人一个机会并报告回来。

Answer 2

您的changeBgImage函数未通过字符串'image'

试试这个：

    <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

见下面的评论。

Answer 3

IDEA：在链接上创建一个指向php文件的链接。类似于chg_bg.php？image =多云

在php文件中，创建一些代码来设置背景

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

单击图像时背景图像更改

3 个答案: