Изменение размера графического фона без PHP - PullRequest
Новая
       24

Изменение размера графического фона без PHP

2 голосов
/ 21 июня 2011

Я прочитал несколько полезных ответов в ре.изменение размера изображения с использованием PHP, max-height и т. д .: скрипт изменения размера изображения

Однако моя проблема заключается в том, что я хочу изменить размер изображения графика, получаемого с другого сайта (USGS) и размещение на сайте (zenfolio), который поддерживает HTML и JavaScript, но не PHP.Я попытался отрегулировать указанную высоту и ширину, но продолжаю изменять размер только того изображения, которое отображается на странице, а не самого изображения (извините, я не могу публиковать изображения, поскольку я новый пользователь).

Я только что опубликовал их в виде 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

Я искренне извиняюсь, если пропустил очевидный ответ на этот вопрос!Я в основном создал этот виджет путем обратного инжиниринга виджета с другого сайта, поэтому, возможно, мой звонок неверен все вместе.

1 Ответ

1 голос
/ 21 июня 2011

Это обязательно должно быть фоновое изображение? Возможно их масштабирование (с использованием 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="..." />

для вашей другой проблемы идентификаторы должны быть уникальными на странице. В вашем примере кода вы создаете div с идентификатором gageheight, и этот идентификатор жестко запрограммирован в вашем файле javascript по адресу http://batpigandme.com/js/showstring.js., поскольку на странице может быть только один элемент с этим идентификатором, если вы Повторите код позже, он не будет работать. Вам нужно изменить этот скрипт, чтобы вы могли передавать идентификатор в виде переменной, например: 

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);
...