Вопрос:

Пользовательский переключатель: почему при этом изображение не отображается?

html css

56 просмотра

2 ответа

4 Репутация автора

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

Я попытался удалить текстовую строку после амперсанда, и изображение загружается просто отлично, но неудивительно, что оно больше не работает в качестве переключателя, когда я это делаю. Apache2 сообщает об ошибках «невозможно выполнить статистику», поэтому это выглядит как ошибка на стороне сервера.

Relay.cgi:

#! /bin/bash
. /usr/lib/cgi-bin/relay/header.cgi
RunTest=$( $DIR/runtest )
if [[ $RunTest -eq 1 ]]
then
    nohup $DIR/Status.cgi
    exit
fi
cat $DIR/header.html
echo '</HEAD>'

echo '<BODY style="background-color:#00EE66">'
echo '<table>'
echo '<tr><h1><b>Aquarium Equipment Suspend</b></h1></tr>'
echo '<form action="/cgi-bin/relay/Timer.cgi">'
echo '<h2>'
echo '<p><b>'
echo '<tr>'
i=1
while read line
do
    echo '<tr>'
    echo '<th>'$line'</th>'
    echo '<th><input type="radio" name="R'$i'" value="15">'
    echo '<img src="/images/Button.png"></th>'  <=== Removed text for testing.  Image loads.
    echo '<th><input type="radio" name="R'$i'" value="30">'
    echo '<img src="/images/Button.png&text=30 Minutes"></th>'  <=== Radio button works.  Image does not load.
    echo '<th><input type="radio" name="R'$i'" value="60">'
    echo '<img src="Button.png&text=60 Minutes"></th>'
    echo '<th><input type="radio" name="R'$i'" value="120">'
    echo '<img src="Button.png&text=120 Minutes"></th>'
    i=$(( $i + 1 ))
done < $DIR/Relays.fil
echo '<br><input type="submit" value="Submit">'
echo '</b></p>'
echo '</form>'
echo '</h2>'
echo '</table>'
echo '</BODY>'
echo '</HTML>'

header.html:

Content-Type: text/html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE> Aquarium Relay Control </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Leslie Rhorer">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<STYLE>
/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid #f00;
}

Apache2 / ErrorLog:

[Fri Jun 07 13:28:29.299318 2019] [cgid:error] [pid 21675:tid 1946154032] [client 192.168.1.121:51888] AH01264: script not found or unable to stat: /usr/lib/cgi-bin/relay/Button.png&text=60 Minutes, referer: http://192.168.1.40/cgi-bin/relay/index.cgi
Автор: lrhorer Источник Размещён: 07.06.2019 07:03

Ответы (2)


0 плюса

4 Репутация автора

Ничто из того, что я пробовал, не позволило бы сценарию работать с использованием вышеуказанного метода, независимо от того, была ли страница создана из сценария Python или необработанного HTML-сценария. Я понятия не имею, почему это не работает. Я получил частичное решение, используя совершенно другой метод. Только первая строка (где i = 1) работает правильно, но отображение корректно и весь первый ряд работает. Кто-то еще должен объяснить, почему другие строки (где i> 1) не работают, хотя они отображаются правильно. Значения GET обновляются путем выбора элементов в строках 2–6, но они являются значениями, соответствующими строке 1 («R1»), а не другим строкам («R2», R3 и т. Д.). Я подозреваю, что это как-то связано с «for =» и / или «id =», но я понятия не имею, что они делают, поэтому я не знаю, что изменить.

header.html

<STYLE>
/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.cc-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}
.button15{background-image:url(http://192.168.1.40/images/Button15.png);}
.button30{background-image:url(http://192.168.1.40/images/Button30.png);}
.button45{background-image:url(http://192.168.1.40/images/Button45.png);}
.button60{background-image:url(http://192.168.1.40/images/Button60.png);}
.button90{background-image:url(http://192.168.1.40/images/Button90.png);}
.button120{background-image:url(http://192.168.1.40/images/Button120.png);}

.cc-selector input:active +.drinkcard-cc{opacity: .9;}
.cc-selector input:checked +.drinkcard-cc{
    -webkit-filter: none;
    -moz-filter: none;
    filter: none;
}
.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:100px;height:50px;
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
    -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
    filter: brightness(1.8) grayscale(1) opacity(.7);
}
...
</STYLE>

relay.cgi

#! /bin/bash
. /usr/lib/cgi-bin/relay/header.cgi
cat $DIR/header.html
echo '</HEAD>'

echo '<BODY style="background-color:#00EE66">'
echo '<form action="/cgi-bin/relay/Timer.cgi">'
echo '<table>'
echo '<tr><th></th><th></th><th></th>'
echo '<th>Aquarium Equipment Suspend</th><th></th><th></th><th></th></tr>'
echo '<tr></tr>'
i=1
while read line
do
    echo '<tr>'
    echo '<th>'$line'</th>'
    echo '<th><div class="cc-selector"><input id="button15-'$i'" type="radio" name="R'$i'" value="15" />'
    echo '<label class="drinkcard-cc button15" for="button15-'$i'"></label></div></th>'
    echo '<th><div class="cc-selector"><input id="button30-'$i'" type="radio"     name="R'$i'" value="30" />'
    echo '<label class="drinkcard-cc button30" for="button30-'$i'"></label></div></th>'
    echo '<th><div class="cc-selector"><input id="button45-'$i'" type="radio"     name="R'$i'" value="45" />'
    echo '<label class="drinkcard-cc button45" for="button45-"></label></div></th>'
    echo '<th><div class="cc-selector"><input id="button60-'$i'" type="radio" name="R'$i'" value="60" />'
    echo '<label class="drinkcard-cc button60" for="button60-'$i'"></label></div></th>'
    echo '<th><div class="cc-selector"><input id="button90-'$i'" type="radio" name="R'$i'" value="90" />'
    echo '<label class="drinkcard-cc button90" for="button90-'$i'"></label></div></th>'
    echo '<th><div class="cc-selector"><input id="button120-'$i'" type="radio" name="R'$i'" value="120" />'
    echo '<label class="drinkcard-cc button120" for="button120-'$i'"></label></div></th>'
    echo</tr>
    i=$(( $i + 1 ))
done < $DIR/Relays.fil
...
</table>
echo '<input type="submit" value="Submit">'
...
Автор: lrhorer Размещён: 10.06.2019 09:46

0 плюса

4 Репутация автора

Хорошо, хватит о моем плохом кодировании. Для полноты вот вывод сценария после удаления заголовка cgi. Проверяется без ошибок. Обратите внимание на значения «id =» и «for =», которые были проблемой с оригинальным скриптом.

<!DOCTYPE HTML>
<HTML lang="en">
<HEAD>
<TITLE> Aquarium Relay Control </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Leslie Rhorer">
<META NAME="Keywords" CONTENT="">    
<META NAME="Description" CONTENT="Aquarium Relay">
<META charset="utf-8"/>
<STYLE>
/* HIDE RADIO */
[type=radio] {
  position: absolute;
  opacity: 0; 
  width: 0;
  height: 0;
}

.cc-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
  -moz-appearance:none;
   appearance:none;
}
.button15{background-image:url(http://192.168.1.40/images/button15.png);}
.button30{background-image:url(http://192.168.1.40/images/button30.png);}
.button45{background-image:url(http://192.168.1.40/images/button45.png);}
.button60{background-image:url(http://192.168.1.40/images/button60.png);}
.button90{background-image:url(http://192.168.1.40/images/button90.png);}
.button120{background-image:url(http://192.168.1.40/images/button120.png);}

.cc-selector input:active +.button-cc{opacity: .9;}
.cc-selector input:checked +.button-cc{
    -webkit-filter: none;   
  -moz-filter: none;   
   filter: none;   
}
.button-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:block; 
    margin-left: auto; 
    margin-right: auto;

    width:100px;height:50px;
    -webkit-transition: all 100ms ease-in;
  -moz-transition: all 100ms ease-in;
   transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
  -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
   filter: brightness(1.8) grayscale(1) opacity(.7);
}

TABLE, TH, TD {
    border: 1px solid black;
}
TABLE {
    width: 90%;
}
TH {
    height: 50px;
}

div.Countdown {  
    position: fixed;
    top: 26px;
    left: 480px;
    width: 300px;
    font: bold 24px Arial;
    color: black;
}
.tab { text-indent:30% }
</STYLE>
</HEAD>
<BODY style="background-color:#00EE66">
<form action="/cgi-bin/relay/timer.cgi">
<h1>{text-align: center;}Aquarium Equipment Suspend</h1>
<p class="tab"><input type="submit" value="Submit"></p>
<table><tr>
<th>Sump Equipment</th>
<th><div class="cc-selector"><input id="button15-1" type="radio" name="R1" value="15" />
<label class="button-cc button15" for="button15-1"></label></div></th>
<th><div class="cc-selector"><input id="button30-1" type="radio" name="R1" value="30" />
<label class="button-cc button30" for="button30-1"></label></div></th>
<th><div class="cc-selector"><input id="button45-1" type="radio" name="R1" value="45" />
<label class="button-cc button45" for="button45-1"></label></div></th>
<th><div class="cc-selector"><input id="button60-1" type="radio" name="R1" value="60" />
<label class="button-cc button60" for="button60-1"></label></div></th>
<th><div class="cc-selector"><input id="button90-1" type="radio" name="R1" value="90" />
<label class="button-cc button90" for="button90-1"></label></div></th>
<th><div class="cc-selector"><input id="button120-1" type="radio" name="R1" value="120" />   
<label class="button-cc button120" for="button120-1"></label></div></th></tr>
<tr>
<th>Protein Skimmer</th>
<th><div class="cc-selector"><input id="button15-2" type="radio" name="R2" value="15" />
<label class="button-cc button15" for="button15-2"></label></div></th>
<th><div class="cc-selector"><input id="button30-2" type="radio" name="R2" value="30" />
<label class="button-cc button30" for="button30-2"></label></div></th>
<th><div class="cc-selector"><input id="button45-2" type="radio" name="R2" value="45" />
<label class="button-cc button45" for="button45-2"></label></div></th>
<th><div class="cc-selector"><input id="button60-2" type="radio" name="R2" value="60" />
<label class="button-cc button60" for="button60-2"></label></div></th>
<th><div class="cc-selector"><input id="button90-2" type="radio" name="R2" value="90" />
<label class="button-cc button90" for="button90-2"></label></div></th>
<th><div class="cc-selector"><input id="button120-2" type="radio" name="R2" value="120" />   
<label class="button-cc button120" for="button120-2"></label></div></th></tr>  
<tr>   
<th>Air Pump</th>    
<th><div class="cc-selector"><input id="button15-3" type="radio" name="R3" value="15" />
<label class="button-cc button15" for="button15-3"></label></div></th>
<th><div class="cc-selector"><input id="button30-3" type="radio" name="R3" value="30" />
<label class="button-cc button30" for="button30-3"></label></div></th>
<th><div class="cc-selector"><input id="button45-3" type="radio" name="R3" value="45" />
<label class="button-cc button45" for="button45-3"></label></div></th>
<th><div class="cc-selector"><input id="button60-3" type="radio" name="R3" value="60" />
<label class="button-cc button60" for="button60-3"></label></div></th>
<th><div class="cc-selector"><input id="button90-3" type="radio" name="R3" value="90" />
<label class="button-cc button90" for="button90-3"></label></div></th>
<th><div class="cc-selector"><input id="button120-3" type="radio" name="R3" value="120" />
<label class="button-cc button120" for="button120-3"></label></div></th></tr>
<tr>
<th>Power Filter</th>
<th><div class="cc-selector"><input id="button15-4" type="radio" name="R4" value="15" />
<label class="button-cc button15" for="button15-4"></label></div></th>
<th><div class="cc-selector"><input id="button30-4" type="radio" name="R4" value="30" />
<label class="button-cc button30" for="button30-4"></label></div></th>
<th><div class="cc-selector"><input id="button45-4" type="radio" name="R4" value="45" />
<label class="button-cc button45" for="button45-4"></label></div></th>
<th><div class="cc-selector"><input id="button60-4" type="radio" name="R4" value="60" />
<label class="button-cc button60" for="button60-4"></label></div></th>
<th><div class="cc-selector"><input id="button90-4" type="radio" name="R4" value="90" />
<label class="button-cc button90" for="button90-4"></label></div></th>
<th><div class="cc-selector"><input id="button120-4" type="radio" name="R4" value="120" />   
<label class="button-cc button120" for="button120-4"></label></div></th></tr>  
<tr>
<th>Power Heads Left</th>
<th><div class="cc-selector"><input id="button15-5" type="radio" name="R5" value="15" />
<label class="button-cc button15" for="button15-5"></label></div></th>
<th><div class="cc-selector"><input id="button30-5" type="radio" name="R5" value="30" />
<label class="button-cc button30" for="button30-5"></label></div></th>
<th><div class="cc-selector"><input id="button45-5" type="radio" name="R5" value="45" />
<label class="button-cc button45" for="button45-5"></label></div></th>
<th><div class="cc-selector"><input id="button60-5" type="radio" name="R5" value="60" />
<label class="button-cc button60" for="button60-5"></label></div></th>
<th><div class="cc-selector"><input id="button90-5" type="radio" name="R5" value="90" />
<label class="button-cc button90" for="button90-5"></label></div></th>
<th><div class="cc-selector"><input id="button120-5" type="radio" name="R5" value="120" />
<label class="button-cc button120" for="button120-5"></label></div></th></tr>
<tr>
<th>Power Heads Right</th>
<th><div class="cc-selector"><input id="button15-6" type="radio" name="R6" value="15" />
<label class="button-cc button15" for="button15-6"></label></div></th>
<th><div class="cc-selector"><input id="button30-6" type="radio" name="R6" value="30" />
<label class="button-cc button30" for="button30-6"></label></div></th>
<th><div class="cc-selector"><input id="button45-6" type="radio" name="R6" value="45" />
<label class="button-cc button45" for="button45-6"></label></div></th>
<th><div class="cc-selector"><input id="button60-6" type="radio" name="R6" value="60" />
<label class="button-cc button60" for="button60-6"></label></div></th>
<th><div class="cc-selector"><input id="button90-6" type="radio" name="R6" value="90" />
<label class="button-cc button90" for="button90-6"></label></div></th>
<th><div class="cc-selector"><input id="button120-6" type="radio" name="R6" value="120" />   
<label class="button-cc button120" for="button120-6"></label></div></th></tr>  
<tr>
<th>Power Heads Center</th>
<th><div class="cc-selector"><input id="button15-7" type="radio" name="R7" value="15" />
<label class="button-cc button15" for="button15-7"></label></div></th>
<th><div class="cc-selector"><input id="button30-7" type="radio" name="R7" value="30" />
<label class="button-cc button30" for="button30-7"></label></div></th>
<th><div class="cc-selector"><input id="button45-7" type="radio" name="R7" value="45" />
<label class="button-cc button45" for="button45-7"></label></div></th>
<th><div class="cc-selector"><input id="button60-7" type="radio" name="R7" value="60" />
<label class="button-cc button60" for="button60-7"></label></div></th>
<th><div class="cc-selector"><input id="button90-7" type="radio" name="R7" value="90" />
<label class="button-cc button90" for="button90-7"></label></div></th>
<th><div class="cc-selector"><input id="button120-7" type="radio" name="R7" value="120" />   
<label class="button-cc button120" for="button120-7"></label></div></th></tr>
<tr>
<th>Spare</th>
<th><div class="cc-selector"><input id="button15-8" type="radio" name="R8" value="15" />
<label class="button-cc button15" for="button15-8"></label></div></th>
<th><div class="cc-selector"><input id="button30-8" type="radio" name="R8" value="30" />
<label class="button-cc button30" for="button30-8"></label></div></th>
<th><div class="cc-selector"><input id="button45-8" type="radio" name="R8" value="45" />
<label class="button-cc button45" for="button45-8"></label></div></th>
<th><div class="cc-selector"><input id="button60-8" type="radio" name="R8" value="60" />
<label class="button-cc button60" for="button60-8"></label></div></th>
<th><div class="cc-selector"><input id="button90-8" type="radio" name="R8" value="90" />
<label class="button-cc button90" for="button90-8"></label></div></th>
<th><div class="cc-selector"><input id="button120-8" type="radio" name="R8" value="120" />
<label class="button-cc button120" for="button120-8"></label></div></th></tr>
</table>
</form>
</BODY>
</HTML>
Автор: lrhorer Размещён: 12.06.2019 09:34
Вопросы из категории :
32x32