{"id":55469,"date":"2022-04-20T03:01:15","date_gmt":"2022-04-19T17:01:15","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=55469"},"modified":"2022-04-19T17:10:13","modified_gmt":"2022-04-19T07:10:13","slug":"landing-page-linked-background-images-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/landing-page-linked-background-images-tutorial\/","title":{"rendered":"Landing Page Linked Background Images Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Landing Page Linked Background Images Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/landing_page_linked_background_images.jpg\" title=\"Landing Page Linked Background Images Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Landing Page Linked Background Images Tutorial<\/p><\/div>\n<p>We&#8217;ve introduced to the RJM Programming <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/\">Landing Page<\/a> some linked background images which link the reader to this <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/landing-page-linked-background-images-tutorial\">WordPress Blog<\/a>.<\/p>\n<p>There are &#8230;<\/p>\n<ul>\n<li>five images shown to a 30 x 20 thumbnail size &#8230; <font color=blue>applied as<\/font> &#8230;<br \/>\n<code><br \/>\n&lt;div <font color=blue>id=\"style_3\"<\/font> class=\"style_3\" style=\"text-align:center;\"&gt;<br \/>\n&lt;<font color=blue>!--<\/font>br&gt;&lt;br<font color=blue>--<\/font>&gt;<br \/>\n&lt;p <font color=blue>id=p_style_3<\/font> style=\"padding-bottom: <font color=blue>0pt<\/font>; padding-top: <font color=blue>13pt<\/font>; <font color=blue>background-size: 30px 20px,30px 20px,30px 20px,30px 20px,30px 20px,30px 20px; background-position: left top,center top,right top,left bottom,right bottom; background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat; background-image:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),url(\/PHP\/eight.jpg),linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),url(\/PHP\/seven.jpg),linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),url(\/PHP\/six.jpg),linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),url(\/PHP\/five.jpg),linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),url(\/PHP\/four.jpg);<\/font> \" class=\"Quote\"&gt;RJM Programming is a home-based Software House designed to meet your business needs.&lt;\/p&gt;<br \/>\n&lt;\/div&gt;<br \/>\n<\/code>\n<\/li>\n<li>CSS background-image: url([image URL1]),url([image URL2]),url([image URL3]),url([image URL4]),url([image URL5]); &#8230; each prefixed by &#8230;<\/li>\n<li>each url prefixed by <i>linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),<\/i> for some transparency &#8230; with &#8230;<\/li>\n<li>CSS background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,no-repeat; &#8230; ensuring just 5 images show with &#8230;<\/li>\n<li>CSS background-size: 30px 20px,30px 20px,30px 20px,30px 20px,30px 20px; &#8230; thumbnails with &#8230;<\/li>\n<li>CSS background-position: left top,center top,right top,left bottom,right bottom; &#8230; a directive that does not hold and so saw us <font color=purple>&#8220;covering for&#8221; (and which we didn&#8217;t think we&#8217;d need to do)<\/font> in the &#8230;<\/li>\n<li><font color=blue>added<\/font> onload Javascript event function logic &#8230;<br \/>\n<code><br \/>\nfunction noandmaybe(iois) {<br \/>\n if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile\/i)) { \/\/ it is a mobile device<br \/>\n  if (iois != null) {<br \/>\n    var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    if (aconto != null) {<br \/>\n     if (aconto.document) { aconto = aconto.document; }<br \/>\n     if (aconto.body != null) {<br \/>\n        aconto.body.innerHTML=aconto.body.innerHTML.replace(\/\\#andabit\\=\\-70\/g,'');<br \/>\n     }<br \/>\n    }<br \/>\n  }<br \/>\n }<br \/>\n<br \/>\n   <font color=blue>var rdbit='?rand=' + Math.floor(Math.random() * 1985676);<br \/>\n   if (aconto) {<br \/>\n     if (aconto.body != null) {<br \/>\n      if (document.getElementById('p_style_3')) {<br \/>\n        document.getElementById('style_3').innerHTML=document.getElementById('p_style_3').outerHTML.replace(\/\\.jpg\/g, '.jpg' + rdbit);<br \/>\n      }<br \/>\n      var hrefs=aconto.body.innerHTML.split(' href=');<br \/>\n      var style_3r=document.getElementById('style_3').getBoundingClientRect();<br \/>\n      document.getElementById('style_3').title='Feel free to visit thumbnail links to our WordPress Tutorial blog!';<br \/>\n      for (var ihrefs=1; ihrefs&lt;hrefs.length; ihrefs++) {<br \/>\n        jps=hrefs[ihrefs].split('.jpeg?rand=');<br \/>\n        console.log(jps[0].slice(-9));<br \/>\n        if (jps[0].slice(-3).indexOf('-') != -1) {  jps[0]=jps[0].split('-')[eval(-2 + eval('' + jps[0].split('-').length))];    }<br \/>\n        switch (jps[0].slice(-3)) {<br \/>\n          case 'ght':<br \/>\n           document.body.innerHTML+='&lt;a target=_blank style=\"<\/font><font color=purple>opacity:0.5;background-repeat:no-repeat;background-size:30px 20px;background-image:url(\/PHP\/eight.jpg' + rdbit + ');<\/font><font color=blue>position:absolute;z-index:99;top:' + style_3r.top + 'px;width:30px;height:20px;background-color:transparent;left:' + style_3r.left + 'px;\" title=\"' + hrefs[ihrefs].substring(1).split(' title=')[1].substring(1).split(hrefs[ihrefs].substring(0,1))[0] + '\" href=\"' + hrefs[ihrefs].substring(1).split(hrefs[ihrefs].substring(0,1))[0] + '\"&gt;&lt;\/a&gt;';<br \/>\n           break;<br \/>\n<br \/> <br \/>\n          case 'ven':<br \/>\n           document.body.innerHTML+='&lt;a target=_blank style=\"<\/font><font color=purple>opacity:0.5;background-repeat:no-repeat;background-size:30px 20px;background-image:url(\/PHP\/seven.jpg' + rdbit + ');<\/font><font color=blue>position:absolute;z-index:99;top:' + style_3r.top + 'px;width:30px;height:20px;background-color:transparent;left:' + eval(eval(eval(style_3r.left + style_3r.right) \/ 2) - 15) + 'px;\" title=\"' + hrefs[ihrefs].substring(1).split(' title=')[1].substring(1).split(hrefs[ihrefs].substring(0,1))[0] + '\" href=\"' + hrefs[ihrefs].substring(1).split(hrefs[ihrefs].substring(0,1))[0] + '\"&gt;&lt;\/a&gt;';<br \/>\n           break;<br \/>\n<br \/> <br \/>\n          case 'six':<br \/>\n           document.body.innerHTML+='&lt;a target=_blank style=\"<\/font><font color=purple>opacity:0.5;background-repeat:no-repeat;background-size:30px 20px;background-image:url(\/PHP\/six.jpg' + rdbit + ');<\/font><font color=blue>position:absolute;z-index:99;top:' + style_3r.top + 'px;width:30px;height:20px;background-color:transparent;left:' + eval(style_3r.right - 30) + 'px;\" title=\"' + hrefs[ihrefs].substring(1).split(' title=')[1].substring(1).split(hrefs[ihrefs].substring(0,1))[0] + '\" href=\"' + hrefs[ihrefs].substring(1).split(hrefs[ihrefs].substring(0,1))[0] + '\"&gt;&lt;\/a&gt;';<br \/>\n           break;<br \/>\n<br \/> <br \/>\n          case 'ive':<br \/>\n           document.body.innerHTML+='&lt;a target=_blank style=\"<\/font><font color=purple>opacity:0.5;background-repeat:no-repeat;background-size:30px 20px;background-image:url(\/PHP\/five.jpg' + rdbit + ');<\/font><font color=blue>position:absolute;z-index:99;top:' + eval(style_3r.bottom - 20) + 'px;width:30px;height:20px;background-color:transparent;left:' + style_3r.left + 'px;\" title=\"' + hrefs[ihrefs].substring(1).split(' title=')[1].substring(1).split(hrefs[ihrefs].substring(0,1))[0] + '\" href=\"' + hrefs[ihrefs].substring(1).split(hrefs[ihrefs].substring(0,1))[0] + '\"&gt;&lt;\/a&gt;';<br \/>\n           break;<br \/>\n<br \/> <br \/>\n          case 'our':<br \/>\n           document.body.innerHTML+='&lt;a target=_blank style=\"<\/font><font color=purple>opacity:0.5;background-repeat:no-repeat;background-size:30px 20px;background-image:url(\/PHP\/four.jpg' + rdbit + ');<\/font><font color=blue>position:absolute;z-index:99;top:' + eval(style_3r.bottom - 20) + 'px;width:30px;height:20px;background-color:transparent;left:' + eval(style_3r.right - 30) + 'px;\" title=\"' + hrefs[ihrefs].substring(1).split(' title=')[1].substring(1).split(hrefs[ihrefs].substring(0,1))[0] + '\" href=\"' + hrefs[ihrefs].substring(1).split(hrefs[ihrefs].substring(0,1))[0] + '\"&gt;&lt;\/a&gt;';<br \/>\n           break;<br \/>\n<br \/> <br \/>\n          default:<br \/>\n           break;<br \/>\n        }<br \/>\n      }<br \/>\n     }<br \/>\n   }<br \/>\n }<\/font><br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; that show with today&#8217;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/landing_page_linked_background_images.jpg\" title=\"tutorial picture\">tutorial picture<\/a> at RJM Programming&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/\">Landing Page<\/a>.<\/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='#d55469' onclick='var dv=document.getElementById(\"d55469\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55469' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve introduced to the RJM Programming Landing Page some linked background images which link the reader to this WordPress Blog. There are &#8230; five images shown to a 30 x 20 thumbnail size &#8230; applied as &#8230; &lt;div id=&#8221;style_3&#8243; class=&#8221;style_3&#8243; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/landing-page-linked-background-images-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":[12,14,37],"tags":[126,127,2471,281,576,587,590,652,2020,1807,997,1273,1319],"class_list":["post-55469","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-background","tag-background-image","tag-background-position","tag-css","tag-html","tag-iframe","tag-image","tag-javascript","tag-linear-gradient","tag-link","tag-programming","tag-thumbnail","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55469"}],"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=55469"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55469\/revisions"}],"predecessor-version":[{"id":55476,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55469\/revisions\/55476"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=55469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=55469"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=55469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}