2

我已经阅读了几个有用的答案。使用 PHP 和 max-height 等调整图像大小：图像调整大小脚本

但是，我的问题是我想调整从另一个站点 (USGS) 检索的图形图像的大小，并将其放入支持 HTML 和 JavaScript 但不支持 PHP 的站点 (zenfolio)。我尝试调整指定的高度和宽度，但最终只调整页面上显示的图像数量，而不是图像本身（抱歉，我是新用户，无法发布图像）。

我只是将它们发布为上面的 png 以演示问题，但图像生成如下：

<div id="riverlevels"> 
    <center> 
        <div id="MyWidget" style="background-image:url(http://waterdata.usgs.gov/nwisweb/graph?agency_cd=USGS&amp;site_no=12354500&amp;parm_cd=00065&amp;period=21);width:576px;Height:400px;"> 
            <br/> 
            <a href="http://montanariverphoto.com" style="line-height: 3em; font-family:times; font-size:12px; text-decoration:none; color:#000033" target="_blank">Montana River Photography </a></div> 
    </center> 
</div>
        </div>

可以使用此 JavaScript 生成相同的图像，但由于某种原因，我无法在每页显示多个变量图（我想同时显示放电 (00060) 和标高 (00065)）：

<script type="text/javascript"> 
wStation = "12354500";
wDays = "21";
wType = "00065";
wWidth = "576px"; 
wHeight = "400px";
wFColor = "#000033";
wTitle = "";
document.write('<div id="gageheight"></div>');
document.write('<scr'+'ipt type="text/JavaScript"src="http://batpigandme.com/js/showstring.js"></scr'+'ipt>');

如您所知，我必须使用自己拥有的单独站点来创建 JavaScript 文件。这些图表目前位于各种迭代中： montanariverphoto.com/test clark fork gage height

如果我错过了一个明显的答案，我真诚地道歉！我基本上是通过对另一个站点的小部件进行逆向工程来创建这个小部件的，所以我的调用可能都是不正确的。

4

1 回答 1

1

它绝对必须是背景图像吗？可以对它们进行缩放（使用background-size），但该属性没有得到很好的支持（基本上它在 Internet Explorer 中不起作用）。如果您可以使用图像标签，您的代码几乎可以按原样工作：

<img src="http://waterdata.usgs.gov/nwisweb/graph?agency_cd=USGS&amp;site_no=12354500&amp;parm_cd=00065&amp;period=21" width="576" height="400" alt="..." />

对于您的其他问题，ID 在页面上必须是唯一的。在您的代码示例中，您正在创建一个 ID 为 的 div gageheight，并且此 ID 被硬编码到您的 javascript 文件中，网址为http://batpigandme.com/js/showstring.js。由于页面上只能有一个具有此 ID 的元素，因此如果您稍后重复该代码，它将无法正常工作。您需要更改此脚本，以便可以将 ID 作为变量传递，例如：

wTitle = "";
wElement = "gageheight";
document.write('<div id="gageheight"></div>');
document.write('<scr'+'ipt type="text/JavaScript"src="http://batpigandme.com/js/showstring.js"></scr'+'ipt>');

然后在你的 JS 中：

var myElement = document.getElementById(wElement);
var JavaScriptCode = document.createElement("script");
JavaScriptCode.setAttribute('type', 'text/javascript');
JavaScriptCode.setAttribute("src", 'http://batpigandme.com/js/data2.js');
myElement.appendChild(JavaScriptCode);
于 2011-06-21T15:12:57.750 回答