Я пытаюсь сделать загруженное изображение и сделать его фоновым изображением

Мой код не работает, и я не могу понять, почему, я пытаюсь сделать загруженное изображение и сделать его фоновым изображением , без использования базы данных. Пожалуйста помоги! Я чаще всего работаю с HTML и CSS, но я пытаюсь использовать код jquery, указанный здесь, чтобы делать то, что я ищу.Я пытаюсь сделать загруженное изображение и сделать его фоновым изображением

Код:

<html> 
<head> 
    <title>Seamless Trial</title> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script> 
    <style> 
     img { 
      padding:1px; 
      border:1px solid black; 
      background-color: white; 
      width:100px; 
      } 
     article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } 
    </style> 
    <script language="JavaScript"> 
     <!-- 
       // Copyright 2001 by www.CodeBelly.com Please do *not* remove this notice. 

      var backImage = new Array(); // don't change this 

       // Enter the image filenames you wish to use. Follow the pattern to use more images. 
       // The number in the brackets [] is the number you number in the brackets [] is the number you 
       // will use in the function call to pick each image. 
       // Note how backImage[0] = "" -- which would set the page to *no* background image. 

      backImage[0] = "#"; 
      backImage[0].id = "blah"; 
      backImage[1] = "#"; 
      backImage[1].id = "blah"; 
      backImage[2] = "black-rough-leather.jpg"; 
      backImage[3] = "newspapers.jpg"; 
      backImage[4] = "seamless-fuzzy-leopard.jpg"; 

       // ----Do not edit below this line.--- 

      function changeBGImage(whichImage){ 
       if (document.body){ 
       document.body.background = backImage[whichImage];} 
      } 

     //--> 
     <!-- input thingy 
      function readURL(input) { 
       if (input.files && input.files[0]) { 
        var reader = new FileReader(); 

        reader.onload = function (e) { 
        $('#blah') 
         .attr('src', e.target.result) 
         .width(150) 
         .height(200); 
        }; 
       reader.readAsDataURL(input.files[0]); 
       } 
      } 
     // end input thingy --!> 
    </script> 
</head> 
<body> 
<input type='file' onchange="readURL(this);" /><br><br> 
<a href="javascript:changeBGImage(1)"><img id="blah" src="#" alt="your image" /></a> 

    <a href="javascript:changeBGImage(2)"><img src="black-rough-leather.jpg"></a><br><br> 
    <a href="javascript:changeBGImage(3)"><img src="newspapers.jpg"></a><br><br> 
    <a href="javascript:changeBGImage(4)"><img src="seamless-fuzzy-leopard.jpg"></a><br><br> 
    <a href="javascript:changeBGImage(5)"><img src=""></a><br><br> 

</body>

источник

2016-01-05 deganu

какой ошибки вы получаете в консоли браузера? –

Я не ошибаюсь, я просто не делаю то, что хочу. (под которым я имею в виду возможность сделать загруженное изображение в повторяющееся фоновое изображение либо автоматически при загрузке, либо при щелчке изображения после загрузки.) – deganu

Чтобы установить фон тела, вы должны сделать следующее.

document.body.style.background = "url('" + backImage[whichImage] + "')";

Пожалуйста, проверьте эту скрипку https://jsfiddle.net/sherin81/k463Ljzg/

источник

2016-01-05 06:30:16

Отлично! Спасибо! – deganu

Я пытаюсь сделать загруженное изображение и сделать его фоновым изображением

ответ

Смежные вопросы