{"id":55664,"date":"2022-07-26T03:01:16","date_gmt":"2022-07-25T17:01:16","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=55664"},"modified":"2022-07-25T22:45:32","modified_gmt":"2022-07-25T12:45:32","slug":"landing-page-linked-background-images-long-hover-hashtag-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/landing-page-linked-background-images-long-hover-hashtag-tutorial\/","title":{"rendered":"Landing Page Linked Background Images Long Hover Hashtag 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 Long Hover Hashtag Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/landing_page_back_to.jpg\" title=\"Landing Page Linked Background Images Long Hover Hashtag Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Landing Page Linked Background Images Long Hover Hashtag Tutorial<\/p><\/div>\n<p>Maybe you remember &#8230;<\/p>\n<ul>\n<li><a title='Landing Page Linked Background Images Long Hover Tutorial' href='#lplbilht'>Landing Page Linked Background Images Long Hover Tutorial<\/a> &#8230; and &#8230;<\/li>\n<li><a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-hashtag-navigation-return-onmouseover-tutorial\/' title='WordPress Blog Hashtag Navigation Return Onmouseover Tutorial'>WordPress Blog Hashtag Navigation Return Onmouseover Tutorial<\/a><\/li>\n<\/ul>\n<p>?  Ideas from each, combine, today, to add some &#8220;hashtag navigational smarts&#8221; to our recently added &#8220;multiple background image&#8221; driven places whereby navigation can happen rightwards from our RJM Programming Landing Page to our RJM Programming I.T. WordPress Blog.<\/p>\n<p>Before the changes, a &#8220;long hover&#8221; on one of these Landing Page background (thumbnail) images would have opened a new HTML iframe element to the right, but not do any hashtag navigating to ensure that that iframe (element) was &#8220;front and center&#8221;.  Well, today, we remedy that via <font color=blue>code changes<\/font> &#8230;<\/p>\n<p><code><br \/>\nfunction omstill() {<br \/>\n  var brect=null;<br \/>\n  if (lastrid != '') {<br \/>\n    var alastrid=lastrid.replace('e','a');<br \/>\n    if (('' + document.getElementById('tblr').style.display).toLowerCase().indexOf('none') == 0) {<br \/>\n    brect=document.body.getBoundingClientRect();<br \/>\n    document.getElementById('tblr').style.position='absolute';<br \/>\n    document.getElementById('tblr').style.left='' + bodyrect.right + 'px';<br \/>\n    document.getElementById('tblr').style.top='0px';<br \/>\n    document.getElementById('tblr').style.height='' + brect.height + 'px';<br \/>\n    document.getElementById('tblr').style.display='block';<br \/>\n    }<br \/>\n    if (document.getElementById('if' + lastrid)) {<br \/>\n    <font color=blue>if (!document.getElementById('aahtreturn')) {<br \/>\n      document.getElementById('bleft').innerHTML+='&lt;a id=\"aahtreturn\" style=\"text-decoration:underline;z-index:209;position:fixed;top:70px;left:60px;background-color:yellow;opacity:0.5;display:inline-block;\" onclick=\"document.getElementById(' + \"'\" + 'bleft' + \"'\" + ').scrollIntoView({inline: ' + \"'\" + 'start' + \"'\" + '});\" href=\"#bleft\"&gt;Back to Landing Page ...&lt;\/a&gt;';<br \/>\n    }<\/font><br \/>\n    document.getElementById(alastrid).target='if' + lastrid;<br \/>\n    document.getElementById('if' + lastrid).src=document.getElementById(alastrid).href;<br \/>\n    <font color=blue>location.href='#' + lastrid;<\/font><br \/>\n    } else if (document.getElementById('' + lastrid)) {<br \/>\n    if (!brect) { brect=document.getElementById('tblr').getBoundingClientRect(); }<br \/>\n    <font color=blue>if (!document.getElementById('aahtreturn')) {<br \/>\n      document.getElementById('bleft').innerHTML+='&lt;a id=\"aahtreturn\" style=\"text-decoration:underline;z-index:209;position:fixed;top:70px;left:60px;background-color:yellow;opacity:0.5;display:inline-block;\" onclick=\"document.getElementById(' + \"'\" + 'bleft' + \"'\" + ').scrollIntoView({inline: ' + \"'\" + 'start' + \"'\" + '});\" href=\"#bleft\"&gt;Back to Landing Page ...&lt;\/a&gt;';<br \/>\n    }<\/font><br \/>\n    document.getElementById(alastrid).target='if' + lastrid;<br \/>\n    document.getElementById('' + lastrid).innerHTML='&lt;iframe style=\"width:' + bodyrect.right + 'px;' + 'height:' + brect.height + 'px;\" id=if' + lastrid + ' name=if' + lastrid + ' src=\"' + document.getElementById(alastrid).href + '\"&gt;&lt;\/iframe&gt;';<br \/>\n    <font color=blue>location.href='#' + lastrid;<\/font><br \/>\n    }<br \/>\n    lastrid='';<br \/>\n  }<br \/>\n}<br \/>\n<\/code> <\/p>\n<p> &#8230; with an effect whereby you might see a new <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/landing_page_back_to.jpg\" title=\"Tutorial picture\">&#8220;Back to Landing Page &#8230;&#8221;<\/a> ( CSS style position:fixed; ) &#8220;a&#8221; link with its href attribute filled in as &#8220;#bleft&#8221; to hashtag navigate the user back from the right hand side Blog information to the left hand side Landing Page &#8220;caller&#8221; information (where the background images come back into the field of view).<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/landing-page-linked-background-images-long-hover-hashtagging-tutorial\/'>Landing Page Linked Background Images Long Hover Hashtag Tutorial<\/a>.<\/p-->\n<hr>\n<p id='lplbilht'>Previous relevant <a target=_blank title='Landing Page Linked Background Images Long Hover Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/landing-page-linked-background-images-long-hover-tutorial\/'>Landing Page Linked Background Images Long Hover Tutorial<\/a> is shown below.<\/p>\n<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 Long Hover Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/landing_page_linked_background_images_long_hover.jpg\" title=\"Landing Page Linked Background Images Long Hover Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Landing Page Linked Background Images Long Hover Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Landing Page Linked Background Images Tutorial' href='#lplbit'>Landing Page Linked Background Images Tutorial<\/a> introduced linked background (thumbnail) image &#8220;onclick&#8221; event logic.<\/p>\n<p>Today, we extend, rather than impinge in any way, by adding &#8220;long hover&#8221; linked background (thumbnail) image functionality, which bases itself on a &#8220;short hover + <font color=purple>delayed logic<\/font>&#8221; paradigm (via the non-mobile &#8220;onmouseover&#8221; (or hover) and &#8220;onmouseout&#8221; events) &#8230;<\/p>\n<p><code><br \/>\nvar bodyrect=null, lastrid='';<br \/>\n<br \/>\n<font color=purple>function omstill() {<br \/>\n  var brect=null;<br \/>\n  if (lastrid != '') {<br \/>\n    var alastrid=lastrid.replace('e','a');<br \/>\n    if (('' + document.getElementById('tblr').style.display).toLowerCase().indexOf('none') == 0) {<br \/>\n    brect=document.body.getBoundingClientRect();<br \/>\n    document.getElementById('tblr').style.position='absolute';<br \/>\n    document.getElementById('tblr').style.left='' + bodyrect.right + 'px';<br \/>\n    document.getElementById('tblr').style.top='0px';<br \/>\n    document.getElementById('tblr').style.height='' + brect.height + 'px';<br \/>\n    document.getElementById('tblr').style.display='block';<br \/>\n    }<br \/>\n    if (document.getElementById('if' + lastrid)) {<br \/>\n    document.getElementById(alastrid).target='if' + lastrid;<br \/>\n    document.getElementById('if' + lastrid).src=document.getElementById(alastrid).href;<br \/>\n    } else if (document.getElementById('' + lastrid)) {<br \/>\n    if (!brect) { brect=document.getElementById('tblr').getBoundingClientRect(); }<br \/>\n    document.getElementById(alastrid).target='if' + lastrid;<br \/>\n    document.getElementById('' + lastrid).innerHTML='&lt;iframe style=\"width:' + bodyrect.right + 'px;' + 'height:' + brect.height + 'px;\" id=if' + lastrid + ' name=if' + lastrid + ' src=\"' + document.getElementById(alastrid).href + '\"&gt;&lt;\/iframe&gt;';<br \/>\n    }<br \/>\n    lastrid='';<br \/>\n  }<br \/>\n}<\/font><br \/>\n<br \/>\nfunction omright(aois) {<br \/>\n  lastrid=aois.id.replace('a','e');<br \/>\n  if (('' + aois.title) != '' && ('' + aois.title).indexOf('ong hover') == -1) {<br \/>\n    aois.title+='  Long hover of 7 seconds on thumbnails opens iframes to right.';<br \/>\n  }<br \/>\n  if (('' + document.getElementById('style_3').title) != '' && ('' + document.getElementById('style_3').title).indexOf('ong hover') == -1) {<br \/>\n    document.getElementById('style_3').title+='  Long hover of 7 seconds on thumbnails opens iframes to right.';<br \/>\n  }<br \/>\n  <font color=purple>setTimeout(omstill, 7000);<\/font><br \/>\n}<br \/>\n<br \/>\nfunction moright(aois) {<br \/>\n  lastrid='';<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; allowing blog posts to be presented in iframe elements off to the right within the one webpage <font color=blue>way of amending<\/font> &#8230;<\/p>\n<p><code><br \/>\nfunction noandmaybe(iois) {<br \/>\n var aconto=null, jps=[];<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    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 if (document.getElementById('style_3') && ('' + document.getElementById('style_3').title) == '') {<br \/>\n   if (!aconto) {<br \/>\n    aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    if (aconto != null) {<br \/>\n     if (aconto.document) { aconto = aconto.document; }<br \/>\n    }<br \/>\n   }<br \/>\n<br \/>\n   <font color=blue>var omover=' onmouseover=\"omright(this);\" ', omout=' onmouseout=\"moright(this);\" ', bdapp='&lt;table id=tblr style=display:none&gt;&lt;tr&gt;&lt;\/tr&gt;&lt;\/table&gt;';<\/font><br \/>\n   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        <font color=blue>\/\/document.body.innerHTML+='&lt;div id=ediv' + ihrefs + '&gt;&lt;\/div&gt;';<br \/>\n        bdapp=bdapp.replace('&lt;\/tr&gt;', '&lt;td id=ediv' + ihrefs + '&gt;&lt;\/td&gt;&lt;\/tr&gt;');<\/font><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 <font color=blue>id=adiv5' + omover + omout + '<\/font> target=_blank style=\"opacity:0.5;background-repeat:no-repeat;background-size:30px 20px;background-image:url(\/PHP\/eight.jpg' + rdbit + ');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  <font color=blue>id=adiv4' + omover + omout + '<\/font> target=_blank style=\"opacity:0.5;background-repeat:no-repeat;background-size:30px 20px;background-image:url(\/PHP\/seven.jpg' + rdbit + ');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  <font color=blue>id=adiv3' + omover + omout + '<\/font> target=_blank style=\"opacity:0.5;background-repeat:no-repeat;background-size:30px 20px;background-image:url(\/PHP\/six.jpg' + rdbit + ');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  <font color=blue>id=adiv2' + omover + omout + '<\/font> target=_blank style=\"opacity:0.5;background-repeat:no-repeat;background-size:30px 20px;background-image:url(\/PHP\/five.jpg' + rdbit + ');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  <font color=blue>id=adiv1' + omover + omout + '<\/font> target=_blank style=\"opacity:0.5;background-repeat:no-repeat;background-size:30px 20px;background-image:url(\/PHP\/four.jpg' + rdbit + ');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      <font color=blue>document.body.innerHTML+=bdapp;<br \/>\n      bodyrect=document.getElementById('nav_layer').getBoundingClientRect();<\/font><br \/>\n     }<br \/>\n   }<br \/>\n }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; that show with today&#8217;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/landing_page_linked_background_images_long_hover.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><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/landing-page-linked-background-images-long-hover-tutorial\/'>Landing Page Linked Background Images  Long HoverTutorial<\/a>.<\/p-->\n<hr>\n<p id='lplbit'>Previous relevant <a target=_blank title='Landing Page Linked Background Images Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/landing-page-linked-background-images-tutorial\/'>Landing Page Linked Background Images Tutorial<\/a> is shown below.<\/p>\n<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<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='#d55477' onclick='var dv=document.getElementById(\"d55477\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onmouseover\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55477' 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='#d55664' onclick='var dv=document.getElementById(\"d55664\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/hashtag\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55664' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Maybe you remember &#8230; Landing Page Linked Background Images Long Hover Tutorial &#8230; and &#8230; WordPress Blog Hashtag Navigation Return Onmouseover Tutorial ? Ideas from each, combine, today, to add some &#8220;hashtag navigational smarts&#8221; to our recently added &#8220;multiple background &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/landing-page-linked-background-images-long-hover-hashtag-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,37],"tags":[126,127,2471,281,2380,400,3037,557,3961,1608,576,587,590,652,2020,1807,3000,830,861,1661,871,997,1126,1273,1319],"class_list":["post-55664","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-background","tag-background-image","tag-background-position","tag-css","tag-delay","tag-event","tag-fixed","tag-hashtag","tag-hashtagging","tag-hover","tag-html","tag-iframe","tag-image","tag-javascript","tag-linear-gradient","tag-link","tag-long-hover","tag-navigation","tag-onclick","tag-onmouseout","tag-onmouseover","tag-programming","tag-settimeout","tag-thumbnail","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55664"}],"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=55664"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55664\/revisions"}],"predecessor-version":[{"id":55670,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55664\/revisions\/55670"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=55664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=55664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=55664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}