小贝子编程

将随机选择的照片从指定的链接集成到网页中



在为我的同事编码网站时，我遇到了一个问题。他转售由朋友给他的T恤，并通过在他当前的eBay页面上列出了T恤。他要求我为他编写一个网站，该网站将更多地推广他的T恤，并希望我允许客户点击他网站上的衬衫，以重定向到相应的eBay页面。我希望能够从他的eBay页面中随机生成图像，并在网站上显示它们，因此能够将用户从网站重定向到他的eBay页面。

编辑：我已经在.html文件中包含一个脚本，以随机选择图像。我的主要问题是能够从eBay本身中随机选择此类图像。

这是页面的HTML：

    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ADARA Enterprises</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />  
</head>
<script type="text/javascript">
  var imageURLs = [
       "http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg"
     , "http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg"
     , "http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg"
  ];
  function getImageTag() {
    var img = '<img src="';
    var randomIndex = Math.floor(Math.random() * imageURLs.length);
    img += imageURLs[randomIndex];
    img += '" alt="Some alt text"/>';
    return img;
  }
</script>
</head>
<body>
    <div id="background">
        <div id="page">
            <div id="header">
                <span id="connect">
                    <a href="http://www.adaraenterprises.com" target="_blank" class="facebook"></a>
                    <a href="http://www.adaraenterprises.com" target="_blank" class="twitter"></a>
                    <a href="http://www.adaraenterprises.com" target="_blank" class="vimeo"></a>
                </span>
                <a href="index.html" id="logo"></a> <!-- /#logo -->
                <ul id="navigation">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <!-- <li><a href="blog.html">Blog</a></li> -->
                    <li><a href="shop.html">Shop</a></li>
                    <li class="selected"><a href="contact-us.html">Contact Us</a></li>
                </ul>
            </div> <!-- /#header -->
            <div id="contents">
                <div id="main">
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
                        quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, 
                        vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
                    </p>
                    <address>
                        <span>Telephone numbers:</span>
                        555-5678901 to 555-5678902
                        <span>Email Address:</span>
                        adarasomething@whateverthehell.com
                        <span>Street Address:</span>
                        4th Lit Street, 73813 Yeet, CO
                    </address>
                </div>
                <div id="featured">
                    <ul>
                        <li><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
                        <li><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
                        <li><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
                        <li class="last"><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
                    </ul>
                    <a href="shop.html" class="button">shop here!</a> 
                </div>
            </div> <!-- /#contents -->
            <div id="footer">
                <div id="description">
                    <div>
                        <a href="index.html" class="logo"></a>
                        <span>&copy; Copyright &copy; 2017. <a href="index.html">ADARA Enterprises</a> All rights reserved</span>
                    </div>
                    <p>
                        This is just filler text. <br>
                        <br>
                        Filler text.
                    </p>
                </div>
                <div class="navigation">
                    <a href="index.html">Home</a>|
                    <a href="about.html">About</a>|
                <!--    <a href="blog.html">Yeet</a>| -->
                    <a href="shop.html">Shop</a>|
                    <a href="contact-us.html">Contact Us</a>
                </div>
            </div> <!-- /#footer -->
        </div> <!-- /#page -->
    </div> <!-- /#background -->
</body>
</html>

这是与之关联的CSS文件：

html {
    font-family: 'Trebuchet MS', sans-serif, Arial, Helvitica;
}
body {
    background-color: #ffffff;
    margin: 0;
    // padding-top: 19px;
    min-height: 100%;
}
#background {
    background: url(https://static.pexels.com/photos/29724/pexels-photo-29724.jpg) repeat;
    min-height: 100%;
    //border-top: 1px solid #000000;
    margin: 0;
}
#page {
    width: 960px;
    margin: 0 auto;
    min-height: 100%;
    height: 100%;
}
@font-face {
    font-family: 'Arial Bold';
    src: url('fonts/corben-bold-webfont.eot');
    src: local('?'), url('fonts/corben-bold-webfont.woff') format('woff'), 
        url('fonts/corben-bold-webfont.ttf') format('truetype'), 
        url('fonts/corben-bold-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*
img {
    border: 0;
}
*/
#connect .facebook, #connect .twitter, #connect .vimeo {
    background: url(../images/icons.png) no-repeat;
}
/*------------------------------ HEADER ------------------------------*/
#header {
    background: url(../images/bg-header.png) no-repeat center top;
    min-height: 340px;
    margin-bottom: 20px;
}
#connect {
    float: left;
    display: inline-block;
    height: 30px;
    width: 300px;
    margin: 15px 0 15px 10px;
}
#connect a {
    display: inline-block;
    height: 30px;
    margin: 0 10px;
    padding: 0;
}
#connect .facebook {
    background-position: 0 2px;
    width: 27px;
}
#connect .twitter {
    background-position: 0 -36px;
    width: 36px;
}
/* #connect .vimeo {
    background-position: 0 -74px;                // Removed Vimeo Logo. Can implement any other logo here with matching dimensions
    width: 32px; */
}
#infos {
    float: right;
    color: #ffe680  ;
    display: inline-block;
    height: 30px;
    width: 200px;
    margin: 15px 0;
}
#infos  a {
    color: #ffe680;
    font-family: Arial;
    font-size: 14px;
    line-height: 30px;
    margin: 0 5px;
    text-decoration: none;
}
/** Logo **/
#logo {
    clear: both;
    display: block;
    height: 217px;
    width: 950px;
    margin: 0 auto;
}
/** Navigation **/
#navigation {
    height: 40px;
    list-style-type: none;
    margin: 0;
    display: inline-block;
    padding: 8px 20px 12px 84px;
}
#navigation li {
    float: left;
    font-family: 'Arial Black';
    font-size: 22px;
    font-weight: bold;
    line-height: 40px;
    width: 186px;
    text-align: center;
}
#navigation a {
    color: #ffe680;
    text-decoration: none;
    text-shadow: 1px 1px #C3A33B;
}
#navigation a:hover, #navigation li.selected a {
    color: #FFFFAC;
    text-shadow: 1px 1px 0 #C3A33B;
}
/*------------------------------ CONTENTS ------------------------------*/
#contents {
    margin: 0 0 40px;
    padding: 0 5px;
}
#main {
    background: url(../images/border-dashed.jpg) repeat-x left bottom;
    margin: 0 0 30px;
    padding: 0 0 30px;
}
#main p {
    color: #ffe680;
    font-size: 14px;
    line-height: 20px;
    margin: 0;
    padding: 0 0 20px;
    text-shadow: 1px 1px #C3A33B;
}
#main p a {
    color: #ffe680;
    text-shadow: 1px 1px #C3A33B;
}
#main address {
    color: #FFFFAC;
    font-style: normal;
    width: 350px;
    margin: 0 auto;
    text-align: center;
    text-shadow: 1px 1px #C3A33B;
}
#main address span {
    color: #ffe680;
    text-shadow: 1px 1px #C3A33B;
    display: block;
    font-family: 'Arial Black';
    font-size: 18px;
    line-height: 20px;
    margin: 20px 0;
    width: 350px;
}
/* #adbox {
    background: #FFFFAC url(../images/bottom-shadow-headliner.jpg) no-repeat center bottom;
    height: 371px;
    width: 935px;
    margin: 0 auto;
    padding: 7px 7px 22px;
    position: relative;
}
#adbox img {
    height: 371px;
    width: 935px;
    margin: auto; 
}
*/
#featured {
    background: url(../images/border-dashed.jpg) repeat-x left bottom;
    padding: 0 0 42px;
    position: relative;
}
#featured ul {
    display: inline-block;
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
}
#featured ul li {
    float: left;
    background: #FFFFAC url(../images/bottom-shadow-img.jpg) no-repeat center bottom;
    height: 253px;
    width: 204px;
    margin-right: 28px;
    padding: 6px 6px 15px;
}
#featured ul li.last {
    margin-right: 0;
}
#featured ul li img {
    border: 1px solid #e4e0d1;
}
#featured a.button {
    background: url(../images/bg-button.jpg) no-repeat;
    color: #C3A33B;
    display: block;
    font-family: 'Arial Black';
    font-size: 18px;
    height: 30px;
    line-height: 30px;
    width: 144px;
    padding: 4px 0 6px;
    text-align: center;
    text-decoration: none;
    position: absolute;
    bottom: -20px;
    left: 403px;
}
/*------------------------------ Blog Page ------------------------------*/
#blogs {
    background: url(../images/border-dashed.jpg) repeat-x left bottom;
    padding: 0 0 20px;
    position: relative;
}
#blogs div {
    background: url(../images/border-dashed.jpg) repeat-x left bottom;
    display: inline-block;
    margin: 0 0 20px;
    padding: 0 0 20px;
}
#blogs div.last {
    background: none;
    margin: 0;
}
#blogs span {
    float: left;
    background: #FFFFAC url(../images/bottom-shadow-img.jpg) no-repeat center bottom;
    display: block;
    height: 253px;
    width: 204px;
    margin-bottom: 6px;
    margin-right: 40px;
    padding: 6px 6px 15px;
}
#blogs span img {
    border: 1px solid #e4e0d1;
}
#blogs h3 {
    background: url(../images/border-dashed.jpg) repeat-x left bottom;
    line-height: 30px;
    margin: 0 0 20px 258px;
    padding: 0 0 10px;
}
#blogs p {
    color: #ffe680;
    max-height: 160px;
    line-height: 20px;
    margin: 0 0 20px 258px;
    padding: 0 0 20px;
    overflow: hidden;
    text-shadow: 2px 2px #C3A33B;
}
#blogs p a {
    color: #ffe680;
    text-shadow: 2px 2px #C3A33B;
}
#blogs a.more {
    color: #C3A33B;
    font-style: italic;
    text-decoration: none;
}
#blogs div.buttons, #blogs div.blog-entry-buttons {
    background: none;
    display: inline-block;
    width: 328px;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: -20px;
    left: 311px;
}
#blogs div.buttons a, #blogs div.blog-entry-buttons a {
    float: left;
    background: url(../images/bg-button.jpg) no-repeat;
    color: #C3A33B;
    display: block;
    font-family: 'Arial Black';
    font-size: 18px;
    height: 30px;
    line-height: 30px;
    width: 144px;
    margin-right: 20px;
    padding: 4px 0 6px; 
    text-align: center;
    text-decoration: none;
}
#blogs div.blog-entry-buttons {
    width: 690px;
    left: 258px;
}
#blogs div.blog-entry-buttons a.back {
    float: right;
    font-size: 16px;
    margin-right: 0;
}
/*------------------------------ Shop Page ------------------------------*/
#shop {
    background: url(../images/border-dashed.jpg) repeat-x left bottom;
    padding: 0 0 20px;
    position: relavive;
}
#shop ul.items {
    display: inline-block;
    list-style-type: none;
    margin: 0 auto 16px;
    padding: 0;
}
#shop ul.items li {
    float: left;
    color: #ffe680;
    height: 340px;
    width: 216px;
    margin-bottom: 20px;
    margin-right: 28px;
}
#shop ul.items li span {
    background: #FFFFAC url(../images/bottom-shadow-img.jpg) no-repeat center bottom;
    display: block;
    height: 253px;
    width: 204px;
    margin-bottom: 10px;
    padding: 6px 6px 14px;
}
#shop ul.items li span img {
    border: 1px solid #e4e0d1;
}
#shop ul.items li span.price {
    float: right;
    background: none;
    color: #FFFFAC;
    display: inine-block;
    font-size: 17px;
    height: 20px;
    line-height: 20px;
    width: 80px;
    margin: 0;
    padding: 0;
    text-align: right;
}
#shop ul.items li a.buy {
    background-color: #ffe680;
    color: #C3A33B;
    display: block;
    font-family: 'Arial Black';
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    width: 80px;
    border-radius: 3px;
    margin: 13px auto 0;
    padding: 1px 0 4px;
    text-align: center;
    text-decoration: none;
}
#shop ul.items li.last {
    margin-right: 0;
}
/*------------------------------ FOOTER ------------------------------*/
#footer {
    padding: 0 5px;
}
#description {
    background: url(../images/border-dashed.jpg) repeat-x left bottom;
    margin: 0 0 30px;
    padding: 0 0 30px;
}
#description div {
    float: left;
    width: 180px;
    margin-right: 50px;
}
/*#description div a.logo {
    background: url(../images/logo-footer.gif) no-repeat;
    display: block;
    height: 30px;
    width: 175px;
    margin: 0 0 10px;
}
*/
#description div span {
    padding-bottom: 5px;
    color:#ffe680;
    display: block;
    font-size: 11px;
    line-height: 20px;
    text-shadow: 1px 1px #C3A33B;
}
#description div span a {
    color: #ffe680;
    text-decoration: none;
    text-shadow: 1px 1px #C3A33B;
}
#description p {
    color: #ffe680;
    font-size: 13px;
    line-height: 20px;
    margin: 20px 0;
    text-align: justify;
    text-shadow: 1px 1px #C3A33B;
}
#description p a {
    color: #ffe680;
    text-shadow: 1px 1px #C3A33B;
}
#footer div.navigation {
    color: #ffe680;
    font-size: 14px;
    line-height: 20px;
    width: 338px;
    margin: 0 auto 20px;
    text-shadow: 0 1px 0 #C3A33B;
}
#footer div.navigation a {
    color: #ffe680;
    padding: 0 15px;
    text-decoration: none;
    text-shadow: 1px 1px 0 #C3A33B;
}
#footer div.navigation a:hover {
    color: #FFFFAC;
}
/*------------------------------ For IE6 ------------------------------*/
#background {
    _height: 1440px;
    min-height: 100%;
}
#featured a.button {
    _top: 299px;
}
#blogs {
    _height: 620px;
}
#blogs div.buttons, #blogs div.blog-entry-buttons {
    _top: 620px;
}

我知道这很多，我并不是要任何人查看整个代码，并为我提供了我可以立即使用的完全修改的代码。我真的可以使用一些帮助来弄清楚算法来实现在页面上创建这些随机生成的图像的位置。

可以提供的任何帮助非常感谢！谢谢大家！

我最终创建了一个iframe并从电子湾站点中取出照片。由于内置的安全性无法创建实时图像拉力，因此我必须继续前进并在DB中手动使用图像。

还将href重定向到所有者的eBay销售页面，该页面在衬衫/产品的整体销售等方面遇到了问题。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium