Background image change when clicking a image
Question
So I'm trying to change the background a following page depending on what icon is clicked and I'm not sure whats wrong with my code! This is just a test page (Please excuse the weird code, but i need it in the actual site itself!)
<!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>
3 answers
solution1
1 2012-04-20 19:58:10
You have a couple problems here, I'll try and address them:
<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>
- You're missing the "ul" wrapper. List-items can not exist by themselves.
- You're saying showWeather('cloudy'). 'cloudysky' is not a full filename, so maybe it's cloudysky.jpg?
- The user is clicking a link and being sent to another page, so any changes you make here with javascript won't stick once the user returns.
- document.getElementById(test) needs to reference a string, like so document.getElementById("test")
Give those a shot and report back.
solution2
0 2012-04-20 20:07:41
Your changeBgImage function didn't pass through the string 'image'
Try this:
<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>
I added all javascript functions into the onclick, both showWeather and changeBgImage
See comments below.
solution3
-2 2012-04-20 20:03:33
IDEA: on the link create a link to a php file. something like chg_bg.php?image=cloudy
On the php file, create some code to set the background
<style>
background: url('<php echo $_GET['image']; ?>';
</style>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.