{"id":40704,"date":"2018-09-13T03:01:55","date_gmt":"2018-09-12T17:01:55","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=40704"},"modified":"2018-09-12T21:53:43","modified_gmt":"2018-09-12T11:53:43","slug":"gimp-guillotine-follow-up-svg-filter-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-follow-up-svg-filter-tutorial\/","title":{"rendered":"Gimp Guillotine Follow Up SVG Filter Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Gimp Guillotine Follow Up SVG Filter Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine_svg_filter.jpg\" title=\"Gimp Guillotine Follow Up SVG Filter Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Gimp Guillotine Follow Up SVG Filter Tutorial<\/p><\/div>\n<p>Yesterday with <a title='Gimp Guillotine Follow Up SVG Tutorial' href='#ggfusvgt'>Gimp Guillotine Follow Up SVG Tutorial<\/a> we started down the road with some SVG functionality to our GIMP Follow Up (ie. what  we can do with a sequence of related images, and a server side language like PHP) web application and along that now long and winding road we touched on some filters to, at the client side CSS level, we could change the look of \u201clots\u201d of our display \u201clooks\u201d we\u2019ve been building up.<\/p>\n<p>That \u201clots\u201d of above did not \u201cgenerally\u201d apply to SVG until with some, today, we\u2019re going to show you that SVG does indeed have a lot of its own filters (and here we include \u201ctransform\u201d as well), the two we are going to incorporate today being &#8230;<\/p>\n<ul>\n<li><a target=_blank title=''SVG filters on left' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Element\/feGaussianBlur'>feGaussianBlur<\/a> &#8230; like filter \u201cblur\u201d<\/li>\n<li><a target=_blank title=''SVG filters on left' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Element\/feOffset'>feOffset<\/a> &#8230; like transform \u201ctranslate\u201d<\/li>\n<\/ul>\n<p>&#8230; but there are many more you can read about at <a target=_blank title=''SVG filters on left' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Element\/feBlend'>SVG: Scalable Vector Graphics | MDN<\/a> should you want to find out more.<\/p>\n<p>How do they get worked in?  In the SVG element\u2019s defs section we add new SVG filter definitions that include a unique \u201cid\u201d.   Then in the non defs parts (but alas \u201cpath\u201d does not seem to work) you include a parameter of the form &#8230;<\/p>\n<p><code><br \/>\n filter=\u2018url(#[SVGfilterID])\u2019<br \/>\n<\/code><\/p>\n<p> &#8230; and then Bob becomes your uncle and Fanny becomes your aunt.<\/p>\n<p>This is the SVG additional code for today&#8217;s SVG Filter work with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php\" title=\"Click picture\">live run<\/a>&#8216;s PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php------------GETME\" title=\"gimp_guillotine_followup.php\">gimp_guillotine_followup.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php------------GETME\" title=\"gimp_guillotine_followup.php\">changed code<\/a>.<\/p>\n<p>To simulate the scenario of today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine_svg_filter.jpg\" title=\"Tutorial picture\">tutorial picture<\/a> (with another Firefox web browser Web Inspector view) take a dekko of &#8230;<\/p>\n<p><a style='width:100%;word-wrap:break-word;' target=_blank title='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=.%2Fmondrian-1504681_640-0-0.png%2C.%2Fmondrian-1504681_640-1-0.png%2C.%2Fmondrian-1504681_640-2-1.png&#038;svgnmw=Process+with+SVG+Polygons&#038;style=+div%2C+img+{+-webkit-filter%3A+blur(4px)%3B+filter%3A+blur(4px)%3B+}+' href='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=.%2Fmondrian-1504681_640-0-0.png%2C.%2Fmondrian-1504681_640-1-0.png%2C.%2Fmondrian-1504681_640-2-1.png&#038;svgnmw=Process+with+SVG+Polygons&#038;style=+div%2C+img+{+-webkit-filter%3A+blur(4px)%3B+filter%3A+blur(4px)%3B+}+'>http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=.%2Fmondrian-1504681_640-0-0.png%2C.%2Fmondrian-1504681_640-1-0.png%2C.%2Fmondrian-1504681_640-2-1.png&#038;svgnmw=Process+with+SVG+Polygons&#038;style=+div%2C+img+{+-webkit-filter%3A+blur(4px)%3B+filter%3A+blur(4px)%3B+}+<\/a><br \/>\n<iframe style='width:100%;height:650px;' src='\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=.%2Fmondrian-1504681_640-0-0.png%2C.%2Fmondrian-1504681_640-1-0.png%2C.%2Fmondrian-1504681_640-2-1.png&#038;svgnmw=Process+with+SVG+Polygons&#038;style=+div%2C+img+{+-webkit-filter%3A+blur(4px)%3B+filter%3A+blur(4px)%3B+}+'><\/iframe><\/p>\n<hr>\n<p id='ggfusvgt'>Previous relevant <a target=_blank title='Gimp Guillotine Follow Up SVG Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-follow-up-svg-tutorial\/'>Gimp Guillotine Follow Up SVG Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Gimp Guillotine Follow Up SVG Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine_svg.jpg\" title=\"Gimp Guillotine Follow Up SVG Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Gimp Guillotine Follow Up SVG Tutorial<\/p><\/div>\n<p>Today&#8217;s SVG day adding onto the progress from yesterday&#8217;s <a title='Gimp Guillotine Follow Up Image Transformations Tutorial' href='#ggfuitt'>Gimp Guillotine Follow Up Image Transformations Tutorial<\/a>.<\/p>\n<p>What&#8217;s SVG?  Read from <a target=_blank title='SVG information from Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/Scalable_Vector_Graphics'>Wikipedia<\/a> below &#8230;<\/p>\n<blockquote cite='https:\/\/en.wikipedia.org\/wiki\/Scalable_Vector_Graphics'><p>\nScalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files.\n<\/p><\/blockquote>\n<p> &#8230; and know it is a very important way to express graphical information online today, especially if your data has a vector based source.  Even without that vector based editor (eg. <a target=_blank title='Inkscape' href='https:\/\/inkscape.org\/en\/'>Inkscape<\/a>) involvement you can take raster based image data, and express it in an <a target=_blank title='SVG information from w3schools' href='https:\/\/www.w3schools.com\/graphics\/svg_intro.asp'>SVG<\/a> way.  Our data URIs in our &#8220;GIMP Follow Up&#8221; are in raster based form, but they can still be expressed in &#8230;<\/p>\n<ul>\n<li>an <em>SVG<\/em> element&#8217;s &#8230;<\/li>\n<li><em>defs<\/em> definition element section&#8217;s &#8230;<\/li>\n<li><em>pattern<\/em> element with a unique <em>id<\/em> nesting &#8230;<\/li>\n<li><em>image<\/em> element&#8217;s <em>xlink:href<\/em> property&#8217;s data URI &#8230; then that &#8230;<\/li>\n<li><em>SVG<\/em> (non <em>defs<\/em> part) element&#8217;s &#8230;<\/li>\n<li><em>polygon<\/em> elements can refer to corresponding data URI background data via their <em>fill<\/em> property&#8217;s (corresponding) url(#[patternElementID])<\/li>\n<\/ul>\n<p>SVG co-ordinate systems making sense for our GIMP Guillotine &#8220;jigsaw&#8221; feel depend on &#8230;<\/p>\n<ul>\n<li>an overall <em>SVG<\/em> <em>viewBox<\/em> property value 0 0 [totalWidth] [totalHeight] &#8230; and then for each &#8230;<\/li>\n<li><em>polygon<\/em> element <em>viewBox<\/em> property value [Xoffset] [Yoffset] [width] [height] where width and height are those of the &#8220;jigsaw piece&#8221; and Xoffset and Yoffset are relative to positioning of elements that precede them<\/li>\n<\/ul>\n<p>Take a look at the right hand side of today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine_svg.jpg\" title=\"Tutorial picture\">tutorial picture<\/a> to see more detail of the (outerHTML) look of such a SVG element, seen in Firefox&#8217;s Inspector web inspector.<\/p>\n<p>Here is the SVG additional code for today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php\" title=\"Click picture\">live run<\/a>&#8216;s PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php----------GETME\" title=\"gimp_guillotine_followup.php\">gimp_guillotine_followup.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php----------GETME\" title=\"gimp_guillotine_followup.php\">changed code<\/a>.<\/p>\n<hr>\n<p id='ggfuitt'>Previous relevant <a target=_blank title='Gimp Guillotine Follow Up Image Transformations Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-follow-up-image-transformations-tutorial\/'>Gimp Guillotine Follow Up Image Transformations Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Gimp Guillotine Follow Up Image Transformations Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine_transformations.jpg\" title=\"Gimp Guillotine Follow Up Image Transformations Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Gimp Guillotine Follow Up Image Transformations Tutorial<\/p><\/div>\n<p>Following today&#8217;s work along with yesterday&#8217;s <a title='Gimp Guillotine Follow Up Image Filters Tutorial' href='#ggfuift'>Gimp Guillotine Follow Up Image Filters Tutorial<\/a> we now have two strands of CSS based functionality &#8230;<\/p>\n<ul>\n<li>yesterday&#8217;s CSS filter property work &#8230; and &#8230;<\/li>\n<li>today&#8217;s CSS <a target=_blank title='CSS transform property information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_transform.asp'>transform<\/a> property work<\/li>\n<\/ul>\n<p> &#8230; the latter there for your more geometrically based concepts as per &#8230;<\/p>\n<ul>\n<li>matrix(n,n,n,n,n,n) &#8230; Defines a 2D transformation, using a matrix of six values &#8230; &lt;style&gt; div, img { -webkit-transform: matrix(1.1,0.0,0.0,1.2,0,0); transform: matrix(1.1,0.0,0.0,1.2,0,0); }  &lt;\/style&gt; <br \/>\n<a style='width:100%;word-wrap:break-word;' target=_blank title='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-transform%3A+matrix(1.1%2C0.0%2C0.0%2C1.2%2C0%2C0)%3B+transform%3A+matrix(1.1%2C0.0%2C0.0%2C1.2%2C0%2C0)%3B+}+' href='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-transform%3A+matrix(1.1%2C0.0%2C0.0%2C1.2%2C0%2C0)%3B+transform%3A+matrix(1.1%2C0.0%2C0.0%2C1.2%2C0%2C0)%3B+}+'>http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-transform%3A+matrix(1.1%2C0.0%2C0.0%2C1.2%2C0%2C0)%3B+transform%3A+matrix(1.1%2C0.0%2C0.0%2C1.2%2C0%2C0)%3B+}+<\/a><br \/>\n<iframe style='width:100%;height:650px;' src='\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-transform%3A+matrix(1.1%2C0.0%2C0.0%2C1.2%2C0%2C0)%3B+transform%3A+matrix(1.1%2C0.0%2C0.0%2C1.2%2C0%2C0)%3B+}+'><\/iframe>\n<\/li>\n<li>matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) &#8230; Defines a 3D transformation, using a 4&#215;4 matrix of 16 values\n<\/li>\n<li>translate(x,y) &#8230; Defines a 2D translation &#8230; &lt;style&gt; div, img { -webkit-transform: translate(23px,67px); transform: translate(23px,67px); }  &lt;\/style&gt; <br \/>\n<a style='width:100%;word-wrap:break-word;' target=_blank title='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-transform%3A+translate(23px%2C67px)%3B+transform%3A+translate(23px%2C67px)%3B+}+' href='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-transform%3A+translate(23px%2C67px)%3B+transform%3A+translate(23px%2C67px)%3B+}+'>http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-transform%3A+translate(23px%2C67px)%3B+transform%3A+translate(23px%2C67px)%3B+}+<\/a><br \/>\n<iframe style='width:100%;height:650px;' src='\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-transform%3A+translate(23px%2C67px)%3B+transform%3A+translate(23px%2C67px)%3B+}+'><\/iframe>\n<\/li>\n<li>translate3d(x,y,z) &#8230; Defines a 3D translation\n<\/li>\n<li>scale(x,y) &#8230; Defines a 2D scale transformation &#8230; &lt;style&gt; div, img { -webkit-transform: scale(0.9,1.3); transform: scale(0.9,1.3); }  &lt;\/style&gt; <br \/>\n<a style='width:100%;word-wrap:break-word;' target=_blank title='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-transform%3A+scale(0.9%2C1.3)%3B+transform%3A+scale(0.9%2C1.3)%3B+}+' href='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-transform%3A+scale(0.9%2C1.3)%3B+transform%3A+scale(0.9%2C1.3)%3B+}+'>http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-transform%3A+scale(0.9%2C1.3)%3B+transform%3A+scale(0.9%2C1.3)%3B+}+<\/a><br \/>\n<iframe style='width:100%;height:650px;' src='\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-transform%3A+scale(0.9%2C1.3)%3B+transform%3A+scale(0.9%2C1.3)%3B+}+'><\/iframe>\n<\/li>\n<li>scale3d(x,y,z) &#8230; Defines a 3D scale transformation\n<\/li>\n<li>rotate(angle) &#8230; Defines a 2D rotation, the angle is specified in the parameter &#8230; &lt;style&gt; div, img { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); }  &lt;\/style&gt; <br \/>\n<a style='width:100%;word-wrap:break-word;' target=_blank title='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-transform%3A+rotate(-15deg)%3B+transform%3A+rotate(-15deg)%3B+}+' href='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-transform%3A+rotate(-15deg)%3B+transform%3A+rotate(-15deg)%3B+}+'>http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-transform%3A+rotate(-15deg)%3B+transform%3A+rotate(-15deg)%3B+}+<\/a><br \/>\n<iframe style='width:100%;height:650px;' src='\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-transform%3A+rotate(-15deg)%3B+transform%3A+rotate(-15deg)%3B+}+'><\/iframe>\n<\/li>\n<li>rotate3d(x,y,z,angle) &#8230; Defines a 3D rotation\n<\/li>\n<li>skew(x-angle,y-angle) &#8230; Defines a 2D skew transformation along the X- and the Y-axis &#8230; &lt;style&gt; div, img { -webkit-transform: skew(5deg,-5deg); transform: skew(5deg,-5deg); }  &lt;\/style&gt; <br \/>\n<a style='width:100%;word-wrap:break-word;' target=_blank title='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-transform%3A+skew(5deg%2C-5deg)%3B+transform%3A+skew(5deg%2C-5deg)%3B+}+' href='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-transform%3A+skew(5deg%2C-5deg)%3B+transform%3A+skew(5deg%2C-5deg)%3B+}+'>http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-transform%3A+skew(5deg%2C-5deg)%3B+transform%3A+skew(5deg%2C-5deg)%3B+}+<\/a><br \/>\n<iframe style='width:100%;height:650px;' src='\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-transform%3A+skew(5deg%2C-5deg)%3B+transform%3A+skew(5deg%2C-5deg)%3B+}+'><\/iframe>\n<\/li>\n<\/ul>\n<p>Part of today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php\" title=\"Click picture\">live run<\/a>&#8216;s PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php---------GETME\" title=\"gimp_guillotine_followup.php\">gimp_guillotine_followup.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php---------GETME\" title=\"gimp_guillotine_followup.php\">changed code<\/a> is to allow for multiple combinations between and among the &#8220;filter&#8221; and &#8220;transform&#8221; CSS property functionalities.<\/p>\n<p>How do you cater for multiple &#8220;filter&#8221; or &#8220;transform&#8221; CSS property functionality syntax?  A space character can separate.<\/p>\n<ul>\n<li>rotate(angle) translate(x,y) &#8230; Defines a 2D rotation, the angle is specified in the parameter then define a 2D translation &#8230; &lt;style&gt; div, img { -webkit-transform: rotate(-15deg) translate(23px,67px); transform: rotate(-15deg) translate(23px,67px); }  &lt;\/style&gt; <br \/>\n<a style='width:100%;word-wrap:break-word;' target=_blank title='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-transform%3A+rotate(-15deg)++translate(23px%2C67px)%3B+transform%3A+rotate(-15deg)++translate(23px%2C67px)%3B+}+++++' href='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-transform%3A+rotate(-15deg)++translate(23px%2C67px)%3B+transform%3A+rotate(-15deg)++translate(23px%2C67px)%3B+}+++++'>http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-transform%3A+rotate(-15deg)++translate(23px%2C67px)%3B+transform%3A+rotate(-15deg)++translate(23px%2C67px)%3B+}+++++<\/a><br \/>\n<iframe style='width:100%;height:650px;' src='\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-transform%3A+rotate(-15deg)++translate(23px%2C67px)%3B+transform%3A+rotate(-15deg)++translate(23px%2C67px)%3B+}+++++'><\/iframe>\n<\/li>\n<\/ul>\n<p> &#8230; and\/or we can involve &#8220;filter&#8221; multiple actions as well as &#8220;transform&#8221; ones as per &#8230;<\/p>\n<ul>\n<li>&lt;style&gt;    div, img { -webkit-filter: saturate(45%)  sepia(78%); filter: saturate(45%)  sepia(78%); }       div, img { -webkit-transform: rotate(-15deg)  translate(23px,67px); transform: rotate(-15deg)  translate(23px,67px); }        &lt;\/style&gt; <br \/>\n<a style='width:100%;word-wrap:break-word;' target=_blank title='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+saturate(45%25)++sepia(78%25)%3B+filter%3A+saturate(45%25)++sepia(78%25)%3B+}+++++++div%2C+img+{+-webkit-transform%3A+rotate(-15deg)++translate(23px%2C67px)%3B+transform%3A+rotate(-15deg)++translate(23px%2C67px)%3B+}+++++' href='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+saturate(45%25)++sepia(78%25)%3B+filter%3A+saturate(45%25)++sepia(78%25)%3B+}+++++++div%2C+img+{+-webkit-transform%3A+rotate(-15deg)++translate(23px%2C67px)%3B+transform%3A+rotate(-15deg)++translate(23px%2C67px)%3B+}+++++'>http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+saturate(45%25)++sepia(78%25)%3B+filter%3A+saturate(45%25)++sepia(78%25)%3B+}+++++++div%2C+img+{+-webkit-transform%3A+rotate(-15deg)++translate(23px%2C67px)%3B+transform%3A+rotate(-15deg)++translate(23px%2C67px)%3B+}+++++<\/a><br \/>\n<iframe style='width:100%;height:650px;' src='\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+saturate(45%25)++sepia(78%25)%3B+filter%3A+saturate(45%25)++sepia(78%25)%3B+}+++++++div%2C+img+{+-webkit-transform%3A+rotate(-15deg)++translate(23px%2C67px)%3B+transform%3A+rotate(-15deg)++translate(23px%2C67px)%3B+}+++++'><\/iframe>\n<\/li>\n<\/ul>\n<p>How do we allow for multiple &#8220;filter&#8221; or &#8220;transform&#8221; CSS property functionality definition by the user?  We set a fairly large <i>setTimeout(fc, 8000)<\/i> mode of calling it into play.  Then during that 8 second delay, should the user click another &#8220;filter&#8221; or &#8220;transform&#8221; CSS button, this CSS is appended to whatever is already there and a Javascript function tidies this up before the HTML navigation is made, via &#8230;<\/p>\n<p><code><br \/>\n    function restyle() {<br \/>\n    var ov=document.getElementById('style').value;<br \/>\n    var ihuha=0;<br \/>\n    var origov=ov;<br \/>\n    var huha=ov.split('-webkit-transform:');<br \/>\n    if (huha.length &gt; 2) {<br \/>\n      for (ihuha=eval(-1 + huha.length); ihuha&gt;=2; ihuha--) {<br \/>\n        ov=ov.replace('-webkit-transform:' + huha[1].split(';')[0] + ';', '-webkit-transform:' + huha[ihuha].split(';')[0] + ' ' + huha[1].split(';')[0] + ';');<br \/>\n        ov=ov.replace('-webkit-transform:' + huha[ihuha].split(';')[0] + ';', '');<br \/>\n        huha=ov.split('-webkit-transform:');<br \/>\n      }<br \/>\n    }<br \/>\n    huha=ov.split(' transform:');<br \/>\n    if (huha.length &gt; 2) {<br \/>\n      for (ihuha=eval(-1 + huha.length); ihuha&gt;=2; ihuha--) {<br \/>\n        ov=ov.replace(' transform:' + huha[1].split(';')[0] + ';', ' transform:' + huha[ihuha].split(';')[0] + ' ' + huha[1].split(';')[0] + ';');<br \/>\n        ov=ov.replace(' transform:' + huha[ihuha].split(';')[0] + ';', '');<br \/>\n        huha=ov.split(' transform:');<br \/>\n      }<br \/>\n    }<br \/>\n    huha=ov.split('-webkit-filter:');<br \/>\n    if (huha.length &gt; 2) {<br \/>\n      for (ihuha=eval(-1 + huha.length); ihuha&gt;=2; ihuha--) {<br \/>\n        ov=ov.replace('-webkit-filter:' + huha[1].split(';')[0] + ';', '-webkit-filter:' + huha[ihuha].split(';')[0] + ' ' + huha[1].split(';')[0] + ';');<br \/>\n        ov=ov.replace('-webkit-filter:' + huha[ihuha].split(';')[0] + ';', '');<br \/>\n        huha=ov.split('-webkit-filter:');<br \/>\n      }<br \/>\n    }<br \/>\n    huha=ov.split(' filter:');<br \/>\n    if (huha.length &gt; 2) {<br \/>\n      for (ihuha=eval(-1 + huha.length); ihuha&gt;=2; ihuha--) {<br \/>\n        ov=ov.replace(' filter:' + huha[1].split(';')[0] + ';', ' filter:' + huha[ihuha].split(';')[0] + ' ' + huha[1].split(';')[0] + ';');<br \/>\n        ov=ov.replace(' filter:' + huha[ihuha].split(';')[0] + ';', '');<br \/>\n        huha=ov.split(' filter:');<br \/>\n      }<br \/>\n    }<br \/>\n    if (origov != ov) { document.getElementById('style').value=ov.replace(\/div\\, img \\{  \\}\/g,' '); }<br \/>\n    }<br \/>\n<\/code><\/p>\n<hr>\n<p id='ggfuift'>Previous relevant <a target=_blank title='Gimp Guillotine Follow Up Image Filters Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-follow-up-image-filters-tutorial\/'>Gimp Guillotine Follow Up Image Filters Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Gimp Guillotine Follow Up Image Filters Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine_filters.jpg\" title=\"Gimp Guillotine Follow Up Image Filters Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Gimp Guillotine Follow Up Image Filters Tutorial<\/p><\/div>\n<p>Is it ironic that a blog posting about <a target=_blank title='GIMP' href='http:\/\/gimp.org'>GIMP<\/a> should be letting applications like GIMP take a holiday <\/font size=1>&#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=vLj0FV_ZS74'>Tahiti sounds good<\/a> &#8230;<\/font> while CSS styling can take front stage with today&#8217;s improvements on the recent <a title='Gimp Guillotine Follow Up Border and Multiple Image Background Tutorial' href='#ggfubmibt'>Gimp Guillotine Follow Up Border and Multiple Image Background Tutorial<\/a> adding some image filter &#8220;smarts&#8221; today, given that <a target=_blank title='GIMP tutorials here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/gimp'>GIMP<\/a> can achieve this too?<\/p>\n<p>These <a target=_blank title='CSS filter property information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_filter.asp'>CSS filters<\/a> (we use on our HTML div and img elements) are amazing, and we talked about them at some length with <a target=_blank title='CSS3 Filters Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-filters-primer-tutorial\/'>CSS3 Filters Primer Tutorial&#8217;>CSS3 Filters Primer Tutorial<\/a> some time back, as much as anything because you can achieve just great affects just with a couple of lines of CSS code.<\/p>\n<p>Up to now with our PHP based &#8220;GIMP Guillotine Follow Up&#8221; web application we&#8217;ve concentrated on either Javascript DOM or inline CSS (via an HTML element&#8217;s style property) to get things achieved with the imagery perhaps output via the GIMP Guillotine technique <font size=1>&#8230; though we never said you HAD to use GIMP Guillotine, as you are just asked for any old imagery file specification &#8230;<\/font> here.  But the fact is, serverside languages such as PHP sit a layer on top of all client (webpage) HTML and Javascript and CSS considerations, so just as we think PHP and Javascript are the best of pals, depending on how you and PHP arrange the cocktail party seating arrangements, I&#8217;ve seen many a party where PHP and CSS get schloshed together with nairy a bad word spoken <font size=1>&#8230; though have seen some sideways glances from Ajax under the kitchen sink<\/font>.<\/p>\n<p>Example CSS image filter URLs and example executions follow &#8230;<\/p>\n<ul>\n<li>Sepia &#8230; 69% &#8230; &lt;style&gt; div, img { -webkit-filter: sepia(69%); filter: sepia(69%); }  &lt;\/style&gt; <br \/>\n<a style='width:100%;word-wrap:break-word;' target=_blank title='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+%7B+-webkit-filter%3A+sepia%2869%25%29%3B+filter%3A+sepia%2869%25%29%3B+%7D+' href='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+%7B+-webkit-filter%3A+sepia%2869%25%29%3B+filter%3A+sepia%2869%25%29%3B+%7D+'>http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+%7B+-webkit-filter%3A+sepia%2869%25%29%3B+filter%3A+sepia%2869%25%29%3B+%7D+<\/a><br \/>\n<iframe style='width:100%;height:600px;' src='\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+%7B+-webkit-filter%3A+sepia%2869%25%29%3B+filter%3A+sepia%2869%25%29%3B+%7D+'><\/iframe>\n<\/li>\n<li>Grayscale &#8230; 89% &#8230; &lt;style&gt; div, img { -webkit-filter: grayscale(89%); filter: grayscale(89%); }  &lt;\/style&gt; <br \/>\n<a style='width:100%;word-wrap:break-word;' target=_blank title='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+grayscale(89%25)%3B+filter%3A+grayscale(89%25)%3B+}+' href='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+grayscale(89%25)%3B+filter%3A+grayscale(89%25)%3B+}+'>http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+grayscale(89%25)%3B+filter%3A+grayscale(89%25)%3B+}+<\/a><br \/>\n<iframe style='width:100%;height:600px;' src='\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+grayscale(89%25)%3B+filter%3A+grayscale(89%25)%3B+}+'><\/iframe>\n<\/li>\n<li>Brightness &#8230; 179% &#8230; &lt;style&gt; div, img { -webkit-filter: brightness(179%); filter: brightness(179%); }  &lt;\/style&gt; <br \/>\n<a style='width:100%;word-wrap:break-word;' target=_blank title='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+brightness(179%25)%3B+filter%3A+brightness(179%25)%3B+}+' href='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+brightness(179%25)%3B+filter%3A+brightness(179%25)%3B+}+'>http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+brightness(179%25)%3B+filter%3A+brightness(179%25)%3B+}+<\/a><br \/>\n<iframe style='width:100%;height:600px;' src='\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+brightness(179%25)%3B+filter%3A+brightness(179%25)%3B+}+'><\/iframe>\n<\/li>\n<li>Contrast &#8230; 349% &#8230; &lt;style&gt; div, img { -webkit-filter: contrast(349%); filter: contrast(349%); }  &lt;\/style&gt; <br \/>\n<a style='width:100%;word-wrap:break-word;' target=_blank title='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+contrast(349%25)%3B+filter%3A+contrast(349%25)%3B+}+' href='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+contrast(349%25)%3B+filter%3A+contrast(349%25)%3B+}+'>http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+contrast(349%25)%3B+filter%3A+contrast(349%25)%3B+}+<\/a><br \/>\n<iframe style='width:100%;height:600px;' src='\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+contrast(349%25)%3B+filter%3A+contrast(349%25)%3B+}+'><\/iframe>\n<\/li>\n<li>Saturate &#8230; 49% &#8230; &lt;style&gt; div, img { -webkit-filter: saturate(49%); filter: saturate(49%); }  &lt;\/style&gt; <br \/>\n<a style='width:100%;word-wrap:break-word;' target=_blank title='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+saturate(49%25)%3B+filter%3A+saturate(49%25)%3B+}+' href='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+saturate(49%25)%3B+filter%3A+saturate(49%25)%3B+}+'>http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+saturate(49%25)%3B+filter%3A+saturate(49%25)%3B+}+<\/a><br \/>\n<iframe style='width:100%;height:600px;' src='\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+saturate(49%25)%3B+filter%3A+saturate(49%25)%3B+}+'><\/iframe>\n<\/li>\n<li>Opacity &#8230; 39% &#8230; &lt;style&gt; div, img { -webkit-filter: opacity(39%); filter: opacity(39%); }  &lt;\/style&gt; <br \/>\n<a style='width:100%;word-wrap:break-word;' target=_blank title='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+opacity(39%25)%3B+filter%3A+opacity(39%25)%3B+}+' href='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+opacity(39%25)%3B+filter%3A+opacity(39%25)%3B+}+'>http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+opacity(39%25)%3B+filter%3A+opacity(39%25)%3B+}+<\/a><br \/>\n<iframe style='width:100%;height:600px;' src='\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+opacity(39%25)%3B+filter%3A+opacity(39%25)%3B+}+'><\/iframe>\n<\/li>\n<li>Invert &#8230; 19% &#8230; &lt;style&gt; div, img { -webkit-filter: invert(19%); filter: invert(19%); }  &lt;\/style&gt; <br \/>\n<a style='width:100%;word-wrap:break-word;' target=_blank title='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+invert(19%25)%3B+filter%3A+invert(19%25)%3B+}+' href='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+invert(19%25)%3B+filter%3A+invert(19%25)%3B+}+'>http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+invert(19%25)%3B+filter%3A+invert(19%25)%3B+}+<\/a><br \/>\n<iframe style='width:100%;height:600px;' src='\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+invert(19%25)%3B+filter%3A+invert(19%25)%3B+}+'><\/iframe>\n<\/li>\n<li>Hue Rotation &#8230; 79deg &#8230; &lt;style&gt; div, img { -webkit-filter: hue-rotation(79deg); filter: hue-rotation(79deg); }  &lt;\/style&gt; <br \/>\n<a style='width:100%;word-wrap:break-word;' target=_blank title='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+hue-rotate(79deg)%3B+filter%3A+hue-rotate(79deg)%3B+}+' href='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+hue-rotate(79deg)%3B+filter%3A+hue-rotate(79deg)%3B+}+'>http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+hue-rotate(79deg)%3B+filter%3A+hue-rotate(79deg)%3B+}+<\/a><br \/>\n<iframe style='width:100%;height:600px;' src='\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+hue-rotate(79deg)%3B+filter%3A+hue-rotate(79deg)%3B+}+'><\/iframe>\n<\/li>\n<li>Blur &#8230; 9px &#8230; &lt;style&gt; div, img { -webkit-filter: blur(9px); filter: blur(9px); }  &lt;\/style&gt; <br \/>\n<a style='width:100%;word-wrap:break-word;' target=_blank title='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+blur(9px)%3B+filter%3A+blur(9px)%3B+}+' href='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+blur(9px)%3B+filter%3A+blur(9px)%3B+}+'>http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+blur(9px)%3B+filter%3A+blur(9px)%3B+}+<\/a><br \/>\n<iframe style='width:100%;height:600px;' src='\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+blur(9px)%3B+filter%3A+blur(9px)%3B+}+'><\/iframe>\n<\/li>\n<li>Drop Shadow &#8230; 19px 19px 9px orange &#8230; &lt;style&gt; div, img { -webkit-filter: drop-shadow(19px 19px 9px orange); filter: drop-shadow(19px 19px 9px orange); }  &lt;\/style&gt; <br \/>\n<a style='width:100%;word-wrap:break-word;' target=_blank title='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+drop-shadow(19px+19px+9px+orange)%3B+filter%3A+drop-shadow(19px+19px+9px+orange)%3B+}+' href='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+drop-shadow(19px+19px+9px+orange)%3B+filter%3A+drop-shadow(19px+19px+9px+orange)%3B+}+'>http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+drop-shadow(19px+19px+9px+orange)%3B+filter%3A+drop-shadow(19px+19px+9px+orange)%3B+}+<\/a><br \/>\n<iframe style='width:100%;height:600px;' src='\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;style=+div%2C+img+{+-webkit-filter%3A+drop-shadow(19px+19px+9px+orange)%3B+filter%3A+drop-shadow(19px+19px+9px+orange)%3B+}+'><\/iframe>\n<\/li>\n<\/ul>\n<p>Yet again we hope you can see more of what we mean by trying out the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php\" title=\"Click picture\">live run<\/a>&#8216;s PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php--------GETME\" title=\"gimp_guillotine_followup.php\">gimp_guillotine_followup.php<\/a> today changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php--------GETME\" title=\"gimp_guillotine_followup.php\">this way<\/a>.<\/p>\n<hr>\n<p id='ggfubmibt'>Previous relevant <a target=_blank title='Gimp Guillotine Follow Up Border and Multiple Image Background Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-follow-up-border-and-multiple-image-background-tutorial\/'>Gimp Guillotine Follow Up Border and Multiple Image Background Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Gimp Guillotine Follow Up Border and Multiple Image Background Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine_bvsb.jpg\" title=\"Gimp Guillotine Follow Up Border and Multiple Image Background Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Gimp Guillotine Follow Up Border and Multiple Image Background Tutorial<\/p><\/div>\n<p>Developing on the work of the previous <a title='Gimp Guillotine Follow Up CSS keyframes Transition Tutorial' href='#ggfucsstt'>Gimp Guillotine Follow Up CSS keyframes Transition Tutorial<\/a> today we add to the functionalities with &#8230;<\/p>\n<ul>\n<li><a target=_blank title='CSS multiple background image information from w3schools' href='https:\/\/www.w3schools.com\/css\/css3_backgrounds.asp'>multiple background image<\/a> div element display (via background-image: url([dataURIimage]) \/\/ the Javascript DOM equivalent, that is) &#8230; and &#8230;<\/li>\n<li>random animated <a target=_blank title='CSS border image information from w3schools' href='https:\/\/www.w3schools.com\/css\/css3_borders.asp'>border<\/a> image to div element display (via border-image-source: url([dataURIimage]) \/\/ the Javascript DOM equivalent, that is)<\/l>\n<\/ul>\n<p> &#8230; still calling on our data URL ways, so keeping it &#8220;mobile&#8221; <strike>man<\/strike>person and (email attachment) &#8220;transportable&#8221; <strike>M.A.N.<\/strike>good buddy <font size=1>&#8230; roger that<\/font>.<\/p>\n<p>No multiple image borders?  Yes, our research here plucked out this small disappointment, so we found the next best thing to do (with the multiple images available) was to at least randomly animate these border images via Javascript setTimeout timer calls.<\/p>\n<p>With the &#8220;multiple background image div element display&#8221; you also need to attend to &#8230;<\/p>\n<ul>\n<li>background-repeat: no-repeat;  \/\/ the Javascript DOM equivalent, that is<\/li>\n<li>background-position: [leftOffset]px [topOffset]px; \/\/ the Javascript DOM equivalent, that is<\/li>\n<\/ul>\n<p> &#8230; to not have the background images bunch themselves up in a muddled way.<\/p>\n<p>To vary the &#8220;random animated border image to div element display&#8221; you can optionally attend to &#8230;<\/p>\n<ul>\n<li>border-image-width: [width]px;  \/\/ the Javascript DOM equivalent, that is<\/li>\n<li>border-image-slice: [slice]px; \/\/ the Javascript DOM equivalent, that is<\/li>\n<\/ul>\n<p> &#8230; that you can see in action code-wise with Javascript &#8230;<\/p>\n<p><code><br \/>\n    var xob=null,xbvsb='';<br \/>\n    function zworkit() {<br \/>\n      xworkit(xob,xbvsb);<br \/>\n    }<br \/>\n    function xworkit(ob,bvsb) {<br \/>\n      var bretval='', cretval='', dretval='', bcomma='', bchoice=Math.floor(Math.random() * 200), bslice=Math.floor(Math.random() * 100);<br \/>\n      var mr=Math.floor(Math.random() * xparlist.length);<br \/>\n      for (ixparlist=0; ixparlist&lt;xparlist.length; ixparlist++) {<br \/>\n      if (bvsb == 'border') {<br \/>\n      if (ixparlist == mr) {<br \/>\n      ob.style.borderImageWidth='' + bchoice + 'px';<br \/>\n      ob.style.borderImageSlice='' + bslice + 'px';<br \/>\n      ob.style.borderRepeat='repeat';<br \/>\n      bretval+=bcomma + \" url('\" + document.getElementById(xparlist[ixparlist]).src + \"')\";<br \/>\n      if (xob != null) {<br \/>\n      ob.style.borderImageSource=\" url('\" + document.getElementById(xparlist[ixparlist]).src + \"')\";<br \/>\n      }<br \/>\n      xob=ob;<br \/>\n      xbvsb=bvsb;<br \/>\n      setTimeout(zworkit, 4000);<br \/>\n      }<br \/>\n      } else {<br \/>\n      cretval+=bcomma + ' no-repeat';<br \/>\n      dretval+=bcomma + ' ' + eval(-20 + eval('' + document.getElementById('lefttop').value.split(',')[eval(ixparlist * 2)])) + 'px ' + eval(-20 + eval('' + document.getElementById('lefttop').value.split(',')[eval(ixparlist * 2 + 1)])) + 'px';<br \/>\n      bretval+=bcomma + \" url('\" + document.getElementById(xparlist[ixparlist]).src + \"')\";<br \/>\n      bcomma=',';<br \/>\n      }<br \/>\n      }<br \/>\n      if (cretval != '') {<br \/>\n      ob.style.backgroundRepeat=cretval;<br \/>\n      ob.style.backgroundPosition=dretval;<br \/>\n      }<br \/>\n      return bretval;<br \/>\n    }<br \/>\n<\/code> <\/p>\n<p>We hope you can see more of what we mean by trying out the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php\" title=\"Click picture\">live run<\/a>&#8216;s PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php-------GETME\" title=\"gimp_guillotine_followup.php\">gimp_guillotine_followup.php<\/a> today changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php-------GETME\" title=\"gimp_guillotine_followup.php\">this way<\/a>.<\/p>\n<hr>\n<p id='ggfucsstt'>Previous relevant <a target=_blank title='Gimp Guillotine Follow Up CSS keyframes Transition Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-follow-up-css-keyframes-transition-tutorial\/'>Gimp Guillotine Follow Up CSS keyframes Transition Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Gimp Guillotine Follow Up CSS keyframes Transition Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine_keyframes.jpg\" title=\"Gimp Guillotine Follow Up CSS keyframes Transition Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Gimp Guillotine Follow Up CSS keyframes Transition Tutorial<\/p><\/div>\n<p>A while back we presented a series of web application ideas that do away with Javascript (ie. only needing HTML and CSS) to perform some functionality of interest.   In that series we finished up with <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/missing-javascript-audio-on-unmute-tutorial\/' title='Missing Javascript Audio on Unmute Tutorial'>Missing Javascript Audio on Unmute Tutorial<\/a> where through this series we touched on &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/missing-javascript-audio-on-unmute-tutorial\/'>\n<ul>\n<li>CSS3 <a target=_blank title='CSS3 @keyframes rule information' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_animation-keyframes.asp'>@keyframes<\/a> rules we first talked about at <a target=_blank title='CSS3 @keyframes Rule Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-keyframes-rule-primer-tutorial\/'>CSS3 @keyframes Rule Primer Tutorial<\/a> that assist with animations that we can make work via &#8230;<\/li>\n<li>CSS3  <a target=_blank title='CSS3 transitions rule information' href='https:\/\/www.w3schools.com\/css\/css3_transitions.asp'>transitions<\/a> for scheduled functionality (we&#8217;d have used Javascript <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> (and <a target=_blank title='Javascript setInterval method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_setinterval.asp'><i>setInterval<\/i><\/a>) methods to cover the same &#8220;territory&#8221;) we first talked about at <a target=_blank title='CSS3 Transition Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-transition-primer-tutorial '>CSS3 Transition Primer Tutorial<\/a> &#8230; specified with CSS Criteria involving &#8230;<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; and these feature today with our functionality extensions to yesterday&#8217;s <a title='Gimp Guillotine Follow Up PDF Slideshow and Video Tutorial' href='#ggfupdfsvt'>Gimp Guillotine Follow Up PDF Slideshow and Video Tutorial<\/a> where, again, we have a &#8216;piece of code modelled on a big long &#8220;template&#8221; piece of HTML that we make substitutions into to create the functionality&#8217;.<\/p>\n<p>We found that this was all fine and good to create an overall animation &#8220;blob&#8221; of webpage activity, but what was in that &#8220;template&#8221; didn&#8217;t help reflect <a target=_blank title='GIMP' href='http:\/\/gimp.org'>GIMP<\/a> Guillotine left and top &#8220;offsets&#8221; within that animation.  To do this with our HTML div element, this, along with the change of background content, made us introduce some Javascript DOM changes where &#8230;<\/p>\n<ul>\n<li>[divObject].style.<a target=_blank title='Javascript DOM backgroundImage property' href='https:\/\/www.w3schools.com\/jsref\/prop_style_backgroundimage.asp'>backgroundImage<\/a>=&#8221;url(&#8216;&#8221; + dataURIofImageVar + &#8220;&#8216;)&#8221;;<\/li>\n<li>[divObject].style.<a target=_blank title='Javascript DOM backgroundPosition property' href='https:\/\/www.w3schools.com\/jsref\/prop_style_backgroundposition.asp'>backgroundPosition<\/a>=&#8217; &#8216; + parent.document.getElementById(&#8216;lefttop&#8217;).value.split(&#8216;,&#8217;)[eval(iparlist * 2)] + &#8216;px &#8216; + parent.document.getElementById(&#8216;lefttop&#8217;).value.split(&#8216;,&#8217;)[eval(iparlist * 2 + 1)] + &#8216;px&#8217;;<\/li>\n<\/ul>\n<p> &#8230; as in the Javascript function controlled by setTimeout timer calls (to help animate) &#8230;<\/p>\n<p><code><br \/>\n    var parlist=['mondrian-1504681_640-0-0png','mondrian-1504681_640-1-0png','mondrian-1504681_640-2-0png','mondrian-1504681_640-2-1png','mondrian-1504681_640-2-2png'];<br \/>\n    var divo=null;<br \/>\n    var iparlist=0;<br \/>\n    function workit() {<br \/>\n      if (divo == null) {<br \/>\n        divo=document.getElementsByTagName('div')[0];<br \/>\n      }<br \/>\n      if (iparlist &gt;= parlist.length) iparlist=0;<br \/>\n      divo.style.backgroundRepeat='no-repeat';<br \/>\n      divo.style.backgroundPosition=' ' + parent.document.getElementById('lefttop').value.split(',')[eval(iparlist * 2)] + 'px ' + parent.document.getElementById('lefttop').value.split(',')[eval(iparlist * 2 + 1)] + 'px';<br \/>\n      divo.style.backgroundImage=\"url('\" + parent.document.getElementById(parlist[iparlist]).src + \"')\";<br \/>\n      iparlist++;<br \/>\n      setTimeout(workit, 6000);<br \/>\n    }<br \/>\n    setTimeout(workit, 500);<br \/>\n<\/code><\/p>\n<p> &#8230; the act of which starts the video below (if not playing <a target=_blank title='Click here' href='http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine_keyframes.mov'>click here<\/a> for alternate playing method) &#8230;<\/p>\n<p><video style='width:100%;height:500px;' controls><source type='video\/mp4' src='http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine_keyframes.mov'><\/source><\/video><\/p>\n<p>Let&#8217;s catch up with some more URLs showing (and sharing) some recent scenarios below &#8230;<\/p>\n<table style='width:100%;'>\n<tr>\n<td>Send email to rmetcalfe15@gmail.com of the 5 Piet Mondrian image jigsaw pieces shown with an Inhouse Slideshow as the downloadable attachment HTML of that email &#8230;<br \/>\n<a target=_blank title='https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*%23rmetcalfe15%40gmail.com%2B&#038;include=&#038;inhouseslideshow=Process+with+Inhouse+Slideshow#inhouseslideshowd' href='https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*%23rmetcalfe15%40gmail.com%2B&#038;include=&#038;inhouseslideshow=Process+with+Inhouse+Slideshow#inhouseslideshowd' style='word-wrap:break-word;'>https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*%23rmetcalfe15%40gmail.com%2B&#038;include=&#038;inhouseslideshow=Process+with+Inhouse+Slideshow#inhouseslideshowd<\/a>\n<\/td>\n<\/tr>\n<tr>\n<td>Send email to rmetcalfe15@gmail.com of the 5 Piet Mondrian image jigsaw pieces shown with an CSS keyframes Transition Animation as the downloadable attachment HTML of that email &#8230;<br \/>\n<a target=_blank title='https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*%23rmetcalfe15%40gmail.com%2B&#038;include=&#038;transition=Process+with+keyframe+Transition+CSS+Animation' href='https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*%23rmetcalfe15%40gmail.com%2B&#038;include=&#038;transition=Process+with+keyframe+Transition+CSS+Animation' style='word-wrap:break-word;'>https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*%23rmetcalfe15%40gmail.com%2B&#038;include=&#038;transition=Process+with+keyframe+Transition+CSS+Animation<\/a>\n<\/td>\n<\/tr>\n<tr>\n<td>Show with an Inhouse Slideshow &#8230;<br \/>\n<a target=_blank title='https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;inhouseslideshow=Process+with+Inhouse+Slideshow#inhouseslideshowd' href='https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;inhouseslideshow=Process+with+Inhouse+Slideshow#inhouseslideshowd' style='word-wrap:break-word;'>https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;inhouseslideshow=Process+with+Inhouse+Slideshow#inhouseslideshowd<\/a>\n<\/td>\n<\/tr>\n<tr>\n<td>Show with CSS keyframes Transition Animation &#8230;<br \/>\n<a target=_blank title='https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;transition=Process+with+keyframe+Transition+CSS+Animation' href='https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;transition=Process+with+keyframe+Transition+CSS+Animation' style='word-wrap:break-word;'>https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;transition=Process+with+keyframe+Transition+CSS+Animation<\/a><br \/>\n<!--iframe style='width:100%;height:900px;' title='https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&include=&transition=Process+with+keyframe+Transition+CSS+Animation' src='\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&include=&transition=Process+with+keyframe+Transition+CSS+Animation' style='word-wrap:break-word;'><\/iframe--->\n<\/td>\n<\/tr>\n<\/table>\n<p>Hopefully you can see more of what we mean at a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php\" title=\"Click picture\">live run<\/a>&#8216;s PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php------GETME\" title=\"gimp_guillotine_followup.php\">gimp_guillotine_followup.php<\/a> today changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php------GETME\" title=\"gimp_guillotine_followup.php\">this way<\/a>.<\/p>\n<hr>\n<p id='ggfupdfsvt'>Previous relevant <a target=_blank title='Gimp Guillotine Follow Up PDF Slideshow and Video Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-follow-up-css-keyframes-transition-tutorial\/'>Gimp Guillotine Follow Up CSS keyframes Transition Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Gimp Guillotine Follow Up PDF Slideshow and Video Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine_video.jpg\" title=\"Gimp Guillotine Follow Up PDF Slideshow and Video Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Gimp Guillotine Follow Up PDF Slideshow and Video Tutorial<\/p><\/div>\n<p>As the blog posting title intimates, adding onto yesterday&#8217;s <a title='Gimp Guillotine Follow Up Javascript DOM Animation Tutorial' href='#ggfujdomat'>Gimp Guillotine Follow Up Javascript DOM Animation Tutorial<\/a>, today&#8217;s work looks at functionality to help create &#8230;<\/p>\n<ul>\n<li>PDF slideshow<\/li>\n<li>Inhouse style slideshow<\/li>\n<li>Video<\/li>\n<\/ul>\n<p> &#8230; and the top and bottom of these depend on, respectively, the amazing, the stupendous &#8230;<\/p>\n<ul>\n<li>convert (by <a target=_blank title='ImageMagick' href='http:\/\/www.imagemagick.org'>ImageMagick<\/a>)<\/li>\n<li><a target=_blank title='ffmpeg' href='https:\/\/www.ffmpeg.org\/'>ffmpeg<\/a><\/li>\n<\/ul>\n<p> &#8230; that are looked for on the operating system (or web server) you are running the Gimp Guillotine Follow Up web application from, and if found offer HTML input type=submit methods of submitting the image file specification form.<\/p>\n<p>We&#8217;ve talked about the fade in, fade out style of ffmpeg video before when we presented <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/firefox-inspector-debugging-via-network-tab-primer-tutorial\/' title='Firefox Inspector Debugging via Network Tab Primer Tutorial'>Firefox Inspector Debugging via Network Tab Primer Tutorial<\/a> but today with variability within image sizes we found the <em>additional switches<\/em> like in the command below, necessary &#8230;<\/p>\n<p><code><br \/>\nffmpeg -loop 1 -t 5 -i \/Applications\/MAMP\/htdocs\/mondrian-1504681_640-0-0.png -loop 1 -t 5 -i \/Applications\/MAMP\/htdocs\/mondrian-1504681_640-1-0.png -loop 1 -t 5 -i \/Applications\/MAMP\/htdocs\/mondrian-1504681_640-2-0.png -loop 1 -t 5 -i \/Applications\/MAMP\/htdocs\/mondrian-1504681_640-2-1.png -loop 1 -t 5 -i \/Applications\/MAMP\/htdocs\/mondrian-1504681_640-2-2.png -filter_complex \"[0:v]<em>scale=1280:720:force_original_aspect_ratio=decrease,pad=1280:720:(ow-iw)\/2:(oh-ih)\/2,setsar=1,<\/em>fade=t=out:st=4:d=1[v0]; [1:v]<em>scale=1280:720:force_original_aspect_ratio=decrease,pad=1280:720:(ow-iw)\/2:(oh-ih)\/2,setsar=1,<\/em>fade=t=in:st=0:d=1,fade=t=out:st=4:d=1[v1]; [2:v]<em>scale=1280:720:force_original_aspect_ratio=decrease,pad=1280:720:(ow-iw)\/2:(oh-ih)\/2,setsar=1,<\/em>fade=t=in:st=0:d=1,fade=t=out:st=4:d=1[v2]; [3:v]<em>scale=1280:720:force_original_aspect_ratio=decrease,pad=1280:720:(ow-iw)\/2:(oh-ih)\/2,setsar=1,<\/em>fade=t=in:st=0:d=1,fade=t=out:st=4:d=1[v3]; [4:v]<em>scale=1280:720:force_original_aspect_ratio=decrease,pad=1280:720:(ow-iw)\/2:(oh-ih)\/2,setsar=1,<\/em>fade=t=in:st=0:d=1,fade=t=out:st=4:d=1[v4]; [v0][v1][v2][v3][v4]concat=n=5:v=1:a=0,format=yuv420p[v]\" -map \"[v]\" \/Applications\/MAMP\/htdocs\/gimp_guillotine.mp4<\/code><br \/>\n<\/code><\/p>\n<p> &#8230; resulting in (if not playing <a target=_blank title='Click here' href='http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine.mp4'>click here<\/a> for alternate playing method) &#8230;<\/p>\n<p><video style='width:100%;height:500px;' controls><source type='video\/mp4' src='http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine.mp4'><\/source><\/video><\/p>\n<p>The PDF slideshow creation is a doddle for ImageMagick, an example of a command line (via PHP <a target=_blank title='PHP exec() method information' href='http:\/\/php.net\/manual\/en\/function.exec.php'><i>exec<\/i><\/a>) command being &#8230;<\/p>\n<p><code><br \/>\nconvert \/Applications\/MAMP\/htdocs\/mondrian-1504681_640-0-0.png \/Applications\/MAMP\/htdocs\/mondrian-1504681_640-1-0.png \/Applications\/MAMP\/htdocs\/mondrian-1504681_640-2-0.png \/Applications\/MAMP\/htdocs\/mondrian-1504681_640-2-1.png \/Applications\/MAMP\/htdocs\/mondrian-1504681_640-2-2.png \/Applications\/MAMP\/htdocs\/gimp_guillotine.pdf<br \/>\n<\/code><\/p>\n<p> &#8230; resulting in (if not showing <a target=_blank title='Click here' href='http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine.pdf'>click here<\/a> for alternate method) &#8230;<\/p>\n<p><iframe style='width:100%;height:500px;' src='http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine.pdf'><\/iframe><\/p>\n<p>And our Internal Slideshow is a piece of code modelled on a big long &#8220;template&#8221; piece of HTML that we make substitutions into to create the functionality (so click relevant button to make this happen) &#8230;<\/p>\n<p><iframe style='width:100%;height:500px;' src='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*'><\/iframe><\/p>\n<p>Again, we hope you can see more of what we mean at a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php\" title=\"Click picture\">live run<\/a>&#8216;s PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php-----GETME\" title=\"gimp_guillotine_followup.php\">gimp_guillotine_followup.php<\/a> today changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php-----GETME\" title=\"gimp_guillotine_followup.php\">this way<\/a>.<\/p>\n<hr>\n<p id='ggfujdomat'>Previous relevant <a target=_blank title='Gimp Guillotine Follow Up Javascript DOM Animation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-follow-up-javascript-dom-animation-tutorial\/'>Gimp Guillotine Follow Up Javascript DOM Animation Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Gimp Guillotine Follow Up Javascript DOM Animation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine_javascript_animation.jpg\" title=\"Gimp Guillotine Follow Up Javascript DOM Animation Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Gimp Guillotine Follow Up Javascript DOM Animation Tutorial<\/p><\/div>\n<p>Adding to yesterday&#8217;s <a title='Gimp Guillotine Follow Up Email Attachment Tutorial' href='#ggfueat'>Gimp Guillotine Follow Up Email Attachment Tutorial<\/a> we now want to add an &#8220;onions of the 4th dimension&#8221; layer on top &#8220;feel&#8221; to all this, by starting to think about animation functionality.   We&#8217;re going to start out quite simply, and the simplest animation approach we can think of is &#8230;<\/p>\n<ul>\n<li>have access to a bunch of image data URIs &#8230; check &#8230;<\/li>\n<li>either &#8230;\n<ol>\n<li>progressively show &#8230; or &#8230;<\/li>\n<li>one at a time show<\/li>\n<\/ol>\n<p> &#8230; this imagery at a point of time as a (pseudo Javascript) &#8230;<br \/>\n<code><br \/>\n document.body.backgroundImage=\"URL('\" + thatDataURIVar + \"')\"<br \/>\n<\/code><br \/>\n &#8230; idea the timing of which can be controlled by the Javascript setTimeout timer method\n <\/li>\n<\/ul>\n<p>As you can imagine &#8220;one at a time&#8221; is a relative doddle, but &#8220;progressively show&#8221; is not quite such a doddle.  But it is an uncle&#8217;s doddle if ahead of time you had &#8230;<\/p>\n<ol>\n<li>set up an array and an index var<font size=1>iable<\/font> pointing to a <em>relevant index<\/em> into it &#8230;<br \/>\n<code><br \/>\nvar canvascset=[];<br \/>\n<em>var icanvascset=0;<\/em><br \/>\nvar elem=document.getElementById('mycanvas');<br \/>\nvar context=elem.getContext('2d');<br \/>\n<\/code>\n<\/li>\n<li>wherever in the code as it was, you had used the [canvasContext].drawImage you canvascset.push([thatCommand]) adding onto that array <em>as per<\/em> &#8230;<br \/>\n<code><br \/>\n<em>canvascset.push(\"context.drawImage(ourdocumentgetElementById('img\" + eval(-1 + myimagec.split(',' + pfix + '-' + icol + '-' + irow + ext)[0].split(',').length) + \"'), \" + left + \",\" + top + \");\");<\/em><br \/>\ncontext.drawImage(ourdocumentgetElementById('img' + eval(-1 + myimagec.split(',' + pfix + '-' + icol + '-' + irow + ext)[0].split(',').length)), left, top);<br \/>\n<\/code>\n<\/li>\n<li>then set up some &#8220;a&#8221; links using the Javascript function featuring setTimeout timing functionality, and good ol&#8217; eval as per &#8230;<br \/>\n<code><br \/>\n  function canvasanimation() {<br \/>\n    if (canvascset.length &gt; 0 && icanvascset &gt;= 0) {<br \/>\n      if (icanvascset &lt;= 0) {<br \/>\n        icanvascset=0;<br \/>\n        context.clearRect(0, 0, elem.width, elem.height);<br \/>\n        eval(canvascset[0]);<br \/>\n        document.body.style.backgroundImage=\\\"url('\\\" + elem.toDataURL() + \\\"')\\\";<br \/>\n        icanvascset++;<br \/>\n        if (clearalot) {<br \/>\n        setTimeout(canvasanimation, 600);<br \/>\n        } else {<br \/>\n        setTimeout(canvasanimation, 3000);<br \/>\n        }<br \/>\n      } else if (icanvascset &gt; canvascset.length) {<br \/>\n        icanvascset=0;<br \/>\n        if (clearalot) {<br \/>\n        setTimeout(canvasanimation, 1200);<br \/>\n        } else {<br \/>\n        setTimeout(canvasanimation, 6000);<br \/>\n        }<br \/>\n      } else {<br \/>\n        if (clearalot) context.clearRect(0, 0, elem.width, elem.height);<br \/>\n        eval(canvascset[icanvascset]);<br \/>\n        document.body.style.backgroundImage=\\\"url('\\\" + elem.toDataURL() + \\\"')\\\";<br \/>\n        icanvascset++;<br \/>\n        if (clearalot) {<br \/>\n        setTimeout(canvasanimation, 600);<br \/>\n        } else {<br \/>\n        setTimeout(canvasanimation, 3000);<br \/>\n        }<br \/>\n      }<br \/>\n    } else if (canvascset.length &gt; 0) {<br \/>\n      icanvascset=0;<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; noting how the animations can be stopped by setting that indexing var<font size=>iable<\/font> negative (at other functionality events)\n<\/li>\n<\/ol>\n<p>The joy of this Javascript DOM animation approach is that the creation of any new media is avoided, hence our assertion that this is perhaps the easiest animation idea we can think of.   More to come, though.<\/p>\n<hr>\n<p id='ggfueat'>Previous relevant <a target=_blank title='Gimp Guillotine Follow Up Email Attachment Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-follow-up-email-attachment-tutorial\/'>Gimp Guillotine Follow Up Email Attachment Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Gimp Guillotine Follow Up Email Attachment Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine_subset_and_live.jpg\" title=\"Gimp Guillotine Follow Up Email Attachment Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Gimp Guillotine Follow Up Email Attachment Tutorial<\/p><\/div>\n<p>We&#8217;ve got some good news for followers of the latest thread of blog postings following up on Gimp Guillotine usage thoughts as exemplified by yesterday&#8217;s <a title='Gimp Guillotine Follow Up Table and Image Map Tutorial' href='#ggfutimt'>Gimp Guillotine Follow Up Table and Image Map Tutorial<\/a> efforts.  Up to today, the &#8220;accountability&#8221; score was not so great without a live run opportunity to show you what we mean.   But today we&#8217;ve decided to open up all but the &#8220;<a target=_blank title='GIMP' href='http:\/\/gimp.org'>GIMP<\/a> Listening&#8221; aspects of this web application live to the rjmprogramming.com.au domain.  Why the change of heart?  Well, now it&#8217;s worth it, with the sharing email dual options &#8230;<\/p>\n<ul>\n<li>email a canvas element based overall image view as an email attachment &#8230; as well as, now, by appending a &#8220;+&#8221; to your email declaration &#8230;<\/li>\n<li>email all that you are seeing on the screen at the time as an email attachment<\/li>\n<\/ul>\n<p> &#8230; because, now, we believe we have a useful enough &#8220;tool&#8221; for collaboration purposes, not that we are saying it is no longer a &#8220;use this PHP with a local web server like <a target=_blank title='PHP and MySql via MAMP Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=933'>MAMP<\/a>&#8221; proposition as well.  It is, but you can learn a bit in advance trying out what you&#8217;ve been seeing us talk about here over the last few days, because we&#8217;ve also uploaded to the rjmprogramming.com.au domain those <a target=_blank title='Piet Mondrian' href='https:\/\/en.wikipedia.org\/wiki\/Piet_Mondrian'>Piet Mondrian<\/a> inspired image jigsaw parts which Pixabay <a target=_blank title='Pixabay Mondrian image link, thanks' href='https:\/\/pixabay.com\/en\/mondrian-red-blue-yellow-1504681\/'>webpage<\/a>, thanks, helped us create via GIMP&#8217;s &#8220;Image -&gt; Transform -&gt; Guillotine&#8221; functionality quite a few days ago now.<\/p>\n<p>The other issue which makes all this feasible is the involvement of PHP (though perhaps HTML and Javascript and Ajax might swing it too) being able to express the web application&#8217;s image (img elements) totally as data URIs, and so be totally mobile and transportable to email with HTML email attachments, which continue their functionality, being as they don&#8217;t require the http nor https protocol absolute URL need.<\/p>\n<p>Another aspect that might have been gnawing away at the patience of people following this blog posting thread was the dumbness of the HTML textarea element we&#8217;d presented as a displayer of image jigsaw filename information.  To us, to make this part of the web application much more useful was to turn the HTML textarea element into an HTML select (dropdown) &#8220;<a target=_blank title='CSS select multiple attrribute information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_select_multiple.asp'>multiple<\/a>&#8221; mode element which allows the user to work with the &#8220;display subset&#8221; of the whole set (though behind the scenes they are all there courtesy of the CSS usage of <em><a target=_blank title='CSS visibility property information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_class_visibility.asp'>visibility<\/a>:hidden;<\/em> (leaving in whitespace) rather than <i>display:none;<\/i> (scrunching up whitespace) styling which you can read more about at <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css-style-display-and-visibility-tall-poppies-tutorial\/' title='CSS Style Display and Visibility Tall Poppies Tutorial'>CSS Style Display and Visibility Tall Poppies Tutorial<\/a>) as well.<\/p>\n<p>This all means we can show you some URLs showing (and sharing) some of these scenarios below too, which we will now, rather than later <font size=1>&#8230; know you&#8217;re in a hurry &#8230;<\/font><\/p>\n<table style='width:100%;'>\n<tr>\n<td>Send email to rmetcalfe15@gmail.com of the 5 Piet Mondrian image jigsaw pieces shown with a canvas based background image all as the downloadable attachment HTML of that email &#8230;<br \/>\n<a target=_blank title='https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*%23rmetcalfe15%40gmail.com%2B&#038;include=&#038;canvasnorepeat=Process+with+Canvas+Background+Image+No+Repeat' href='https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*%23rmetcalfe15%40gmail.com%2B&#038;include=&#038;canvasnorepeat=Process+with+Canvas+Background+Image+No+Repeat' style='word-wrap:break-word;'>https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*%23rmetcalfe15%40gmail.com%2B&#038;include=&#038;canvasnorepeat=Process+with+Canvas+Background+Image+No+Repeat<\/a>\n<\/td>\n<\/tr>\n<tr>\n<td>Send email to rmetcalfe15@gmail.com of the first and second and fourth of the 5 Piet Mondrian image jigsaw pieces shown with a div margin based background image all as the downloadable attachment HTML of that email &#8230;<br \/>\n<a target=_blank title='https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*%23rmetcalfe15%40gmail.com%2B&#038;include=.%2Fmondrian-1504681_640-0-0.png%2C.%2Fmondrian-1504681_640-1-0.png%2C.%2Fmondrian-1504681_640-2-1.png&#038;divmarginuse=Process+with+Top+Div+Margin+Use' href='https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*%23rmetcalfe15%40gmail.com%2B&#038;include=.%2Fmondrian-1504681_640-0-0.png%2C.%2Fmondrian-1504681_640-1-0.png%2C.%2Fmondrian-1504681_640-2-1.png&#038;divmarginuse=Process+with+Top+Div+Margin+Use' style='word-wrap:break-word;'>https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*%23rmetcalfe15%40gmail.com%2B&#038;include=.%2Fmondrian-1504681_640-0-0.png%2C.%2Fmondrian-1504681_640-1-0.png%2C.%2Fmondrian-1504681_640-2-1.png&#038;divmarginuse=Process+with+Top+Div+Margin+Use<\/a>\n<\/td>\n<\/tr>\n<tr>\n<td>Show with a canvas based background image &#8230;<br \/>\n<a target=_blank title='https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;canvasnorepeat=Process+with+Canvas+Background+Image+No+Repeat' href='https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;canvasnorepeat=Process+with+Canvas+Background+Image+No+Repeat' style='word-wrap:break-word;'>https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=&#038;canvasnorepeat=Process+with+Canvas+Background+Image+No+Repeat<\/a>\n<\/td>\n<\/tr>\n<tr>\n<td>Show with the first and second and fourth of the 5 Piet Mondrian image jigsaw pieces shown with a div margin based background image, and below that as an iframe view &#8230;<br \/>\n<a target=_blank title='https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=.%2Fmondrian-1504681_640-0-0.png%2C.%2Fmondrian-1504681_640-1-0.png%2C.%2Fmondrian-1504681_640-2-1.png&#038;divmarginuse=Process+with+Top+Div+Margin+Use' href='https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=.%2Fmondrian-1504681_640-0-0.png%2C.%2Fmondrian-1504681_640-1-0.png%2C.%2Fmondrian-1504681_640-2-1.png&#038;divmarginuse=Process+with+Top+Div+Margin+Use' style='word-wrap:break-word;'>https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=.%2Fmondrian-1504681_640-0-0.png%2C.%2Fmondrian-1504681_640-1-0.png%2C.%2Fmondrian-1504681_640-2-1.png&#038;divmarginuse=Process+with+Top+Div+Margin+Use<\/a><br \/>\n<iframe style='width:100%;height:900px;' title='https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=.%2Fmondrian-1504681_640-0-0.png%2C.%2Fmondrian-1504681_640-1-0.png%2C.%2Fmondrian-1504681_640-2-1.png&#038;divmarginuse=Process+with+Top+Div+Margin+Use' src='\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php?filespec=.%2Fmondrian-1504681_640-*-*.*g*&#038;include=.%2Fmondrian-1504681_640-0-0.png%2C.%2Fmondrian-1504681_640-1-0.png%2C.%2Fmondrian-1504681_640-2-1.png&#038;divmarginuse=Process+with+Top+Div+Margin+Use' style='word-wrap:break-word;'><\/iframe>\n<\/td>\n<\/tr>\n<\/table>\n<p>We hope you can see more of what we mean at a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php\" title=\"Click picture\">live run<\/a>&#8216;s PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php----GETME\" title=\"gimp_guillotine_followup.php\">gimp_guillotine_followup.php<\/a> today changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php----GETME\" title=\"gimp_guillotine_followup.php\">this way<\/a>.<\/p>\n<hr>\n<p id='ggfutimt'>Previous relevant <a target=_blank title='Gimp Guillotine Follow Up Table and Image Map Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-follow-up-table-and-image-map-tutorial\/'>Gimp Guillotine Follow Up Table and Image Map Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine_others.jpg\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Gimp Guillotine Follow Up Table and Image Map Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine_others.jpg\" title=\"Gimp Guillotine Follow Up Table and Image Map Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Gimp Guillotine Follow Up Table and Image Map Tutorial<\/p><\/div>\n<p>The recent <a title='Gimp Guillotine Follow Up Canvas Tutorial' href='#ggfuct'>Gimp Guillotine Follow Up Canvas Tutorial<\/a> had us with &#8220;jigsaw pieced together&#8221; image representations for &#8230;<\/p>\n<ul>\n<li>Div Margin<\/li>\n<li>Canvas<\/li>\n<\/ul>\n<p> &#8230; and today we add to that &#8230;<\/p>\n<ul>\n<li>Table<\/li>\n<li>Image Map<\/li>\n<\/ul>\n<p> &#8230; inspired by existant <a target=_blank title='GIMP' href='http:\/\/gimp.org'>GIMP<\/a> functionalities, respectively &#8230;<\/p>\n<ul>\n<li>Filters -&gt; Web -&gt; Slice&#8230;<\/li>\n<li>Filters -&gt; Web -&gt; Image Map&#8230;<\/li>\n<\/ul>\n<p>We service these new functionalities by new &#8220;a&#8221; link hashtags.  We also add to the viewing adaptability by encasing all these display options within the (introduced with HTML5) <a target=_blank title='HTML details tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp'>details<\/a> tag and its nested <a target=_blank title='HTML summary tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp'>summary<\/a> tag &#8220;<a target=_blank title='Reveal blog postings here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal'>reveal<\/a>ers&#8221;.  These great HTML elements can help clarify situations where there are many choices but the user is in all likelihood wanting to focus on just one at a time.  These details\/summary tags are initially set &#8220;closed&#8221; for lack of clutter but as a user clicks on an associated &#8220;a&#8221; link hashtag they are &#8220;opened&#8221; on the fly via (the (pseudo) Javascript) &#8230;<\/p>\n<p><code><br \/>\ndocument.getElementById([detailTagObjectID]).open=true;<br \/>\n<\/code><\/p>\n<p>So see how we got to the new PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php---GETME\" title=\"gimp_guillotine_followup.php\">gimp_guillotine_followup.php<\/a> today changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php---GETME\" title=\"gimp_guillotine_followup.php\">this way<\/a> and, again, it is more than likely you will use this PHP with a local web server like <a target=_blank title='PHP and MySql via MAMP Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=933'>MAMP<\/a>.<\/p>\n<hr>\n<p id='ggfuct'>Previous relevant <a target=_blank title='Gimp Guillotine Follow Up Canvas Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-follow-up-canvas-tutorial\/'>Gimp Guillotine Follow Up Canvas Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine_canvas.jpg\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Gimp Guillotine Follow Up Canvas Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine_canvas.jpg\" title=\"Gimp Guillotine Follow Up Canvas Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Gimp Guillotine Follow Up Canvas Tutorial<\/p><\/div>\n<p>The second of the non-primer tutorial themes to improve and build on yesterday&#8217;s  <a title='Gimp Guillotine Follow Up Div Margin Tutorial' href='#ggfudmt'>Gimp Guillotine Follow Up Div Margin Tutorial<\/a> &#8230;<\/p>\n<p><code><br \/>\nHTML div element housing HTML img elements (no position: absolute <font>like we like so much for overlay work<\/font>) using style property <em>margin-left<\/em> and HTML br (line break) element (which sometimes requires negative <em>margin-top<\/em> tweaking)<br \/>\n<\/code><\/p>\n<p> &#8230; involves the ever useful <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element introduced with HTML5 as per &#8230;<\/p>\n<p><code><br \/>\nHTML canvas element object's drawImage method helps draw HTML img elements positionally so as to recreate the original image look from constituent \"jigsaw image element\" HTML img elements<br \/>\n<\/code><\/p>\n<p>Let&#8217;s take a step back, reread <a target=_blank title='Emoji Border or Background Image Canvas Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-border-or-background-image-canvas-tutorial'>Emoji Border or Background Image Canvas Tutorial<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-border-or-background-image-canvas-tutorial'>\n<p>What&#8217;s the big deal with the HTML5 <a target=_blank title='HTML5 canvas element information from w3schools ... thanks' href='http:\/\/www.w3schools.com\/html\/html5_canvas.asp'>canvas<\/a> element?  For a few things &#8230;<\/p>\n<p><\/p>\n<ul>\n<li>the HTML5 canvas element right click or two finger gesture functionality includes Copy options &#8230;<\/li>\n<li>the canvas can collect both images and text and be able to summarize that into &#8230;<\/li>\n<li>a single image can be derived from the canvas element, encapsulating its contents &#8230; so that &#8230;<\/li>\n<li>the canvas element can export that graphical content into a data URI that involves no absolute URLs &#8230; and so ties in nicely with &#8230;<\/li>\n<li>email attachments can go hand in hand with the canvas element via a serverside function such as PHP&#8217;s mail function to enhance sharing functionalities<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; because it is both pertinent to this project and shows how the canvas element is such a great generic &#8220;graphic&#8221; sharing element.  Express all its content by data URIs and you have a totally &#8220;mobile&#8221; and transportable container of graphical or pixel data.<\/p>\n<p>The PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php--GETME\" title=\"gimp_guillotine_followup.php\">gimp_guillotine_followup.php<\/a> today changed for canvas use <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php--GETME\" title=\"gimp_guillotine_followup.php\">this way<\/a> and it is more than likely you will use this PHP with a local web server like <a target=_blank title='PHP and MySql via MAMP Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=933'>MAMP<\/a>.   We hope this gives you ideas, and please feel free to download this PHP.<\/p>\n<hr>\n<p id='ggfudmt'>Previous relevant <a target=_blank title='Gimp Guillotine Follow Up Div Margin Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-follow-up-div-margin-tutorial\/'>Gimp Guillotine Follow Up Div Margin Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine_div_margin.jpg\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Gimp Guillotine Follow Up Div Margin Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine_div_margin.jpg\" title=\"Gimp Guillotine Follow Up Div Margin Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Gimp Guillotine Follow Up Div Margin Tutorial<\/p><\/div>\n<p>The first non-primer tutorial theme to improve and build on the recent <a title='Gimp Guillotine Follow Up Primer Tutorial' href='#ggfupt'>Gimp Guillotine Follow Up Primer Tutorial<\/a> are a series of representations to put the Gimp Guillotine &#8220;jigsaw image pieces&#8221; back together to make <strike>humpty dumpty<\/strike> <font size=1> &#8230; down, Nala &#8230;<\/font> representations of the original image back for the user.   Sounds a bit counterproductive, but these are all steps in a process to eventually be able to do quite a bit we hope.  Today&#8217;s &#8220;first cab off the rank&#8221; representation is &#8230;<\/p>\n<p><code><br \/>\nHTML div element housing HTML img elements (no position: absolute <font>like we like so much for overlay work<\/font>) using style property <em>margin-left<\/em> and HTML br (line break) element (which sometimes requires negative <em>margin-top<\/em> tweaking)<br \/>\n<\/code><\/p>\n<p>Gasp, how rudimentary!  But sometimes the rudimentary things are the best.  We display this &#8220;pieced back together original image&#8221; data (from the data you guillotined (which may not be the whole picture, as with today&#8217;s data we test)) in three different ways &#8230;<\/p>\n<ul>\n<li>an &#8220;a&#8221; link hashtag navigates the user below the fold to the &#8220;pieced back together original image&#8221;<\/li>\n<li>another &#8220;a&#8221; link hashtag navigates the user to a new window with the &#8220;pieced back together original image&#8221;<\/li>\n<li>a new type=submit name=divmarginuse button of the HTML form is an alternate processing option that automatically &#8220;underlays&#8221; (<a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=zOvyRjVQLjE'>you say underlay, I say overlay, we go<\/a>) the &#8220;pieced back together original image&#8221; under whatever webpage data appears at the top left, with an opacity less than 1 (ie. 0.5 to show with some transparency), this &#8220;underlay&#8221; being position:absolute but not asking that of an pre-existant webpage data &#8230; it is added dynamically via Javascript DOM techniques<\/li>\n<\/ul>\n<p>This last option&#8217;s usage we find pretty efficient, and you can read more on this at <a target=_blank title='HTML Multiple Form Multiple Submit Buttons Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-multiple-form-multiple-submit-buttons-primer-tutorial\/'>HTML Multiple Form Multiple Submit Buttons Primer Tutorial<\/a>.  As you might surmise, we&#8217;ll be adding more of these as time goes on, and we dip our toes into the myriad number of representations of this &#8220;pieced back together original image&#8221; data we visit.<\/p>\n<p>The PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php-GETME\" title=\"gimp_guillotine_followup.php\">gimp_guillotine_followup.php<\/a> today changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php-GETME\" title=\"gimp_guillotine_followup.php\">this way<\/a> it is more than likely you will use this PHP with a local web server like <a target=_blank title='PHP and MySql via MAMP Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=933'>MAMP<\/a> (though into the future we may offer a command line mode of use).<\/p>\n<p>Hopefully today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine_div_margin.jpg\" title=\"Tutorial picture\">tutorial picture<\/a> makes what we are talking about here more clear for you.<\/p>\n<hr>\n<p id='ggfupt'>Previous relevant <a target=_blank title='Gimp Guillotine Follow Up Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-follow-up-primer-tutorial\/'>Gimp Guillotine Follow Up Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine_followup.jpg\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Gimp Guillotine Follow Up Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine_followup.jpg\" title=\"Gimp Guillotine Follow Up Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Gimp Guillotine Follow Up Primer Tutorial<\/p><\/div>\n<p>Still on yesterday&#8217;s <a title='Gimp Image Map HTML Primer Tutorial' href='#gimhtmlpt'>Gimp Image Map HTML Primer Tutorial<\/a>&#8216;s Gimp themes do you remember us saying, relating to <a target=_blank title='GIMP' href='http:\/\/gimp.org'>GIMP<\/a> &#8230;<\/p>\n<blockquote><p>\n&#8230; precursor to being able to break an image into component parts via &#8220;Image -&gt; Transform -&gt; Guillotine&#8221; or the more enticing, for those web developers out there, &#8220;Filters -&gt; Web -&gt; Slice&#8221; which effectively does what Guillotine does and writes out some HTML in the form of an HTML table element that includes some &#8220;a&#8221; link opportunities to do something special for individual images of the new &#8220;image jigsaw&#8221; surrounded by Guides\n<\/p><\/blockquote>\n<p> &#8230; down below?  Well, yes, today is a revisit to the &#8220;Guillotine&#8221; bit of that, because it is all well and good to use &#8220;Filters -&gt; Web -&gt; Slice&#8221; for a fait accompli HTML table &#8220;slicing&#8221; approach, but as you can imagine, there are lots of reasons, such as responsive design, why you might want to stop at the &#8220;Guillotine&#8221; &#8220;just give me the images, <strike>man<\/strike>person&#8221; stage and from there, do your own <strike>thing<\/strike>thang, <strike>man<\/strike>person.<\/p>\n<p>We&#8217;re just starting down the road of this today in our &#8220;Primer&#8221; tutorial, just being able to either &#8230;<\/p>\n<ol>\n<li>image creation method &#8230;\n<ul>\n<li>start GIMP and listen out for new images created &#8230; we&#8217;re hoping via &#8220;Image -&gt; Transform -&gt; Guillotine&#8221; &#8230; or &#8230;<\/li>\n<li>specify your own filespec of images &#8230; we&#8217;re hoping got there via &#8220;Image -&gt; Transform -&gt; Guillotine&#8221;<\/li>\n<\/ul>\n<\/li>\n<li>list those image files &#8230;<\/li>\n<li>show those image files<\/li>\n<\/ol>\n<p>GIMP being a desktop application, you might have guessed that we&#8217;d use a serverside language for this work, and yes, we&#8217;re using PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php_GETME\" title=\"gimp_guillotine_followup.php\">gimp_guillotine_followup.php<\/a> today, but don&#8217;t show you any live run links because it is more than likely you will use this PHP with a local web server like <a target=_blank title='PHP and MySql via MAMP Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=933'>MAMP<\/a> (though into the future we may offer a command line mode of use).<\/p>\n<p>So please feel free to download that PHP and\/or see its approach via today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_guillotine_followup.jpg\" title=\"Tutorial picture\">tutorial picture<\/a>.<\/p>\n<hr>\n<p id='gimhtmlpt'>Previous relevant <a target=_blank title='Gimp Image Map HTML Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/gimp-image-map-html-primer-tutorial\/'>Gimp Image Map HTML Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_im.pdf\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Gimp Image Map HTML Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_im.jpg\" title=\"Gimp Image Map HTML Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Gimp Image Map HTML Primer Tutorial<\/p><\/div>\n<p>As we intimated yesterday with <a title='Gimp Guides to HTML Primer Tutorial' href='#gghtmlpt'>Gimp Guides to HTML Primer Tutorial<\/a> regarding the <a target=_blank title='GIMP' href='http:\/\/gimp.org'>GIMP<\/a> image editor&#8217;s &#8220;Filters -&gt; Web&#8221; menu &#8230;<\/p>\n<blockquote><p>\n&#8230; you would also see an &#8220;Image Map&#8221; option helping out in a similar fashion to the stupendous <a target=_blank title='mobilefish' href='http:\/\/www.mobilefish.com\/services\/image_map\/image_map.php'>mobilefish<\/a> functionality.\n<\/p><\/blockquote>\n<p> &#8230; and so we are here today to show you how that functionality works via a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_im.pdf\" title=\"Click picture\">PDF slideshow<\/a> for your perusal.  There are options to shape what goes into the resultant HTML&#8217;s map element&#8217;s area (as rectangle or ellipse or polygon) tag href property link types as per &#8230;<\/p>\n<ul>\n<li>Web Site<\/li>\n<li>Ftp Site<\/li>\n<li><a target=_blank title='Gopher information from Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/Gopher_(protocol)'>Gopher<\/a><\/li>\n<li>File<\/li>\n<li><a target=_blank title='Wide Area Information Server information from Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/Wide_area_information_server'>WAIS<\/li>\n<li><a target=_blank title='Telnet information from Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/Telnet'>Telnet<\/a><\/li>\n<li>Email<\/li>\n<li>Other<\/li>\n<\/ul>\n<p> &#8230; as a very extensive ideas list on top of options to define event logic for &#8230;<\/p>\n<ul>\n<li>onmouseover<\/li>\n<li>onmouseout<\/li>\n<li>onfocus<\/li>\n<li>onblur<\/li>\n<\/ul>\n<p> &#8230; and that there is the option to define exact co-ordinates, and to define the alt attribute and HTML iframe name as applicable, also.<\/p>\n<p>We&#8217;ll leave you with the resultant HTML we had GIMP create for us as a result of the goings on in that PDF slideshow (noting that the only adjustment to HTML in out TextWrangler editing session was to point at the image <em>img element src attribute location<\/em> properly), and we hope this is of benefit for you &#8230;<\/p>\n<p><code><br \/>\n&lt;img src=\"<em>mondrian-1504681_640.jpg<\/em>\" width=\"640\" height=\"480\" border=\"0\" usemap=\"#map\" \/&gt;<br \/>\n&nbsp;<br \/>\n&lt;map name=\"map\"&gt;<br \/>\n&lt;!-- #$-:Image map file created by GIMP Image Map plug-in --&gt;<br \/>\n&lt;!-- #$-:GIMP Image Map plug-in by Maurits Rijk --&gt;<br \/>\n&lt;!-- #$-:Please do not edit lines starting with \"#$\" --&gt;<br \/>\n&lt;!-- #$VERSION:2.3 --&gt;<br \/>\n&lt;!-- #$AUTHOR:User --&gt;<br \/>\n&lt;area shape=\"rect\" coords=\"0,1,36,132\" href=\"mailto:?body=w_1_1&amp;subject=Mondrian%20Composition%20with%20Read%20Yellow%20and%20Blue\" \/&gt;<br \/>\n&lt;area shape=\"rect\" coords=\"51,0,118,128\" href=\"mailto:?body=y_2_1&amp;subject=Mondrian%20Composition%20with%20Red%20Yellow%20and%20Blue\" \/&gt;<br \/>\n&lt;area shape=\"rect\" coords=\"136,1,295,133\" href=\"mailto:?body=b_3_1&amp;subject=Mondrian%20Composition%20with%20Red%20Yellow%20and%20Blue\" \/&gt;<br \/>\n&lt;area shape=\"rect\" coords=\"310,1,500,132\" href=\"mailto:?body=r_4_1&amp;subject=Mondrian%20Composition%20with%20Red%20Yellow%20and%20Blue\" \/&gt;<br \/>\n&lt;area shape=\"rect\" coords=\"514,0,566,131\" href=\"mailto:?body=y_5_1&amp;subject=Mondrian%20Composition%20with%20Red%20Yellow%20and%20Blue\" \/&gt;<br \/>\n&lt;area shape=\"rect\" coords=\"583,1,596,130\" href=\"mailto:?body=w_6_1&amp;subject=Mondrian%20Composition%20with%20Red%20Yellow%20and%20Blue\" \/&gt;<br \/>\n&lt;area shape=\"rect\" coords=\"0,146,36,293\" href=\"mailto:?body=w_1_2&amp;subject=Mondrian%20Composition%20with%20Red%20Yellow%20and%20Blue\" \/&gt;<br \/>\n&lt;area shape=\"rect\" coords=\"50,145,119,294\" href=\"mailto:?body=w_2_2&amp;subject=Mondrian%20Composition%20with%20Red%20Yellow%20and%20Blue\" \/&gt;<br \/>\n&lt;area shape=\"rect\" coords=\"134,146,295,292\" href=\"mailto:?body=w_3_2&amp;subject=Mondrian%20Composition%20with%20Red%20Yellow%20and%20Blue\" \/&gt;<br \/>\n&lt;area shape=\"rect\" coords=\"310,146,375,294\" href=\"mailto:?body=w_4_2&amp;subject=Mondrian%20Composition%20with%20Red%20Yellow%20and%20Blue\" \/&gt;<br \/>\n&lt;area shape=\"rect\" coords=\"391,147,498,294\" href=\"mailto:?body=w_5_2&amp;subject=Mondrian%20Composition%20with%20Red%20Yellow%20and%20Blue\" \/&gt;<br \/>\n&lt;area shape=\"rect\" coords=\"514,144,567,294\" href=\"mailto:?body=r_6_2&amp;subject=Mondrian%20Composition%20with%20Red%20Yellow%20and%20Blue\" \/&gt;<br \/>\n&lt;area shape=\"rect\" coords=\"582,146,597,385\" href=\"mailto:?body=w_7_2&amp;subject=Mondrian%20Composition%20with%20Red%20Yellow%20and%20Blue\" \/&gt;<br \/>\n&lt;area shape=\"rect\" coords=\"0,309,36,479\" href=\"mailto:?body=w_1_3&amp;subject=Mondrian%20Composition%20with%20Red%20Yellow%20and%20Blue\" \/&gt;<br \/>\n&lt;area shape=\"rect\" coords=\"51,308,119,386\" href=\"mailto:?body=w_2_3&amp;subject=Mondrian%20Composition%20with%20Red%20Yellow%20and%20Blue\" \/&gt;<br \/>\n&lt;area shape=\"rect\" coords=\"133,307,374,385\" href=\"mailto:?body=r_3_3&amp;subject=Mondrian%20Composition%20with%20Red%20Yellow%20and%20Blue\" \/&gt;<br \/>\n&lt;area shape=\"rect\" coords=\"390,307,499,385\" href=\"mailto:?body=w_4_3&amp;subject=Mondrian%20Composition%20with%20Red%20Yellow%20and%20Blue\" \/&gt;<br \/>\n&lt;area shape=\"rect\" coords=\"514,309,569,384\" href=\"mailto:?body=y_5_3&amp;subject=Mondrian%20Composition%20with%20Red%20Yellow%20and%20Blue\" \/&gt;<br \/>\n&lt;area shape=\"rect\" coords=\"51,399,118,481\" href=\"mailto:?body=b_2_4&amp;subject=Mondrian%20Composition%20with%20Red%20Yellow%20and%20Blue\" \/&gt;<br \/>\n&lt;area shape=\"rect\" coords=\"132,400,375,479\" href=\"mailto:?body=y_3_4&amp;subject=Mondrian%20Composition%20with%20Red%20Yellow%20and%20Blue\" \/&gt;<br \/>\n&lt;area shape=\"rect\" coords=\"390,400,568,481\" href=\"mailto:?body=w_4_4&amp;subject=Mondrian%20Composition%20with%20Red%20Yellow%20and%20Blue\" \/&gt;<br \/>\n&lt;area shape=\"rect\" coords=\"582,399,597,479\" href=\"mailto:?body=w_5_4&amp;subject=Mondrian%20Composition%20with%20Red%20Yellow%20and%20Blue\" \/&gt;<br \/>\n&lt;\/map&gt;<br \/>\n<\/code><\/p>\n<hr>\n<p id='gghtmlpt'>Previous relevant <a target=_blank title='Gimp Guides to HTML Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guides-to-html-primer-tutorial\/'>Gimp Guides to HTML Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.youtube.com\/watch?v=uOILGAtY2W4\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Gimp Guides to HTML Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/gimp_guides.jpg\" title=\"Gimp Guides to HTML Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Gimp Guides to HTML Primer Tutorial<\/p><\/div>\n<p>The great <a target=_blank title='GIMP' href='http:\/\/gimp.org'>GIMP<\/a> image editor has several ways to create <a target=_blank title='GIMP Guides information' href='https:\/\/docs.gimp.org\/2.6\/en\/gimp-concepts-image-guides.html'>Guides<\/a>, which are the precursor to being able to break an image into component parts via &#8220;Image -&gt; Transform -&gt; Guillotine&#8221; or the more enticing, for those web developers out there, &#8220;Filters -&gt; Web -&gt; Slice&#8221; which effectively does what Guillotine does and writes out some HTML in the form of an HTML table element that includes some &#8220;a&#8221; link opportunities to do something special for individual images of the new &#8220;image jigsaw&#8221; surrounded by Guides.  Within the options of that last menu you would also see an &#8220;Image Map&#8221; option helping out in a similar fashion to the stupendous <a target=_blank title='mobilefish' href='http:\/\/www.mobilefish.com\/services\/image_map\/image_map.php'>mobilefish<\/a> functionality.<\/p>\n<p>With this in mind, we almost immediately thought of the great <a target=_blank title='Piet Mondrian' href='https:\/\/en.wikipedia.org\/wiki\/Piet_Mondrian'>Piet Mondrian<\/a> and his rectangle paintings in primary colours, wondering if by now you could get image downloads of his work, given he died some time ago now.  And yes, there at this Pixabay <a target=_blank title='Pixabay Mondrian image link, thanks' href='https:\/\/pixabay.com\/en\/mondrian-red-blue-yellow-1504681\/'>webpage<\/a>, thanks, we were able to do that and download an image version of &#8220;Composition with Red Yellow and Blue&#8221; to open with GIMP.<\/p>\n<p>Which ways, then, in GIMP, can you create Guides?<\/p>\n<ul>\n<li>precise Horizontal or Vertical position specification in pixels (via Image -&gt; Guides -&gt; New Guide&#8230;) or percentage (via Image -&gt; Guides -&gt; New Guide (by Percent)&#8230;) values<\/li>\n<li>position via a Selection (via Image -&gt; Guides -&gt; New Guides from Selection) &#8230; and today&#8217;s method of choice &#8230;<\/li>\n<li>user long hover then drag of the rulers at the top and left for dynamic Horizontal and Vertical Guides respectively<\/li>\n<\/ul>\n<p>Best for this is that you can see us doing this with YouTube video we made for the purpose on our MacBook Pro using <a target=_blank title='QuickTime information from Apple' href='https:\/\/support.apple.com\/downloads\/quicktime'>QuickTime Player<\/a> &#8220;File -&gt; New Screen Recording&#8221; resultant presentation you can play below.<\/p>\n<p><iframe loading=\"lazy\" width=\"420\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/uOILGAtY2W4\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p> &#8230; and the resultant HTML code snippet, including <em>our bits<\/em>, produced looked like &#8230;<\/p>\n<p><code><br \/>\n&lt;!--HTML SNIPPET GENERATED BY GIMP<br \/>\n&nbsp;<br \/>\nWARNING!! This is NOT a fully valid HTML document, it is rather a piece of<br \/>\nHTML generated by GIMP's py-slice plugin that should be embedded in an HTML<br \/>\nor XHTML document to be valid.<br \/>\n&nbsp;<br \/>\nReplace the href targets in the anchor (&lt;a &gt;) for your URLS to have it working<br \/>\nas a menu.<br \/>\n<em>&nbsp;<br \/>\n&nbsp;<br \/>\n     Thanks for viewing.<\/em><br \/>\n --&gt;<br \/>\n&lt;table cellpadding=\"0\" border=\"0\" cellspacing=\"0\"&gt;<br \/>\n  &lt;tr&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_0_0.jpg\" style=\"width: 51px;  height: 4px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_0_1.jpg\" style=\"width: 70px;  height: 4px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_0_2.jpg\" style=\"width: 11px;  height: 4px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_0_3.jpg\" style=\"width: 164px;  height: 4px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_0_4.jpg\" style=\"width: 95px;  height: 4px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_0_5.jpg\" style=\"width: 110px;  height: 4px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_0_6.jpg\" style=\"width: 139px;  height: 4px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n  &lt;tr&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_1_0.jpg\" style=\"width: 51px;  height: 128px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_1_1.jpg\"  style=\"width: 70px; height: 128px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_1_2.jpg\"  style=\"width: 11px; height: 128px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a<em> title='blue' onclick=\"alert('Am I blue?');\"<\/em> href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_1_3.jpg\"  style=\"width: 164px; height: 128px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_1_4.jpg\"  style=\"width: 95px; height: 128px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_1_5.jpg\"  style=\"width: 110px; height: 128px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_1_6.jpg\" style=\"width: 139px;  height: 128px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n  &lt;tr&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_2_0.jpg\" style=\"width: 51px;  height: 14px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_2_1.jpg\"  style=\"width: 70px; height: 14px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_2_2.jpg\"  style=\"width: 11px; height: 14px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_2_3.jpg\"  style=\"width: 164px; height: 14px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_2_4.jpg\"  style=\"width: 95px; height: 14px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_2_5.jpg\"  style=\"width: 110px; height: 14px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_2_6.jpg\" style=\"width: 139px;  height: 14px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n  &lt;tr&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_3_0.jpg\" style=\"width: 51px;  height: 147px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_3_1.jpg\"  style=\"width: 70px; height: 147px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_3_2.jpg\"  style=\"width: 11px; height: 147px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_3_3.jpg\"  style=\"width: 164px; height: 147px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_3_4.jpg\"  style=\"width: 95px; height: 147px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a<em> title='Blue' onclick=\"alert('Am i Blue?');\"<\/em> href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_3_5.jpg\"  style=\"width: 110px; height: 147px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_3_6.jpg\" style=\"width: 139px;  height: 147px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n  &lt;tr&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_4_0.jpg\" style=\"width: 51px;  height: 107px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_4_1.jpg\"  style=\"width: 70px; height: 107px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_4_2.jpg\"  style=\"width: 11px; height: 107px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_4_3.jpg\"  style=\"width: 164px; height: 107px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_4_4.jpg\"  style=\"width: 95px; height: 107px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_4_5.jpg\"  style=\"width: 110px; height: 107px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_4_6.jpg\" style=\"width: 139px;  height: 107px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n  &lt;tr&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_5_0.jpg\" style=\"width: 51px;  height: 78px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a<em> title='BLUE' onclick=\"alert('Am i BLUE?');\"<\/em> href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_5_1.jpg\"  style=\"width: 70px; height: 78px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_5_2.jpg\"  style=\"width: 11px; height: 78px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_5_3.jpg\"  style=\"width: 164px; height: 78px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_5_4.jpg\"  style=\"width: 95px; height: 78px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_5_5.jpg\"  style=\"width: 110px; height: 78px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_5_6.jpg\" style=\"width: 139px;  height: 78px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n  &lt;tr&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_6_0.jpg\" style=\"width: 51px;  height: 2px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_6_1.jpg\" style=\"width: 70px;  height: 2px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_6_2.jpg\" style=\"width: 11px;  height: 2px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_6_3.jpg\" style=\"width: 164px;  height: 2px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_6_4.jpg\" style=\"width: 95px;  height: 2px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_6_5.jpg\" style=\"width: 110px;  height: 2px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_6_6.jpg\" style=\"width: 139px;  height: 2px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;\/table&gt;<br \/>\n<\/code><\/p>\n<p>We hope you find these GIMP &#8220;Slice and Dice&#8221; webpage creation ideas of interest.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d40368' onclick='var dv=document.getElementById(\"d40368\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/gimp\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40368' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d40385' onclick='var dv=document.getElementById(\"d40385\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/map\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40385' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d40407' onclick='var dv=document.getElementById(\"d40407\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/command-line\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40407' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d40440' onclick='var dv=document.getElementById(\"d40440\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40440' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d40451' onclick='var dv=document.getElementById(\"d40451\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40451' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d40488' onclick='var dv=document.getElementById(\"d40488\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40488' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d40510' onclick='var dv=document.getElementById(\"d40510\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/attachment\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40510' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d40532' onclick='var dv=document.getElementById(\"d40532\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/animation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40532' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d40559' onclick='var dv=document.getElementById(\"d40559\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/video\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40559' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d40571' onclick='var dv=document.getElementById(\"d40571\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/keyframes\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40571' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d40604' onclick='var dv=document.getElementById(\"d40604\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/border\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40604' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d40654' onclick='var dv=document.getElementById(\"d40654\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/filter\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40654' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d40665' onclick='var dv=document.getElementById(\"d40665\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/transformation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40665' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d40686' onclick='var dv=document.getElementById(\"d40686\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/svg\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40686' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d40704' onclick='var dv=document.getElementById(\"d40704\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/gaussian-blur\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40704' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday with Gimp Guillotine Follow Up SVG Tutorial we started down the road with some SVG functionality to our GIMP Follow Up (ie. what we can do with a sequence of related images, and a server side language like PHP) &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-follow-up-svg-filter-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,12,14,16,37],"tags":[84,103,111,126,2675,2676,152,161,2684,184,234,2683,2650,281,282,319,2310,341,342,354,1833,1822,380,399,405,415,2671,431,2333,491,2440,2663,2670,576,582,590,592,1658,2686,2685,652,675,744,2673,756,2092,876,894,913,932,2135,1991,1063,1071,1072,1094,1116,2293,1126,1137,1147,2664,1151,2311,1238,1298,1299,2674,1300,1319,2485,1407,1418,1425,1583],"class_list":["post-40704","post","type-post","status-publish","format-standard","hentry","category-android","category-elearning","category-event-driven-programming","category-gimp","category-tutorials","tag-animation-2","tag-array","tag-attachment","tag-background","tag-backgroundimage","tag-backgroundposition","tag-blur","tag-border","tag-brightness","tag-canvas","tag-command-line","tag-contrast","tag-convert","tag-css","tag-css3","tag-desktop","tag-details","tag-display","tag-div","tag-dom","tag-drop-shadow","tag-editor","tag-email","tag-eval","tag-exec","tag-ffmpeg","tag-file-specification","tag-filter","tag-gaussian-blur","tag-gimp","tag-grayscale","tag-guides","tag-guillotine","tag-html","tag-hue","tag-image","tag-image-map","tag-imagemagick","tag-inkscape","tag-invert","tag-javascript","tag-keyframes","tag-mamp","tag-margin","tag-matrix","tag-multiple","tag-opacity","tag-overlay","tag-pdf","tag-php","tag-push","tag-responsive-design","tag-reveal","tag-rotate","tag-rotation","tag-scale","tag-selection","tag-sepia","tag-settimeout","tag-sharing","tag-skew","tag-slice","tag-slideshow","tag-summary","tag-table","tag-transform","tag-transformation","tag-transitions","tag-translate","tag-tutorial","tag-visibility","tag-web-design","tag-webpage","tag-whitespace","tag-window"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/40704"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=40704"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/40704\/revisions"}],"predecessor-version":[{"id":40712,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/40704\/revisions\/40712"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=40704"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=40704"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=40704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}