4

I a bit of noob and a magpie when it comes to using code in any web project I have tried. I'm still new to the game here.

Currently I'm building an Information Panel for my office network that will sit on the Active Desktop (We are still tied in to IE8 here so there's nothing modern about anything I can use!)

What I'd like is the ability for the user to have the Info Panel full screen on their desktop and then set the background of the tag to a desired image.

Currently I have (in a very raw form)

<script type="text/javascript">

function setBackgroundImage()
{
    var url = document.getElementById('bgchanger').value;
    document.getElementsByTagName('body')[0].style.backgroundImage = "url('" + url + "')";
    setCookie('userbg', url, 30);
}

</script>

<body onload="setBackgroundImage()" id="bg">

<input type="file" value ="Look" name="myFileSelect" input type="text" id="bgchanger" placeholder="Change Background Add URL" />
<input type="button" onclick="setBackgroundImage();" value="Change!" />

Which enables a user image selection plus setting of a cookie.

The bit I don't know is how to retrieve it and set it.

Clearly there has to be some logical stuff in there to check for a cookie, set the value as the background and not use the inputted text if one exists.

Any help gratefully received.

4

1 回答 1

1

这是一个带有代码的jsfiddle。如果您刷新页面，cookie 会被删除，但多次单击运行就可以了。

这是HTML

<div id="image-form">
  <label for="url">Image URL</label>
  <input type="text" id="url" value="http://stylegerms.com/wp-content/uploads/2013/06/Techno-Desktop-backgrounds-Desktop-Wallpaper.jpg" />
  <input type="button" value="Update" onclick="updateURL()" />
</div>
<!-- Place the JavaScript before </body> -->

这是您需要的 JavaScript

window.onload = function() {
  setBackground();
}

function updateURL() {
  var newURL = document.getElementById('url').value;
  setCookie('URL', newURL, 365);
  document.body.style.background = 'url('+newURL+') no-repeat';
  document.body.style.backgroundSize = 'cover';
  document.body.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = newURL;
  document.body.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = 'scale';
}

function setBackground() {
  var URL = getCookie('URL');
  document.body.style.background = 'url('+URL+') no-repeat';
  document.body.style.backgroundSize = 'cover';
  document.body.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = URL;
  document.body.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = 'scale';
}

function setCookie(c_name, value, exdays) {
  var exdate=new Date();
  exdate.setDate(exdate.getDate() + exdays);
  var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
  document.cookie=c_name + "=" + c_value;
}

function getCookie(c_name) {
  var c_value = document.cookie;
  var c_start = c_value.indexOf(" " + c_name + "=");

  if (c_start == -1)
    c_start = c_value.indexOf(c_name + "=");

  if (c_start == -1) {
    c_value = null;
  } else {
    c_start = c_value.indexOf("=", c_start) + 1;
    var c_end = c_value.indexOf(";", c_start);

    if (c_end == -1)
      c_end = c_value.length;

    c_value = unescape(c_value.substring(c_start,c_end));
  }
  return c_value;
}

这里有一点 CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
    background: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7') no-repeat;
    background-size: cover;

    -ms-filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", sizingMethod="scale")';
}

#image-form {
  display: inline-block;
  background: #fff;
  padding: 10px;
}
于 2013-09-06T13:37:23.407 回答