Differences

This shows you the differences between two versions of the page.

--- devwiki:html [2021/12/20 07:17] – [Style related operation] ying
+++ devwiki:html [2022/07/08 02:08] – [Responsive Design] ying
@@ Line 51: / Line 51: @@
     * 12 or 16 grid system
+**Responsive Elements**
+  * responsive image map:
+    * image map basic and tool
+      * https://www.w3schools.com/html/html_images_imagemap.asp
+      * http://www.htmldrive.net/items/show/704/pure-CSS-Image-Maps
+      * (works) https://summerstyle.github.io/summer/
+      * https://www.mobilefish.com/services/image_map/image_map.php
+    * (works) js method to recalculate map when image resize (need to call when image visible): https://github.com/davidjbradshaw/image-map-resizer
+    * (not sure, not on attemp) instead map, it use generated svg method: https://imagemapper.noc.io/#/
+      * https://stackoverflow.com/questions/19484707/how-can-i-make-an-svg-scale-with-its-parent-container
+      * https://css-tricks.com/scale-svg/
+    * (similar js but old) https://github.com/stowball/jQuery-rwdImageMaps
+      * https://researchasahobby.com/responsive-image-clickable-areas-free/
 **CSS Pre-processor**
   * SASS/SCSS/LESS likes, it turns what you write into a css code
@@ Line 201: / Line 215: @@
 choice_input.blur() // remove focus from this input
 }
+// also if you have onload function, you can add this to onload to reset last choice when refresh browser
+const tmp_choice_input= document.querySelector(".my_choice")
+tmp_choice_input.selectedIndex = "0";
 </code>