From ff05259053a237623eedb7653f229989d3f46e29 Mon Sep 17 00:00:00 2001
From: Hieromon Ikasamo <Hieromon@users.noreply.github.com>
Date: Sun, 24 Feb 2019 00:38:40 +0900
Subject: [PATCH] Fixed the folder path of images

---
 mkdocs/acelements.md     | 16 ++++++++--------
 mkdocs/achandling.md     | 10 +++++-----
 mkdocs/acintro.md        | 12 ++++++------
 mkdocs/acjson.md         |  4 ++--
 mkdocs/advancedusage.md  |  8 ++++----
 mkdocs/basicusage.md     |  2 +-
 mkdocs/datatips.md       | 16 ++++++++--------
 mkdocs/faq.md            |  2 +-
 mkdocs/gettingstarted.md |  8 ++++----
 mkdocs/howtoembed.md     | 24 ++++++++++++------------
 mkdocs/index.md          | 14 +++++++-------
 mkdocs/menu.md           | 14 +++++++-------
 mkdocs/menuize.md        |  4 ++--
 mkdocs/wojson.md         |  2 +-
 14 files changed, 68 insertions(+), 68 deletions(-)

diff --git a/mkdocs/acelements.md b/mkdocs/acelements.md
index e518eec..a68bb13 100644
--- a/mkdocs/acelements.md
+++ b/mkdocs/acelements.md
@@ -26,7 +26,7 @@ AutoConnectElement is a base class for other element classes and has common attr
 <i class="fa fa-eye"></i> **Sample**<br>
 <small>**`AutoConnectElement element("element", "<hr>");`**</small>
 
-<small>On the page:</small><br><img src="./images/acelement.png">
+<small>On the page:</small><br><img src="images/acelement.png">
 
 ### <i class="fa fa-edit"></i> Constructor
 
@@ -79,7 +79,7 @@ AutoConnectButton generates an HTML `#!html <button type="button">` tag and loca
 <i class="fa fa-eye"></i> **Sample**<br>
 <small>**`AutoConnectButton button("button", "OK", "myFunction()");`**</small>
 
-<small>On the page:</small><br><img src="./images/acbutton.png">
+<small>On the page:</small><br><img src="images/acbutton.png">
 
 ### <i class="fa fa-edit"></i> Constructor
 
@@ -122,7 +122,7 @@ AutoConnectCheckbox generates an HTML `#!html <input type="checkbox">` tag and a
 <i class="fa fa-eye"></i> **Sample**<br>
 <small>**`AutoConnectCheckbox checkbox("checkbox", "uniqueapid", "Use APID unique", false);`**</small>
 
-<small>On the page:</small><br><img src="./images/accheckbox.png">
+<small>On the page:</small><br><img src="images/accheckbox.png">
 
 ### <i class="fa fa-edit"></i> Constructor
 
@@ -154,7 +154,7 @@ AutoConnectInput generates an HTML `#!html <input type="text">` tag and a `#!htm
 <i class="fa fa-eye"></i> **Sample**<br>
 <small>**`AutoConnectInput input("input", "", "Server", "MQTT broker server");`**</small>
 
-<small>On the page:</small><br><img src="./images/acinput.png">
+<small>On the page:</small><br><img src="images/acinput.png">
 
 ### <i class="fa fa-edit"></i> Constructor
 
@@ -200,7 +200,7 @@ AutoConnectRadio generates few HTML `#!html <input type="radio">` tags as groupe
 <i class="fa fa-eye"></i> **Sample**<br>
 <small>**`AutoConnectRadio radio("radio", { "30 sec.", "60 sec.", "180 sec." }, "Update period", AC_Vertical, 1);`**</small>
 
-<small>On the page:</small><br><img src="./images/acradio.png">
+<small>On the page:</small><br><img src="images/acradio.png">
 
 ### <i class="fa fa-edit"></i> Constructor
 
@@ -240,7 +240,7 @@ AutoConnectSelect generates an HTML `#!html <select>` tag (drop-down list) and f
 <i class="fa fa-eye"></i> **Sample**<br>
 <small>**`AutoConnectSelect select("select", { String("Europe/London"), String("Europe/Berlin"), String("Europe/Helsinki"), String("Europe/Moscow"), String("Asia/Dubai") }, "Select TZ name");`**</small>
 
-<small>On the page:</small><br><img src="./images/acselect.png">
+<small>On the page:</small><br><img src="images/acselect.png">
 
 ### <i class="fa fa-edit"></i> Constructor
 
@@ -267,7 +267,7 @@ AutoConnectSubmit generates an HTML `#!html <input type="button">` tag attached
 <i class="fa fa-eye"></i> **Sample**<br>
 <small>**`AutoConnectSubmit submit("submit", "Save", "/mqtt_save");`**</small>
 
-<small>On the page:</small><br><img src="./images/acsubmit.png">
+<small>On the page:</small><br><img src="images/acsubmit.png">
 
 ### <i class="fa fa-edit"></i> Constructor
 
@@ -298,7 +298,7 @@ AutoConnectText generates an HTML `#!html <div>` tag. A `#!html style` attribute
 <i class="fa fa-eye"></i> **Sample**<br>
 <small>**`AutoConnectText text("text", "Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak", "font-family:serif;color:#4682b4;");`**</small>
 
-<small>On the page:</small><br><img src="./images/actext.png">
+<small>On the page:</small><br><img src="images/actext.png">
 
 ### <i class="fa fa-edit"></i> Constructor
 
diff --git a/mkdocs/achandling.md b/mkdocs/achandling.md
index f53fd25..050cd98 100644
--- a/mkdocs/achandling.md
+++ b/mkdocs/achandling.md
@@ -106,7 +106,7 @@ AutoConnectElementVT& getElements(void)
 
 AutoConnect supports reading the custom Web page definitions written in JSON and also supports loading and saving of AutoConnectElements. In both cases, the target object is a [JSON document for AutoConnect](acjson.md). However, it can not save all AutoConnectElements contained in the page as a custom Web page. (ie. AutoConnectAux)
 
-<img src="./images/ac_load_save.svg">
+<img src="images/ac_load_save.svg">
 
 ### <i class="fa fa-upload"></i> Loading AutoConnectAux &amp; AutoConnectElements with JSON
 
@@ -226,7 +226,7 @@ A sketch can access variables of AutoConnectElements in the custom Web page. The
 
 The following diagram shows the flow of the input values of a custom Web page into a sketch and is the basis for actions to manipulate the values of custom Web pages using sketches.
 
-<img src="./images/ac_param_flow.svg">
+<img src="images/ac_param_flow.svg">
 
 ### <i class="fa fa-desktop"></i> Where to pick up the values
 
@@ -530,7 +530,7 @@ void loop() {
 }
 ```
 <i class="fa fa-arrow-down"></i><br>
-<i class="fa fa-eye"></i> It's shown as like:<span style="margin-left:14px;width:272px;height:118px;border:1px solid lightgray;"><img align="top" width="270" src="./images/acow.png"></span>
+<i class="fa fa-eye"></i> It's shown as like:<span style="margin-left:14px;width:272px;height:118px;border:1px solid lightgray;"><img align="top" width="270" src="images/acow.png"></span>
 
 ### <i class="far fa-check-square"></i> Check data against on submission
 
@@ -555,8 +555,8 @@ By giving a [pattern](apielements.md#pattern) to [AutoConnectInput](apielements.
 ```
 
 <div>
-  <span style="display:block;margin-left:136px;"><img width="32px" height="32xp" src="./images/arrow_down.png"></span>
-  <span style="display:block;width:306px;height:136px;border:1px solid lightgrey;"><img data-gifffer="./images/aux_pattern.gif" data-gifffer-height="134" data-gifffer-width="304" /></span>
+  <span style="display:block;margin-left:136px;"><img width="32px" height="32xp" src="images/arrow_down.png"></span>
+  <span style="display:block;width:306px;height:136px;border:1px solid lightgrey;"><img data-gifffer="images/aux_pattern.gif" data-gifffer-height="134" data-gifffer-width="304" /></span>
 </div>
 
 ### <i class="fa fa-exchange"></i> Convert data to actually type
diff --git a/mkdocs/acintro.md b/mkdocs/acintro.md
index de44374..086fcaf 100644
--- a/mkdocs/acintro.md
+++ b/mkdocs/acintro.md
@@ -1,6 +1,6 @@
 ## What it is
 
-<span style="margin-left:20px;margin-bottom:10px;float:right;width:280px;height:497px;border:1px solid lightgray;"><img data-gifffer="./images/aux_ov.gif" data-gifffer-width="278" data-gifffer-height="495" /></span>
+<span style="margin-left:20px;margin-bottom:10px;float:right;width:280px;height:497px;border:1px solid lightgray;"><img data-gifffer="images/aux_ov.gif" data-gifffer-width="278" data-gifffer-height="495" /></span>
 AutoConnect can handle custom Web pages prepared by user sketches individually. Custom Web pages can be integrated into the AutoConnect menu and executed as menu items and can have input-output parameters and handle them.
 
 For example, you can program some sketches that publish messages by entering the URI or unique ID of the MQTT broker on a custom page. You do not need to code the processing to handle the web page. It retrieves the input parameters and passes to the MQTT broker connection API is only.
@@ -10,17 +10,17 @@ For example, you can program some sketches that publish messages by entering the
 AutoConnect creates the custom Web pages dynamically at runtime. Sketch describes the custom Web pages using classes and APIs necessary for dynamic creation which are [**AutoConnectAux**](apiaux.md#autoconnectaux) and the variant of [**AutoConnectElements**](acelements.md). AutoConnectAux is an object dependent on AutoConnect, which provides an easy way to incorporate custom Web pages into AutoConnect like the one on the right figure. The elements make up a custom Web page are provided as an AutoConnectElement class.
 
 Furthermore, an input box, a check box, a submit button, etc. are implemented by classes derived from AutoConnectElement.
-<p align="center"><img align="center" width="560px" src="./images/ac_objects.svg"></p>
+<p align="center"><img align="center" width="560px" src="images/ac_objects.svg"></p>
 AutoConnectAux is a container for AutoConnectElements. To make a custom Web page, create elements that make up the page and put it in the AutoConnectAux object. Joining its AutoConnectAux object to AutoConnect will integrate the custom Web page into the AutoConnect menu.
 
-<img src="./images/ac_declaration.svg">
+<img src="images/ac_declaration.svg">
 
 The above figure shows a code sequence that declares AutoConnectElements and put in the AutoConnectAux container and integrates those into AutoConnect. It declares two text elements named *header* and *caption*, adds them to the AutoConnectAux object as *aux*, binds to an AutoConnect object named *portal*. This sequence is the basic procedure for creating custom Web pages with the sketch. Also, further explanation of AutoConnectElements is the [documentation](acelements.md).
 
 ## Custom Web pages in AutoConnect menu
 
 <ul class="horizontal-list">
-    <li><img style="margin:0 20px 0 -20px;float:left;width:300px;" src="./images/ac_auxmenu.png">
+    <li><img style="margin:0 20px 0 -20px;float:left;width:300px;" src="images/ac_auxmenu.png">
     AutoConnect integrates custom Web page objects into menus as AutoConnectAux. The AutoConnectAux object contains URI and title as member variables and has an indicator to display in the AutoConnect menu.<br>You give the title and URI of the custom Web page to the AutoConnectAux object with Sketch. Then the title of the custom Web page would be displayed in the AutoConnect menu as the left figure.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1" rel="footnote">1</a></sup> It is a hyperlink to a custom Web page which will be displayed tapped it.</li>
 </ul>
 
@@ -30,10 +30,10 @@ The above figure shows a code sequence that declares AutoConnectElements and put
 
 You can create multiple custom Web pages and specify pages that can be called from the menu. The following sketch shows a code sequence for integrating three custom Web pages into one and embedding them in a menu.
 
-<img align="center" width="520px" src="./images/ac_auxjoin_multi.svg">
+<img align="center" width="520px" src="images/ac_auxjoin_multi.svg">
 
 <ul class="horizontal-list">
-    <li><p style="margin:0 20px 0 -20px"><span style="margin-left:20px;float:right;width:280px;height:497px;border:1px solid lightgrey;"><img data-gifffer="./images/aux_menu.gif" data-gifffer-width="278" data-gifffer-height="495" /></span>In the above code, the third parameter of <i>aux2</i> is <b>false</b>. The third parameter of the AutoConnectAux constructor is an indicator for whether it's shown to the AutoConnect menu. Right animation is an execution result of the above code. You will see that the menu applies only two items for three custom Web pages. The sketch of this animation is written to transition to <i>aux2</i> by the utility of the <a href="acelements.html#autoconnectsubmit"><b>AutoConnectSubmit</b></a> element owned by <i>aux1</i>.<sup id="fnref:2"><a class="footnote-ref" href="#fn:2" rel="footnote">2</a></sup><br>The <i>aux2</i> page transitions only from the <i>aux1</i> page. As shown in mqttRSSI in the library example, its page replies the saving result for the parameters entered on the previous page. It can not be invoked directly from the menu and want to hide them with AutoConnect menu items. The utility of the third parameter of the AutoConnectAux constructor is that.</p></li>
+    <li><p style="margin:0 20px 0 -20px"><span style="margin-left:20px;float:right;width:280px;height:497px;border:1px solid lightgrey;"><img data-gifffer="images/aux_menu.gif" data-gifffer-width="278" data-gifffer-height="495" /></span>In the above code, the third parameter of <i>aux2</i> is <b>false</b>. The third parameter of the AutoConnectAux constructor is an indicator for whether it's shown to the AutoConnect menu. Right animation is an execution result of the above code. You will see that the menu applies only two items for three custom Web pages. The sketch of this animation is written to transition to <i>aux2</i> by the utility of the <a href="acelements.html#autoconnectsubmit"><b>AutoConnectSubmit</b></a> element owned by <i>aux1</i>.<sup id="fnref:2"><a class="footnote-ref" href="#fn:2" rel="footnote">2</a></sup><br>The <i>aux2</i> page transitions only from the <i>aux1</i> page. As shown in mqttRSSI in the library example, its page replies the saving result for the parameters entered on the previous page. It can not be invoked directly from the menu and want to hide them with AutoConnect menu items. The utility of the third parameter of the AutoConnectAux constructor is that.</p></li>
 </ul>
 
 [^2]:
diff --git a/mkdocs/acjson.md b/mkdocs/acjson.md
index b4c3e82..6ae3554 100644
--- a/mkdocs/acjson.md
+++ b/mkdocs/acjson.md
@@ -6,8 +6,8 @@ You can embed custom Web pages written in [**JSON**](https://www.json.org/index.
 
 By providing the following JSON document to AutoConnect, you can include the custom Web page like the below:
 
-<div style="float:left;width:50%;height:470px;overflow:auto"><img src="./images/ac_json.png"></div>
-<img style="margin-left:30px;width:40%;height:470px;" src="./images/ac_mqtt_setting.png">
+<div style="float:left;width:50%;height:470px;overflow:auto"><img src="images/ac_json.png"></div>
+<img style="margin-left:30px;width:40%;height:470px;" src="images/ac_mqtt_setting.png">
 
 A JSON document for AutoConnect can contain the custom Web page multiple. You can further reduce the sketch process by loading multiple pages of JSON document at once.
 
diff --git a/mkdocs/advancedusage.md b/mkdocs/advancedusage.md
index 1e3b465..dc6d40a 100644
--- a/mkdocs/advancedusage.md
+++ b/mkdocs/advancedusage.md
@@ -188,8 +188,8 @@ void setup() {
 
 Executing the above sketch will rewrite the menu title for the **FSBrowser** as the below.
 
-<div style="float:left;width:40%;height:470px;overflow:hidden;"><img src="./images/fsbmenu.png"></div>
-<img style="margin-left:70px;width:40%;height:470px;" src="./images/fsbmenu_expand.png">
+<div style="float:left;width:40%;height:470px;overflow:hidden;"><img src="images/fsbmenu.png"></div>
+<img style="margin-left:70px;width:40%;height:470px;" src="images/fsbmenu_expand.png">
 
 ### <i class="fa fa-caret-right"></i> Combination with mDNS
 
@@ -368,7 +368,7 @@ In ordinary, the URL handler will respond the request by sending some HTML. [Pag
 
 An example sketch used with the PageBuilder as follows and it explains how it aids for the HTML generating. Details for [Github repository](https://github.com/Hieromon/PageBuilder).
 
-<img src="./images/PageBuilder.png" style="width:640px;"/>
+<img src="images/PageBuilder.png" style="width:640px;"/>
 
 ## Configuration functions
 
@@ -403,7 +403,7 @@ AutoConnect will activate SoftAP at failed the first *WiFi.begin*. It SoftAP set
 
 **HOME** for returning to the user's sketch homepage will display at the bottom of the AutoConnect menu. It could be set using the [*AutoConnect::home*](api.md#home) function.
 
-<img src="./images/menu_home.png" />
+<img src="images/menu_home.png" />
 
 ### <i class="fa fa-caret-right"></i> Relocate the AutoConnect home path
 
diff --git a/mkdocs/basicusage.md b/mkdocs/basicusage.md
index 4933e94..c169c5f 100644
--- a/mkdocs/basicusage.md
+++ b/mkdocs/basicusage.md
@@ -4,7 +4,7 @@
 
 How embed the AutoConnect to the sketches you have. Most simple approach to applying AutoConnect for the existing sketches, follow the below steps. The below sketch is for ESP8266. For ESP32, replace ```ESP8266WebServer``` with ```WebServer``` and ```ESP8266WiFi.h``` with ```WiFi.h``` respectively.
 
-<img src="./images/BeforeAfter.svg" />
+<img src="images/BeforeAfter.svg" />
 
 <ul class="ulsty-edit" style="list-style:none;">
   <li>Insert <code class="codehilite"><span class="cp">#include</span> <span class="cpf">&lt;AutoConnect.h&gt;</span></code> to behind of <code class="codehilite"><span class="cp">#include</span> <span class="cpf">&lt;ESP8266WebServer.h&gt;</span></code>.</li>
diff --git a/mkdocs/datatips.md b/mkdocs/datatips.md
index 7cca04c..ee75da4 100644
--- a/mkdocs/datatips.md
+++ b/mkdocs/datatips.md
@@ -28,7 +28,7 @@ float value = input.value.toFloat();
 
 The easiest way is to use the [Arduino Time Library](https://www.pjrc.com/teensy/td_libs_Time.html). Sketches must accommodate differences in date and time formats depending on the time zone. You can absorb the difference in DateTime format by using `sscanf` function.[^1]
 
-[^1]:It can not be used with the old Arduino core.
+[^1]:The ssanf library function cannot be used with the old Arduino core.
 
 ```cpp
 #include <TimeLib.h>
@@ -139,31 +139,31 @@ void loop() {
 
 Here, represent examples the typical regular expression for the input validation.
 
-### <img src="./images/regexp.png" align="top"> URL
+### <img src="images/regexp.png" align="top"> URL
 
 ```
 ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
 ```
 
-### <img src="./images/regexp.png" align="top"> DNS hostname
+### <img src="images/regexp.png" align="top"> DNS hostname
 
 ```
 ^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$
 ```
 
-### <img src="./images/regexp.png" align="top"> email address [^1]
+### <img src="images/regexp.png" align="top"> email address [^2]
 
 ```
 ^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$
 ```
 
-### <img src="./images/regexp.png" align="top"> IP Address
+### <img src="images/regexp.png" align="top"> IP Address
 
 ```
 ^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$
 ```
 
-### <img src="./images/regexp.png" align="top"> Date as MM/DD/YYYY [^2]
+### <img src="images/regexp.png" align="top"> Date as MM/DD/YYYY [^3]
 
 ```
 ^(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.](19|20)\d\d$
@@ -172,5 +172,5 @@ Here, represent examples the typical regular expression for the input validation
 !!! caution "Contain with backquote"
     If that regular expression contains a backquote it must be escaped by backquote duplication.
 
-[^1]: This regular expression does not fully support the format of the e-mail address requested in [RFC5322](https://tools.ietf.org/html/rfc5322).
-[^2]: This regular expression does not consider semantic constraints. It is not possible to detect errors that do not exist as actual dates.
+[^2]: This regular expression does not fully support the format of the e-mail address requested in [RFC5322](https://tools.ietf.org/html/rfc5322).
+[^3]: This regular expression does not consider semantic constraints. It is not possible to detect errors that do not exist as actual dates.
diff --git a/mkdocs/faq.md b/mkdocs/faq.md
index 1ebfbab..954266e 100644
--- a/mkdocs/faq.md
+++ b/mkdocs/faq.md
@@ -40,7 +40,7 @@ void loop() {
 ??? hint "You can interactively check the WiFi state of ESP8266."
     Please try [**ESPShaker**](https://github.com/Hieromon/ESPShaker). It is ESP8266 interactive serial command processor.
 
-    <img src="./images/espshaker.gif" />
+    <img src="images/espshaker.gif" />
 
 ## <i class="fa fa-question-circle"></i> Does not response from /\_ac.
 
diff --git a/mkdocs/gettingstarted.md b/mkdocs/gettingstarted.md
index a6863a3..038085b 100644
--- a/mkdocs/gettingstarted.md
+++ b/mkdocs/gettingstarted.md
@@ -40,7 +40,7 @@ After about 30 seconds, if the ESP8266 cannot connect to nearby Wi-Fi spot, you
 
 [^1]:When applied to ESP32, SSID will appear as **esp32ap**.
 
-<span style="display:inline-block;width:282px;height:501px;border:1px solid lightgrey;"><img data-gifffer="./images/login_ani.gif" data-gifffer-width="280" style="width:280px;" /></span><img src="./images/arrow_right.svg" style="vertical-align:top;padding-top:120px;width:48px;margin-left:30px;margin-right:30px;" /><img src="./images/stat.png" style="border:1px solid lightgrey;width:280px;" /></span>
+<span style="display:inline-block;width:282px;height:501px;border:1px solid lightgrey;"><img data-gifffer="images/login_ani.gif" data-gifffer-width="280" style="width:280px;" /></span><img src="images/arrow_right.svg" style="vertical-align:top;padding-top:120px;width:48px;margin-left:30px;margin-right:30px;" /><img src="images/stat.png" style="border:1px solid lightgrey;width:280px;" /></span>
 
 This is the AutoConnect statistics screen. This screen displays the current status of the established connection, WiFi mode, IP address, free memory size, and etc. Also, the **hamburger icon** is the control menu of AutoConnect seems at the upper right. By tap the hamburger icon, the control menu appears as the below.
 
@@ -48,7 +48,7 @@ This is the AutoConnect statistics screen. This screen displays the current stat
 
 Here, tap *"Configure new AP"* to connect the new access point then the SSID configuration screen would be shown. Enter the **SSID** and **Passphrase** and tap **apply** to start connecting the access point.
 
-<img src="./images/menu_login.png" style="border:1px solid lightgrey;width:280px;" /><img src="./images/arrow_right.svg" style="vertical-align:top;padding-top:120px;width:48px;margin-left:30px;margin-right:30px;" /><img src="./images/config_ssid.png" style="border:1px solid lightgrey;width:280px;" />
+<img src="images/menu_login.png" style="border:1px solid lightgrey;width:280px;" /><img src="images/arrow_right.svg" style="vertical-align:top;padding-top:120px;width:48px;margin-left:30px;margin-right:30px;" /><img src="images/config_ssid.png" style="border:1px solid lightgrey;width:280px;" />
 
 ### <i class="fa fa-rss"></i> Connection establishment
 
@@ -57,13 +57,13 @@ After connection established, the current status screen will appear. It is alrea
 For one, continues execution of the sketch while keeping this connection. You can access ESP8266 via browser through the established IP address after cancel to "**Log in**" by upper right on the screen.  
 Or, "**RESET**" can be selected. The ESP8266 resets and reboots. After that, immediately before the connection will be restored automatically with WIFI\_STA mode.
 
-<img src="./images/established.png" style="border:1px solid lightgrey;width:280px;" /><img src="./images/arrow_right.svg" style="vertical-align:top;padding-top:120px;width:48px;margin-left:30px;margin-right:30px;" /><img src="./images/reset.png" style="border:1px solid lightgrey;width:280px;" />
+<img src="images/established.png" style="border:1px solid lightgrey;width:280px;" /><img src="images/arrow_right.svg" style="vertical-align:top;padding-top:120px;width:48px;margin-left:30px;margin-right:30px;" /><img src="images/reset.png" style="border:1px solid lightgrey;width:280px;" />
 
 ### <i class="fa fa-play-circle"></i> Run for usually
 
 The IP address of ESP8266 would be displayed on the serial monitor after connection restored. Please access its address from the browser. The "Hello, world" page will respond. It's the page that was handled by in the sketch with "**on**" function of *ESP8266WebServer*.
 
-<img src="./images/serial.png" style="vertical-align:top;" /><img src="./images/arrow_right.svg" style="vertical-align:top;padding-top:60px;width:48px;margin-left:45px;margin-right:30px;" /><img src="./images/hello_world.png" style="border:1px solid lightgrey;width:280px;" />
+<img src="images/serial.png" style="vertical-align:top;" /><img src="images/arrow_right.svg" style="vertical-align:top;padding-top:60px;width:48px;margin-left:45px;margin-right:30px;" /><img src="images/hello_world.png" style="border:1px solid lightgrey;width:280px;" />
 
 <script>
   window.onload = function() {
diff --git a/mkdocs/howtoembed.md b/mkdocs/howtoembed.md
index 69449b8..510e7ee 100644
--- a/mkdocs/howtoembed.md
+++ b/mkdocs/howtoembed.md
@@ -8,7 +8,7 @@ Uses the web interface to light the LED connected to the **[NodeMCU](https://git
 
 Access to the ESP8266 module connected WiFi from the browser then the page contains the current value of the D0 port would be displayed. The page has the buttons to switch the port value. The LED blinks according to the value of the button that was clicked. This example is a typical sketch of manipulating ESP8266's GPIO via WLAN.
 
-<img data-gifffer="./images/ac2.gif" />
+<img data-gifffer="images/ac2.gif" />
 
 Embed AutoConnect library into this sketch. There are few places to be changed. And you can use AutoConnect's captive portal function to establish a connection freely to other WiFi spots.
 
@@ -18,7 +18,7 @@ Embed AutoConnect library into this sketch. There are few places to be changed.
 
 Bind to ESP8266WebServer, performs handleClient with handleRequest.
 
-<img src="./images/handleClient.svg" />
+<img src="images/handleClient.svg" />
 
 !!! hint "In what situations should the handleRequest be used."
     It is something needs to be done immediately after the handle client. It is better to call only AutoConnect::handleClient whenever possible.
@@ -27,7 +27,7 @@ Bind to ESP8266WebServer, performs handleClient with handleRequest.
 
 Declare only AutoConnect, performs handleClient.
 
-<img src="./images/handlePortal.svg" />
+<img src="images/handlePortal.svg" />
 
 ## Used with MQTT as a client application
 
@@ -35,7 +35,7 @@ The effect of AutoConnect is not only for ESP8266/ESP32 as the web server. It ha
 
 This example tries to publish the WiFi signal strength of ESP8266 with MQTT. It uses the [ThingSpeak](https://thingspeak.com/) for MQTT broker. ESP8266 publishes the RSSI value to the channel created on ThingSpeak as [MQTT client](https://github.com/knolleary/pubsubclient). This example is well suited to demonstrate the usefulness of AutoConnect, as RSSI values are measured at each access point usually. Just adding a few lines of code makes it unnecessary to upload sketches with the different SSIDs rewrite for each access point.
 
-<img src="./images/ChannelStatus.png" width="70%"/>
+<img src="images/ChannelStatus.png" width="70%"/>
 
 ### Advance procedures
 
@@ -60,7 +60,7 @@ At the **New Channel** screen, enter each field as a below. And click **Save Cha
 - Description: ```ESP8266 RSSI publish```
 - Field1: ```RSSI```
 
-<img src="./images/CreateChannel.png" width="70%"/>
+<img src="images/CreateChannel.png" width="70%"/>
 
 #### Get Channel ID and API Keys
 
@@ -68,15 +68,15 @@ The channel successfully created, you can see the channel status screen as a bel
 
 [^2]:'454951' in the example above, but your channel ID should be different.
 
-<img src="./images/ChannelID.png" width="70%"/>
+<img src="images/ChannelID.png" width="70%"/>
 
 Here, switch the channel status tab to **API Keys**. The API key required to publish the message is the **Write API Key**.
 
-<img src="./images/APIKeys.png" width="70%"/>
+<img src="images/APIKeys.png" width="70%"/>
 
 The last key you need is the **User API Key** and can be confirmed it in the user profile. Pull down **Account** from the top menu, select **My profile**. Then you can see the ThingSpeak settings and the **User API Key** is displayed middle of this screen.
 
-<img src="./images/USERKey.png" width="70%"/>
+<img src="images/USERKey.png" width="70%"/>
 
 ### The sketch, Publishes messages
 
@@ -100,25 +100,25 @@ For the client sketches, the code required to connect to WiFi is the following f
     
     Include ```AutoConnect.h``` header file behind the include of ```ESP8266WiFi.h```.
 
-    <img src="./images/include.png" width="55%"/>
+    <img src="images/include.png" width="55%"/>
 
 2. Declare AutoConnect
     
     The declaration of the [**AutoConnect variable**](api.md#autoconnect) is not accompanied by ESP8266WebServer.
 
-    <img src="./images/declare.png" width="55%"/>
+    <img src="images/declare.png" width="55%"/>
 
 3. Invokes "begin()"
     
     Call [**AutoConnect::begin**](api.md#begin). If you need to assign a static IP address, executes [**AutoConnectConfig**](api.md#autoconnectconfig-api) before that. 
 
-    <img src="./images/begin.png" width="55%"/>
+    <img src="images/begin.png" width="55%"/>
 
 4. Performs "handleClent()" in "loop()"
     
     Invokes [**AutoConnect::handleClient()**](api.md#handleclient) at inside ```loop()``` to enable the AutoConnect menu.
 
-    <img src="./images/handleClient.png" width="55%"/>
+    <img src="images/handleClient.png" width="55%"/>
 
 [^3]:```#include <ESP8266WebServer.h>``` does not necessary for uses only client.
 
diff --git a/mkdocs/index.md b/mkdocs/index.md
index d742cf3..46cd882 100644
--- a/mkdocs/index.md
+++ b/mkdocs/index.md
@@ -7,7 +7,7 @@ An Arduino library for ESP8266/ESP32 WLAN configuration at run time with web int
 To the dynamic configuration for joining to WLAN with SSID and PSK accordingly. It an Arduino library united with *ESP8266WebServer* class for ESP8266 or *WebServer* class for ESP32.
 Easy implementing the Web interface constituting the WLAN for ESP8266/ESP32 WiFi connection. With this library to make a sketch easily which connects from ESP8266/ESP32 to the access point at runtime by the web interface without hard-coded SSID and password.
 
-<img style="display:inline-block;width:460px;margin-right:30px;" src="./images/ov.png" /><span style="display:inline-block;width:182px;height:322px;border:solid 1px lightgrey;"><img data-gifffer="./images/ov.gif" data-gifffer-width="180" style="width:180px;" /></span>
+<img style="display:inline-block;width:460px;margin-right:30px;" src="images/ov.png" /><span style="display:inline-block;width:182px;height:322px;border:solid 1px lightgrey;"><img data-gifffer="images/ov.gif" data-gifffer-width="180" style="width:180px;" /></span>
 
 ### <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> No need pre-coded SSID &amp; password
 
@@ -34,9 +34,9 @@ Easy implementing the Web interface constituting the WLAN for ESP8266/ESP32 WiFi
 <span class="lead">You can easily add your owned web screens that can consist of representative HTML elements and invoke them from the menu. Further it possible importing the custom Web pages declarations described with JSON which stored in PROGMEM, SPIFFS, or SD.</span>
 
 <div style="display:block;height:425px;">
-<img style="float:left;width:380px;" src="./images/aux_json.png">
-<img style="float:left;margin-top:200px;margin-left:10px;margin-right:10px;width:32px;" src="./images/arrow_right.png">
-<span style="float:left;width:242px;height:425px;border:1px solid lightgrey;"><img data-gifffer="./images/aux_ov.gif" data-gifffer-width="240" data-gifffer-height="423" /></span>
+<img style="float:left;width:380px;" src="images/aux_json.png">
+<img style="float:left;margin-top:200px;margin-left:10px;margin-right:10px;width:32px;" src="images/arrow_right.png">
+<span style="float:left;width:242px;height:425px;border:1px solid lightgrey;"><img data-gifffer="images/aux_ov.gif" data-gifffer-width="240" data-gifffer-height="423" /></span>
 </div>
 
 ## Installation
@@ -88,7 +88,7 @@ The [PageBuilder](https://github.com/Hieromon/PageBuilder) library to build HTML
 To install the PageBuilder library into your Arduino IDE, you can use the *Library Manager*. Select the board of ESP8266 series in the Arduino IDE, open the library manager and search keyword '**PageBuilder**' with the topic '**Communication**', then you can see the *PageBuilder*. The latest version is required 1.3.2 later.[^1]
 [^1]:Since AutoConnect v0.9.7, PageBuilder v1.3.2 later is required.
 
-<img src="./images/lm.png" width="640"/>
+<img src="images/lm.png" width="640"/>
 
 
 <i class="fa fa-download"></i> <strong>Additional library (Optional)</strong>
@@ -103,11 +103,11 @@ By adding the [ArduinoJson](https://github.com/bblanchon/ArduinoJson) library, A
 
 Clone or download from the [AutoConnect GitHub repository](https://github.com/Hieromon/AutoConnect).
 
-<img src="./images/gitrepo.png" width="640"/>
+<img src="images/gitrepo.png" width="640"/>
 
 When you select Download, you can import it to Arduino IDE immediately. After downloaded, the AutoConnect-master.zip file will be saved in your download folder. Then in the Arduino IDE, navigate to *"Sketch > Include Library"*. At the top of the drop down list, select the option to *"Add .ZIP Library..."*. Details for [Arduino official page](https://www.arduino.cc/en/Guide/Libraries#toc4).
 
-<img src="./images/ins_lib.png" />
+<img src="images/ins_lib.png" />
 
 !!! info "Supported by Library manager."
     AutoConnect was added to the Arduino IDE library manager. It can be used with the PlatformIO library also.
diff --git a/mkdocs/menu.md b/mkdocs/menu.md
index 83e1fd2..2ffc0f7 100644
--- a/mkdocs/menu.md
+++ b/mkdocs/menu.md
@@ -5,7 +5,7 @@
 
 The AutoConnect menu appears when you access the **AutoConnect root path**. It is assigned "**/_ac**" located on the *local IP address* of ESP8266/ESP32 module by default. This location can be changed in the sketch. The following screen will appear at access to `http://{localIP}/_ac` as the root path. This is the statistics of the current WiFi connection. You can access the menu from the here, to invoke it tap <i class="fa fa-bars"></i> at right on top. (e.g. `http://192.168.244.1/_ac` for SoftAP mode.)
 
-<img src="./images/ac.png" style="border-style:solid;border-width:1px;border-color:lightgrey;width:280px;" />
+<img src="images/ac.png" style="border-style:solid;border-width:1px;border-color:lightgrey;width:280px;" />
 
 !!! note "What's the local IP?"
     A local IP means Local IP at connection established or SoftAP's IP.
@@ -20,20 +20,20 @@ Currently, AutoConnect supports four menus. Undermost menu as "HOME" returns to
 - **Reset...**: Rest the ESP8266/ESP32 module.
 - **HOME**: Return to user home page.
 
-<img src="./images/menu.png" style="width:280px;" />
+<img src="images/menu.png" style="width:280px;" />
 
 ## <i class="fa fa-bars"></i> Configure new AP
 
 Scan all available access point in the vicinity and display it. Strength and security of the detected AP are marked. The <i class="fa fa-lock"></i> is indicated for the SSID that needs a security key. "**Hidden:**" means the number of hidden SSIDs discovered.  
 Enter SSID and Passphrase and tap "**apply**" to starts WiFi connection. 
 
-<img src="./images/newap.png" style="border-style:solid;border-width:1px;border-color:lightgrey;width:280px;" />
+<img src="images/newap.png" style="border-style:solid;border-width:1px;border-color:lightgrey;width:280px;" />
 
 ## <i class="fa fa-bars"></i> Open SSIDs
 
 Once it was established WiFi connection, its SSID and password will be saved in EEPROM of ESP8266/ESP32 automatically. The **Open SSIDs** menu reads the saved SSID credentials from the EEPROM. The stored credential data are listed by the SSID as shown below. Its label is a clickable button. Tap the SSID button, starts WiFi connection it.
 
-<img src="./images/open.png" style="border-style:solid;border-width:1px;border-color:lightgrey;width:280px;" />
+<img src="images/open.png" style="border-style:solid;border-width:1px;border-color:lightgrey;width:280px;" />
 
 ## <i class="fa fa-bars"></i> Disconnect
 
@@ -45,7 +45,7 @@ After tapping "Disconnect", you will not be able to reach the AutoConnect menu.
 
 Reset the ESP8266/ESP32 module, it will start rebooting. After rebooting complete, the ESP8266/ESP32 module begins establishing the previous connection with WIFI_STA mode, and *esp8266ap* or *esp32ap* of an access point will disappear from WLAN.
 
-<img src="./images/resetting.png" style="width:280px;" />
+<img src="images/resetting.png" style="width:280px;" />
 
 !!! warning "Not every ESP8266 module will be rebooted normally"
     The Reset menu is using the **ESP.reset()** function for ESP8266. This is an almost hardware reset. In order to resume the sketch normally, the [state of GPIO0](https://github.com/esp8266/esp8266-wiki/wiki/Boot-Process#esp-boot-modes) is important. Since this depends on the circuit implementation for each module, not every module will be rebooted normally. See also [FAQ](faq.md#hang-up-after-reset).
@@ -68,7 +68,7 @@ You can change the HOME path using the AutoConnect API. The [**AutoConnect::home
 
 The AutoConnect menu can contain HTML pages of your sketch as custom items. It works for HTML pages implemented by **ESP8266WebServer::on** handler or **WebServer::on** handler for ESP32. That is, you can make it as menu items to invoke the legacy web page. The below screenshot is the result of adding an example sketch for the ESP8266WebServer library known as [FSBrowser](https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer/examples/FSBrowser) to the AutoConnect menu item. It adds Edit and List items with little modification of the legacy sketch code.
 
-<div style="float:left;width:auto;height:420px;"><img style="width:auto;height:420px;" src="./images/fsbmenu.png"></div>
-<img style="margin-left:70px;width:auto;height:420px;" src="./images/fsbmenu_expand.png">
+<div style="float:left;width:auto;height:420px;"><img style="width:auto;height:420px;" src="images/fsbmenu.png"></div>
+<img style="margin-left:70px;width:auto;height:420px;" src="images/fsbmenu_expand.png">
 
 You can extend the AutoConnect menu to improve the original sketches and according to the procedure described in section [Advanced Usage section](advancedusage.md#casts-the-html-pages-to-be-add-on-into-the-menu).
diff --git a/mkdocs/menuize.md b/mkdocs/menuize.md
index 039086f..02fedc0 100644
--- a/mkdocs/menuize.md
+++ b/mkdocs/menuize.md
@@ -23,7 +23,7 @@ To implement this with your sketch, use only the [AutoConnectAux](apiaux.md#auto
 
 The AutoConnect library package contains an example sketch for ESP8266WebServer known as FSBrowser. Its example is a sample implementation that supports AutoConnect without changing the structure of the original FSBrowser and has the menu item for **Edit** and **List**.
 
-<span style="display:block;margin-left:auto;margin-right:auto;width:282px;height:492px;border:1px solid lightgrey;"><img data-gifffer="./images/aux_fsbrowser.gif" data-gifffer-height="490" data-gifffer-width="280" /></span>
+<span style="display:block;margin-left:auto;margin-right:auto;width:282px;height:492px;border:1px solid lightgrey;"><img data-gifffer="images/aux_fsbrowser.gif" data-gifffer-height="490" data-gifffer-width="280" /></span>
 
 The changes I made to adapt the FSBrowser to the AutoConnect menu are slight as follows:
 
@@ -36,7 +36,7 @@ The changes I made to adapt the FSBrowser to the AutoConnect menu are slight as
 
 <i class="fa fa-code"></i>&ensp;**Modification for FSBrowser** <small>(part  of sketch code)</small>
 
-<div style="overflow:auto"><img style="width:auto;max-width:none;height:840px" src="./images/fsbrowser_ba.svg" /></div>
+<div style="overflow:auto"><img style="width:auto;max-width:none;height:840px" src="images/fsbrowser_ba.svg" /></div>
 
 <script>
   window.onload = function() {
diff --git a/mkdocs/wojson.md b/mkdocs/wojson.md
index cdad46f..688abbe 100644
--- a/mkdocs/wojson.md
+++ b/mkdocs/wojson.md
@@ -152,7 +152,7 @@ The code excluding JSON processing from the mqttRSSI sketch attached to the libr
   }
 ]
 ```
-<span style="margin-right:6px;margin-top:2px;"><img align="middle" width="32" height="32" src="./images/arrow_down.png"></span><i class="fa fa-code"></i> Exclude the JSON and replace to the AutoConnectElements natively
+<span style="margin-right:6px;margin-top:2px;"><img align="middle" width="32" height="32" src="images/arrow_down.png"></span><i class="fa fa-code"></i> Exclude the JSON and replace to the AutoConnectElements natively
 
 ```cpp
 // In the declaration,