2

I've read several helpful answers in re. image resizing using PHP and max-height etc.: Image resize script

However, my problem is that I want to resize an image of a graph that I am retrieving from another site (USGS), and putting into a site (zenfolio) that supports HTML and JavaScript, but not PHP. I have tried adjusting the specified height and width, but keep on ending up resizing only the amount of the image that shows on the page, and not the image itself (sorry I cannot post images as I am a new user).

I just posted them as png's above to demonstrate the problem, but the images are generated as follows:

<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>

This same image can be generated using this JavaScript, but for some reason that does not allow me to display more than one variable graph per page (I want to show both discharge (00060), and gage height (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>');

As you can tell, I have to use a separate site that I own to create the JavaScript file. The graphs are currently located in various iterations at: montanariverphoto.com/test clark fork gage height

I sincerely apologize if I have missed an obvious answer to this! I basically created this widget by reverse engineering a widget from another site, so perhaps my call is incorrect all together.

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 を作成しています。これは、ID がhttp://batpigandme.com/js/showstring.jsgageheightの JavaScript ファイルにハードコードされていることです。この ID を持つ要素はページ上に 1 つしか持てないため、後でコードを繰り返すと機能しません。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 に答える