2016-04-12 10 views
0

誰かが私にどのようにCSSから画像を配置することができますか?私はページの一番上の一行にそれらを持っていますが、私はクラスで行うことができるように手動でそれぞれの位置を求めます。ここで配列から画像を配置する

.twelfth { 
    position:absolute; 
    top: 35%; 
    left: 75%; 
    z-index:2; 
} 

は、現時点で私が持っているコードです:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Hello</title> 
    <link rel="stylesheet" 
      href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="stils.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</head> 
<body> 
    <script> 
     function random_imglink(select) { 
      if (select > 5) { 
      } 
      var myimages = new Array(); 
      myimages[0] = "monalisa.jpg" 
      myimages[1] = "monalisa.jpg" 
      myimages[2] = "monalisa.jpg" 
      myimages[3] = "monalisa.jpg" 
      myimages[4] = "monalisa.jpg" 
      myimages[5] = "monalisa.jpg" 
      myimages[6] = "monalisa.jpg" 
      myimages[7] = "monalisa.jpg" 
      myimages[8] = "monalisa.jpg" 
      myimages[9] = "monalisa.jpg" 
      myimages[10] = "monalisa.jpg" 
      myimages[11] = "monalisa.jpg" 
      myimages[12] = "monalisa.jpg" 

      //specify corresponding links below 
      var imagelinks = new Array() 
      imagelinks[0] = "http://www.facebook.com" 
      imagelinks[1] = "http://www.w3schools.com" 
      imagelinks[2] = "http://www.microsoft.com" 
      imagelinks[3] = "http://www.dynamicdrive.com" 
      imagelinks[4] = "http://www.freewarejava.com" 
      imagelinks[5] = "http://www.tutorialspoint.com" 
      imagelinks[6] = "http://www.netscape.com" 
      imagelinks[7] = "http://www.codepen.io" 
      imagelinks[8] = "http://www.youtube.com" 
      imagelinks[9] = "http://www.imdb.com" 
      imagelinks[10] = "http://www.google.com" 
      imagelinks[11] = "http://www.apple.com" 
      imagelinks[12] = "http://www.skype.com" 
      var size = myimages.length 

      for (var i = 0; i < select; i++) { 
       var index = Math.floor(Math.random() * size); 
       document.write('<a href=' + '"' + imagelinks[index] + '"' + '><img src="' + myimages[index] + '" border=0 width="10%"></a>'); 

       var tmp = myimages[index]; 
       myimages[index] = myimages[size - 1]; 
       myimages[size - 1] = tmp; 

       tmp = imagelinks[index]; 
       imagelinks[index] = imagelinks[size - 1]; 
       imagelinks[size - 1] = tmp; 
       --size; 
      } 
     } 
     random_imglink(12); 
    </script> 
</body> 
</html> 

答えて

0

このようなものをお探しですか? https://css-tricks.com/almanac/selectors/n/nth-child/

a:nth-child(12) { 
    position:absolute; 
    top: 35%; 
    left: 75%; 
    z-index:2; 
} 
+0

写真はリンクとして機能していません。リンクはありますが、写真と同じ行にあり、写真の後の空白部分に続きます。ページはスクロールバーを使用せずに画面に収まる必要がありますが、リンクのために表示されません。ここに何か提案はありますか? – Sta

+0

タグスタイルに '{display:block}'を追加してみてください – sadpanda

0

のようなJSONオブジェクトの配列を作成します。

var images = new Array(); 
images.push({'name' : 'xyz.png', 'link' : 'http://example.com', 'left' : '', 'top' : ''}); 

を基本的には任意の変数を追加することができ、追加したい属性。そして、この配列を横断します。