Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][PHP]Przycisk IMG zamiast tekstu
Forum PHP.pl > Forum > Przedszkole
traczu
Witam Was.
W końcu wziąłem się za poważniejszy projekt niż tylko HTML i oto pojawił mi się malutki problem.

Mianowicie chciałbym zamienić przycisk z Napisu "Włączony" czy "Wyłączony" na przycisk w formie graficznej.
Byłby ktoś tak uprzejmy i podpowiedział jak to zrobić ?

  1. {
  2. $doButtona[$ktoraLinia] = "button1";
  3. $doNapisu[$ktoraLinia] = "Włączony";
  4. $nowyStan[$ktoraLinia] = 1;
  5. if ($zmiana == 1) //skrypt powloki wykonuje tyklo wtedy gdy byl wcisniety guzik
  6. {
  7. shell_exec('gpio mode '.$ktoryPin.' out');
  8. shell_exec('gpio write '.$ktoryPin.' 0');
  9. }
  10. }else
  11. {
  12. $doButtona[$ktoraLinia] = "button2";
  13. $doNapisu[$ktoraLinia] = "Wyłączony";
  14. $nowyStan[$ktoraLinia] = 0;
vokiel
  1. $doNapisu[$ktoraLinia] = '<img src="adres/obrazka.png" />';
traczu
Cytat(vokiel @ 13.01.2016, 20:48:43 ) *
  1. $doNapisu[$ktoraLinia] = '<img src="adres/obrazka.png" />';



Nie bardzo tak idzie
Wywala mi

Zamiast przycisku:
  1. <IMG SRC=" CLASS="BUTTON1">
vokiel
To podaj prawidłowy URL obrazka, poza tym skąd ja mam wiedzieć co się dzieje później z $nowyStan skoro nie pokazałeś kodu, który obrabia dalej tą zmienną?
traczu
Link do grafiki:
images/light_on.png

Aktualnie kod wygląda tak:

  1. <!DOCTYPE HTML>
  2. <!--
  3. Identity by HTML5 UP
  4. html5up.net | @n33co
  5. Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
  6. -->
  7. <html>
  8. <head>
  9. <title>AquaPI by Traczu</title>
  10. <meta charset="utf-8" />
  11. <meta name="viewport" content="width=device-width, initial-scale=1" />
  12. <!--[if lte IE 8]><script src="assets/js/html5shiv.js"></script><![endif]-->
  13. <link rel="stylesheet" href="assets/css/main.css" />
  14. <!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
  15. <!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
  16. <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
  17. </head>
  18. <body class="is-loading">
  19.  
  20. <!-- Wrapper -->
  21. <div id="wrapper">
  22.  
  23. <!-- Main -->
  24. <section id="main">
  25. <header>
  26. <span class="avatar"><img src="images/aquarium-icon.png" alt="" /></span>
  27.  
  28.  
  29.  
  30.  
  31. </header>
  32.  
  33. <div>
  34.  
  35.  
  36. <div id="lewy">
  37. <p><img src="images/info_off.png" alt="" /></p>
  38. <p><img src="images/light_off.png" alt="" /></p>
  39. </div>
  40.  
  41. <div id="srodek">
  42. <p><img src="images/setting_off.png" alt="" /></p>
  43. </div>
  44.  
  45. <div id="prawy">
  46. <p><img src="images/power_off.png" alt="" /></p>
  47. </div>
  48. <br><br><br>
  49. <div id="srodek">
  50.  
  51. <?php
  52. function sterujPin($zmiana, $stan, &$doButtona, &$doNapisu, &$nowyStan, $ktoraLinia, $ktoryPin) //zmienne sterujace wyladem form
  53. {
  54. if($stan==0)
  55. {
  56. $doButtona[$ktoraLinia] = "button1";
  57. $doNapisu[$ktoraLinia] = '<img src="images/light_on.png" />';
  58. $nowyStan[$ktoraLinia] = 1;
  59. if ($zmiana == 1) //skrypt powloki wykonuje tyklo wtedy gdy byl wcisniety guzik
  60. {
  61. shell_exec('gpio mode '.$ktoryPin.' out');
  62. shell_exec('gpio write '.$ktoryPin.' 0');
  63. }
  64. }else
  65. {
  66. $doButtona[$ktoraLinia] = "button2";
  67. $doNapisu[$ktoraLinia] = "Wyłączone";
  68. $nowyStan[$ktoraLinia] = 0;
  69. if ($zmiana ==1) //skrypt powloki wykonuje tyklo wtedy gdy byl wcisniety guzik
  70. {
  71. shell_exec('gpio mode '.$ktoryPin.' in');
  72. shell_exec('gpio write '.$ktoryPin.' 1');
  73. }
  74. }
  75. }
  76. // *** definicja tablicy z nazwami linii ***
  77. $nazwyLinii = Array('Światło 1', 'Światło 2', 'CO2', 'Dodatkowe źródło');
  78. // *** numery pinow zgodne z powyzsza kolejnoscia ***
  79. $numeryPinow = Array(0, 1, 2, 3);
  80. // *** liczba linii
  81. $ileLinii = 4;
  82. ?>
  83.  
  84. <?php
  85. for($i=0; $i<$ileLinii; $i++)
  86. {
  87. $stanPinu2[$i] = shell_exec('gpio read '.$numeryPinow[$i]); //czytam jaki stan pinu
  88. $czyZmiana = 0; //domyslnie brak wcisnietego guzika
  89. if (isset($_POST['stan']) && $_POST['linia']==$i) //warunek przelaczenia - to na tej linii bylo przelaczenie
  90. {
  91. $czyZmiana = 1; //przekazuje info do funkcji ze byl wcisniety guzik
  92. sterujPin($czyZmiana, $_POST['stan'], $jakiButon, $jakiNapis, $doStanu, $_POST['linia'], $numeryPinow[$i]);
  93. }else
  94. {
  95. sterujPin($czyZmiana, $stanPinu2[$i], $jakiButon, $jakiNapis, $doStanu, $i, $numeryPinow[$i]);
  96. }
  97. }
  98. ?>
  99.  
  100. <div>
  101.  
  102. <?php
  103. //w petli generujemy formularze
  104. for($i=0; $i<$ileLinii; $i++)
  105. {
  106. $liczLinia = $i + 1;
  107. echo '<form action="index.php" method=post class="centruj">
  108. <fieldset style="width:450px">
  109. <legend>'.$nazwyLinii[$i].'</legend>
  110. <input type="submit" value="'.$jakiNapis[$i].'" class="'.$jakiButon[$i].'">
  111. <input name="stan" value="'.$doStanu[$i].'" type="hidden">
  112. <input name="linia" value="'.$i.'" type="hidden">
  113. </fieldset>
  114. </form>';
  115. }
  116. ?>
  117.  
  118. </div>
  119.  
  120.  
  121.  
  122.  
  123.  
  124.  
  125.  
  126.  
  127. </div>
  128.  
  129.  
  130. </div>
  131.  
  132. </div>
  133.  
  134. <!-- Scripts -->
  135. <!--[if lte IE 8]><script src="assets/js/respond.min.js"></script><![endif]-->
  136. <script>
  137. if ('addEventListener' in window) {
  138. window.addEventListener('load', function() { document.body.className = document.body.className.replace(/\bis-loading\b/, ''); });
  139. document.body.className += (navigator.userAgent.match(/(MSIE|rv:11\.0)/) ? ' is-ie' : '');
  140. }
  141. </script>
  142.  
  143. </body>
  144. </html>
vokiel
To z powodu linii 110:
  1. <input type="submit" value="'.$jakiNapis[$i].'" class="'.$jakiButon[$i].'">


Czyli kod generuje Ci zwykły input submit.

Opcji masz kilka:
- ostylowanie inputa w zależności od klasy
- zamiana input na button, np linię 110 podmieniasz na
  1. <button type="submit">'.$jakiButon[$i].'</button>
traczu
czyli rozumiem że zrobić w css klasę jakiButon i ją ustawić na plik graficzny questionmark.gif
vokiel
Szybciej jak podmienisz linię 110 na to co wkleiłem w ostatnim bloku kodu.
traczu
zmienił mi to tylko nazwę przycisku na button2 lub button1
teraz muszę zdefiniować jakoś grafikę tego przycisku questionmark.gif

CSS

CODE
@charset "UTF-8";
@import url(font-awesome.min.css);
@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:300");


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}



body, input, select, textarea {
color: #414f57;
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 14pt;
font-weight: 300;
line-height: 2;
letter-spacing: 0.2em;
text-transform: uppercase;
}

@media screen and (max-width: 1680px) {

body, input, select, textarea {
font-size: 11pt;
}

}

@media screen and (max-width: 480px) {

body, input, select, textarea {
font-size: 10pt;
line-height: 1.75;
}

}

a {
-moz-transition: color 0.2s ease, border-color 0.2s ease;
-webkit-transition: color 0.2s ease, border-color 0.2s ease;
-ms-transition: color 0.2s ease, border-color 0.2s ease;
transition: color 0.2s ease, border-color 0.2s ease;
color: inherit;
text-decoration: none;
}

a:before {
-moz-transition: color 0.2s ease, text-shadow 0.2s ease;
-webkit-transition: color 0.2s ease, text-shadow 0.2s ease;
-ms-transition: color 0.2s ease, text-shadow 0.2s ease;
transition: color 0.2s ease, text-shadow 0.2s ease;
}

a:hover {
color: #ff7496;
}



input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
select,
textarea {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
border-radius: 4px;
border: solid 1px #c8cccf;
color: inherit;
display: block;
outline: 0;
padding: 0 1em;
text-decoration: none;
width: 100%;
}

input[type="text"]:invalid,
input[type="password"]:invalid,
input[type="email"]:invalid,
input[type="tel"]:invalid,
select:invalid,
textarea:invalid {
box-shadow: none;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
border-color: #ff7496;
}



input[type="text"],
input[type="password"],
input[type="email"],
select {
height: 2.75em;
}

textarea {
padding: 0.75em 1em;
}

input[type="checkbox"],
input[type="radio"] {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
display: block;
float: left;
margin-right: -2em;
opacity: 0;
width: 1em;
z-index: -1;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
text-decoration: none;
color: #414f57;
cursor: pointer;
display: inline-block;
font-size: 1em;
font-weight: 300;
padding-left: 2.4em;
padding-right: 0.75em;
position: relative;
}

input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}

input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
border-radius: 4px;
border: solid 1px #c8cccf;
content: '';
display: inline-block;
height: 1.65em;
left: 0;
line-height: 1.58125em;
position: absolute;
text-align: center;
top: 0.15em;
width: 1.65em;
}

input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
color: #ff7496;
content: '\f00c';
}

input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
border-color: #ff7496;
}

input[type="checkbox"] + label:before {
border-radius: 4px;
}

input[type="radio"] + label:before {
border-radius: 100%;
}

::-webkit-input-placeholder {
color: #616f77 !important;
opacity: 1.0;
}

:-moz-placeholder {
color: #616f77 !important;
opacity: 1.0;
}

::-moz-placeholder {
color: #616f77 !important;
opacity: 1.0;
}

:-ms-input-placeholder {
color: #616f77 !important;
opacity: 1.0;
}

.formerize-placeholder {
color: #616f77 !important;
opacity: 1.0;
}




/* Button */

input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
-moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
display: inline-block;
height: 2.75em;
line-height: 2.75em;
padding: 0 1.5em;
background-color: transparent;
border-radius: 4px;
border: solid 1px #c8cccf;
color: #414f57 !important;
cursor: pointer;
text-align: center;
text-decoration: none;
white-space: nowrap;
}

.button1 {background-image: url(images/light_on.png);
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
border-color: #ff7496;
color: #ff7496 !important;
}

input[type="submit"].icon,
input[type="reset"].icon,
input[type="button"].icon,
button.icon,
.button.icon {
padding-left: 1.35em;
}

input[type="submit"].icon:before,
input[type="reset"].icon:before,
input[type="button"].icon:before,
button.icon:before,
.button.icon:before {
margin-right: 0.5em;
}

input[type="submit"].fit,
input[type="reset"].fit,
input[type="button"].fit,
button.fit,
.button.fit {
display: block;
width: 100%;
margin: 0 0 0.75em 0;
}

input[type="submit"].small,
input[type="reset"].small,
input[type="button"].small,
button.small,
.button.small {
font-size: 0.8em;
}

input[type="submit"].big,
input[type="reset"].big,
input[type="button"].big,
button.big,
.button.big {
font-size: 1.35em;
}

input[type="submit"].disabled, input[type="submit"]:disabled,
input[type="reset"].disabled,
input[type="reset"]:disabled,
input[type="button"].disabled,
input[type="button"]:disabled,
button.disabled,
button:disabled,
.button.disabled,
.button:disabled {
-moz-pointer-events: none;
-webkit-pointer-events: none;
-ms-pointer-events: none;
pointer-events: none;
opacity: 0.5;
}

/* Main */

#main {
position: relative;
max-width: 100%;
min-width: 27em;
padding: 0em 3em 0em 3em ;
background: #09669c;
border-radius: 10px;
cursor: default;
opacity: 0.95;
text-align: center;
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
-moz-transition: opacity 1s ease, -moz-transform 1s ease;
-webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
-ms-transition: opacity 1s ease, -ms-transform 1s ease;
transition: opacity 1s ease, transform 1s ease;
}

#main .avatar {

position: relative;
display: block;
margin-bottom: 0.0em;
}

#main .avatar img {
/*display: block;
margin: 0 auto;
border-radius: 100%;
box-shadow: 0 0 0 0.8em #cccccc;*/
}

#main .avatar:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: -3em;
width: calc(100% + 6em);
height: 0px;
z-index: -1;
background: #c8cccf;
}

@media screen and (max-width: 480px) {

#main {
min-width: 0;
width: 100%;
padding: 4em 2em 2.5em 2em ;
}

#main .avatar:before {
left: -2em;
width: calc(100% + 4em);
}

}

body.is-loading #main {
opacity: 0;
-moz-transform: rotateX(15deg);
-webkit-transform: rotateX(15deg);
-ms-transform: rotateX(15deg);
transform: rotateX(15deg);
}

/* Footer */

#footer {
-moz-align-self: -moz-flex-end;
-webkit-align-self: -webkit-flex-end;
-ms-align-self: -ms-flex-end;
align-self: flex-end;
width: 100%;
padding: 1.5em 0 0 0;
color: rgba(255, 255, 255, 0.75);
cursor: default;
text-align: center;
}

#footer .copyright {
margin: 0;
padding: 0;
font-size: 0.9em;
list-style: none;
}

#footer .copyright li {
display: inline-block;
margin: 0 0 0 0.45em;
padding: 0 0 0 0.85em;
border-left: solid 1px rgba(255, 255, 255, 0.5);
line-height: 1;
}

#footer .copyright li:first-child {
border-left: 0;
}




Nie bardzo wiem co z tym dalej zrobić questionmark.gif
vokiel
closedeyes.gif Stwórz sobie 2 obrazki dla stanów on i off:
- light_on.png
- light_off.png

Mała uwaga: masz w kodzie 2 razi div z id='srodek'

Jak chcesz możesz sobie przyciski dodatkowo ostylować w CSS.
Gotowiec poniżej:

  1. <!DOCTYPE HTML>
  2. <!--
  3. Identity by HTML5 UP
  4. html5up.net | @n33co
  5. Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
  6. -->
  7. <html>
  8. <head>
  9. <title>AquaPI by Traczu</title>
  10. <meta charset="utf-8"/>
  11. <meta name="viewport" content="width=device-width, initial-scale=1"/>
  12. <!--[if lte IE 8]>
  13. <script src="assets/js/html5shiv.js"></script><![endif]-->
  14. <link rel="stylesheet" href="assets/css/main.css"/>
  15. <!--[if lte IE 9]>
  16. <link rel="stylesheet" href="assets/css/ie9.css"/><![endif]-->
  17. <!--[if lte IE 8]>
  18. <link rel="stylesheet" href="assets/css/ie8.css"/><![endif]-->
  19. <noscript>
  20. <link rel="stylesheet" href="assets/css/noscript.css"/>
  21. </noscript>
  22. </head>
  23. <body class="is-loading">
  24.  
  25. <!-- Wrapper -->
  26. <div id="wrapper">
  27.  
  28. <!-- Main -->
  29. <section id="main">
  30. <header>
  31. <span class="avatar"><img src="images/aquarium-icon.png" alt=""/></span>
  32. </header>
  33.  
  34. <div>
  35. <div id="lewy">
  36. <p><img src="images/info_off.png" alt=""/></p>
  37. <p><img src="images/light_off.png" alt=""/></p>
  38. </div>
  39.  
  40. <div id="srodek">
  41. <p><img src="images/setting_off.png" alt=""/></p>
  42. </div>
  43.  
  44. <div id="prawy">
  45. <p><img src="images/power_off.png" alt=""/></p>
  46. </div>
  47.  
  48. <br><br><br>
  49. <div id="srodek">
  50.  
  51. <?php
  52. function sterujPin($zmiana, $stan, &$doButtona, &$doNapisu, &$nowyStan, $ktoraLinia, $ktoryPin) //zmienne sterujace wyladem form
  53. {
  54. if ($stan == 0) {
  55. $doButtona[$ktoraLinia] = "button1";
  56. $doNapisu[$ktoraLinia] = '<img src="images/light_on.png" />';
  57. $nowyStan[$ktoraLinia] = 1;
  58. if ($zmiana == 1) //skrypt powloki wykonuje tyklo wtedy gdy byl wcisniety guzik
  59. {
  60. shell_exec('gpio mode ' . $ktoryPin . ' out');
  61. shell_exec('gpio write ' . $ktoryPin . ' 0');
  62. }
  63. } else {
  64. $doButtona[$ktoraLinia] = "button2";
  65. $doNapisu[$ktoraLinia] = '<img src="images/light_off.png" />';
  66. $nowyStan[$ktoraLinia] = 0;
  67. if ($zmiana == 1) //skrypt powloki wykonuje tyklo wtedy gdy byl wcisniety guzik
  68. {
  69. shell_exec('gpio mode ' . $ktoryPin . ' in');
  70. shell_exec('gpio write ' . $ktoryPin . ' 1');
  71. }
  72. }
  73. }
  74.  
  75. // *** definicja tablicy z nazwami linii ***
  76. $nazwyLinii = Array('Światło 1', 'Światło 2', 'CO2', 'Dodatkowe źródło');
  77. // *** numery pinow zgodne z powyzsza kolejnoscia ***
  78. $numeryPinow = Array(0, 1, 2, 3);
  79. // *** liczba linii
  80. $ileLinii = 4;
  81. ?>
  82.  
  83. <?php
  84. for ($i = 0; $i < $ileLinii; $i++) {
  85. $stanPinu2[$i] = shell_exec('gpio read ' . $numeryPinow[$i]); //czytam jaki stan pinu
  86. $czyZmiana = 0; //domyslnie brak wcisnietego guzika
  87. if (isset($_POST['stan']) && $_POST['linia'] == $i) //warunek przelaczenia - to na tej linii bylo przelaczenie
  88. {
  89. $czyZmiana = 1; //przekazuje info do funkcji ze byl wcisniety guzik
  90. sterujPin($czyZmiana, $_POST['stan'], $jakiButon, $jakiNapis, $doStanu, $_POST['linia'], $numeryPinow[$i]);
  91. } else {
  92. sterujPin($czyZmiana, $stanPinu2[$i], $jakiButon, $jakiNapis, $doStanu, $i, $numeryPinow[$i]);
  93. }
  94. }
  95. ?>
  96. <div>
  97. <?php
  98. //w petli generujemy formularze
  99. for ($i = 0; $i < $ileLinii; $i++) {
  100. $liczLinia = $i + 1;
  101. echo '<form action="index.php" method=post class="centruj">
  102. <fieldset style="width:450px">
  103. <legend>' . $nazwyLinii[$i] . '</legend>
  104. <button type="submit">' . $jakiNapis[$i] . '</button>
  105. <input name="stan" value="' . $doStanu[$i] . '" type="hidden">
  106. <input name="linia" value="' . $i . '" type="hidden">
  107. </fieldset>
  108. </form>';
  109. }
  110. ?>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115.  
  116. <!-- Scripts -->
  117. <!--[if lte IE 8]>
  118. <script src="assets/js/respond.min.js"></script><![endif]-->
  119. <script>
  120. if ('addEventListener' in window) {
  121. window.addEventListener('load', function () {
  122. document.body.className = document.body.className.replace(/\bis-loading\b/, '');
  123. });
  124. document.body.className += (navigator.userAgent.match(/(MSIE|rv:11\.0)/) ? ' is-ie' : '');
  125. }
  126. </script>
  127. </body>
  128. </html>
traczu
Zeraz załapałem o divie wiedziaęłm ale miaęłm problem jak wyświetlić grafikę.
Piękne dzięki oneeyedsmiley02.png

Teraz tylko drobna kosmetyka nie mogę znaleźć gdzie skasować border tego przycisku
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.