{"id":3466,"date":"2021-03-11T04:43:42","date_gmt":"2021-03-11T04:43:42","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3466"},"modified":"2023-02-28T05:11:33","modified_gmt":"2023-02-28T05:11:33","slug":"css-tutorial-highlight-indoor-map-with-animate-css","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-highlight-indoor-map-with-animate-css\/","title":{"rendered":"CSS Tutorial &#8211; Highlight Indoor Map with animate.css"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; <em>Indoor maps<\/em>\u00a0can include overlays that\u00a0<em>highlight<\/em> specific areas, such as rooms, and other locations.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"CSS Tutorial - Highlight Indoor Map with animate.css\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/ZEoOOLB?default-tab=result&amp;theme-id=dark\" height=\"850\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/ZEoOOLB\"><br \/>\nCSS Tutorial &#8211; Highlight Indoor Map with animate.css<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\/\/ Highligth on hover Store\r\n$(\"p\").hover(\r\n  function () {\r\n    var hoveritem = \"#\" + this.id + \"map\";\r\n    $(hoveritem).css({ fill: \"var(--highligthcolor)\" });\r\n    $(this).css(\"background-color\", \"var(--highligthcolor)\");\r\n  },\r\n  function () {\r\n    var hoveritem = \"#\" + this.id + \"map\";\r\n    $(this).css(\"background-color\", \"var(--colortop)\");\r\n    $(hoveritem).css({ fill: \"var(--colortop)\" });\r\n  }\r\n);\r\n\r\n\/\/ Highligth on hover Map\r\n$(\".st0\").hover(\r\n  function () {\r\n    var hoveritem = \"#\" + this.id.slice(0, -3);\r\n    $(this).css({ fill: \"var(--highligthcolor)\" });\r\n    $(hoveritem).css(\"background-color\", \"var(--highligthcolor)\");\r\n  },\r\n  function () {\r\n    var hoveritem = \"#\" + this.id.slice(0, -3);\r\n    $(this).css({ fill: \"var(--colortop)\" });\r\n    $(hoveritem).css(\"background-color\", \"var(--colortop)\");\r\n  }\r\n);\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; Indoor maps\u00a0can include overlays that\u00a0highlight specific areas, such as <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-tutorial-highlight-indoor-map-with-animate-css\/\" title=\"CSS Tutorial &#8211; Highlight Indoor Map with animate.css\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3827,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[344,197,345,103,227],"newstopic":[],"class_list":{"0":"post-3466","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"tag-animate-css","9":"tag-css-tutorial","10":"tag-highlight-indoor-map","11":"tag-web-design","12":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3466","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3466"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3466\/revisions"}],"predecessor-version":[{"id":3468,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3466\/revisions\/3468"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3827"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3466"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}