Как создать несколько экземпляров фоновой картинки в JavaScript? - PullRequest
Новая
       0

Как создать несколько экземпляров фоновой картинки в JavaScript?

0 голосов
/ 27 марта 2011

Хорошо, поэтому, в основном, когда я нажимаю на кнопки ниже, я хочу, чтобы новая отдельная картинка показывала, где я указываю.Таким образом, я могу иметь несколько копий этой картинки в разных местах на странице в любое время.Помогите?! 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <link rel="stylesheet" type="text/css" href="styles/formstyle.css"/> 
  <script type = "text/javascript" src = "scripts/rearange.js">

    var count = 0;

      function northwest(image) {

        var temp;
   var myElement;
        var newDiv = document.createElement('div');
        newDiv.id = "image"+ count++;
   document.body.appendChild(newDiv);
   temp = newDiv.getAttribute("id") ;

   myElement = document.getElementById(temp).style;

        myElement.top = "30px";
        myElement.left = "340px";          }         

      function southeast(image) { 
        var myElement;//create reference
        myElement = document.getElementById('image').style;
        myElement.top = "338px";
        myElement.left = "667px";
     }

     function toggle(image) {
       var dom = document.getElementById(image);

       if (dom.style.display == '')
    dom.style.display = 'none';
   else
    dom.style.display = '';

  </script>

  <title>Exercise IV</title>

</head>

<body>  
    <div id = "para">
    Blah, Blah, Blah, Blah :)     
    </div>

    div id ="image" ></div>

    <div id = "links">
       <p style="height: 121px; width: 92px" >
          <input type="button" value = "northwest" onclick = "javascript: northwest('image')" />            
      <input type="button" value = "northeast" onclick = "javascript: northeast('image')" />            
      <input type="button" value = "southwest" onclick = "javascript: southwest('image')" />            
      <input type="button" value = "southeast" onclick = "javascript: southeast('image')" />

       </p>   
   </div>
   <div id = "show_Hide">
      <p style="width: 92px">
         &nbsp;<input type="button" value = "show/hide" onclick = "toggle('image')" />
         <input type="button" value = "show/hide" onclick = "toggle('image')" />
         <input type="button" value = "show/hide" onclick = "toggle('image')" /><input type="button" value = "show/hide" onclick = "toggle('image')" />
      </p>
   </div>

   <div id = "link" >    
      <p style="height: 14px; width: 180px">       
        <a href = "http://nova.umuc.edu/~ct386a28/lovej2ee/index.html">Home Page</a>
      </p>
   </div>


   /*********************************CSS*******************************************/
   #image {
     background-image:url('http://nova.umuc.edu/~ct386a28/lovej2ee/exercise4/images /kito.jpg');
     background-repeat: no-repeat;                                                                                 
 position: absolute; 
 top: 199px; 
     left: 513px; 
     color: inherit;
     width: 133px;
     height: 107px;
     filter:alpha(opacity=60);
     opacity:0.6;          
     } 

     #para {
     text-align: left;
     font-family: Arial;
     position: relative; 
     top: 73px; 
     left: 504px; 
     color: inherit;
     width: 132px;
     height: 341px;
     }

1 Ответ

1 голос
/ 27 марта 2011

Чтобы иметь два изображения, вам нужно два img элемента. Либо начните с наличия двух из них в документе (не очень гибких), либо посмотрите на document.createElement('img') в документах JavaScript.

РЕДАКТИРОВАТЬ: извините, вы сказали, фоновые изображения. То же самое, просто создайте больше DIV. Вам нужно будет изменить селектор CSS на что-то, что не является идентификатором (поскольку идентификаторы должны быть уникальными), поэтому ... сделайте его классом. 

.image { /* instead of #image */
  /* all that stuff */
}

и <div class="image"> в HTML. В JS вы можете сделать: 

var newDiv = document.createElement('div');
newDiv.className = 'image';
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...