Hide GIF Image use Giflinks and Turn up when Hover - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Hide GIF Image use Giflinks and Turn up when Hover, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Coded, Article Javascript, Article Snippet, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Hide GIF Image use Giflinks and Turn up when Hover
link : Hide GIF Image use Giflinks and Turn up when Hover

Hide GIF Image use Giflinks and Turn up when Hover

Sebetulnya AA Koben lagi malas mosting, sudah nggak ada bahan yg menarik plus di waktu ramadhan membuang waktu buat beramal saja (tidur) :)) Gue melihat artikel tentang Giflinks tholman.com/giflinks by Tim Holman. Apakah Giflinks itu...sebuah javascript sederhana yang digunakan untuk menambahkan tindakan gif layar penuh sebagai efek hover
Singkat cerita menyembunyikan gambar berekstensi .GIF (yg mana notabene gambar .gif memakan waktu loading) dan akan muncul ketika sobat melakukan hover pada link giflinks.

Letakan JavaScript berikut sebelum tag </body>

<script type='text/javascript'>
//<![CDATA[
var GifLinks=function(){"use strict";function n(n,e){for(var t in e)t in n||(n[t]=e[t]);return n}function e(n,e){for(var t in e)n.style[t]=e[t]}function t(n,e){if(n.length)for(var t=0;t<n.length;t++)e===!0?o(n[t]):i(n[t]);else e===!0?o(n):i(n)}function o(n){var e=n.getAttribute("data-src");if(e){var t=new Image;t.onload=function(){n.className+=" preloaded",i(n)},t.src=e}}function i(n){n.addEventListener("mouseover",function(){c(this)},!1),n.addEventListener("touchstart",function(){c(this)},!1),n.addEventListener("mouseout",function(){s()},!1),n.addEventListener("touchmove",function(n){n.preventDefault(),s()},!1),n.addEventListener("click",function(){s()},!1),n.addEventListener("dblclick",function(){s()},!1),a(n)}function a(n){n.className+=" giflink ready",n.className+=n.href?" has-link":" no-link"}function r(){var n={backgroundPosition:"50% 50%",backgroundSize:"cover",pointerEvents:"none",position:"fixed",zIndex:"999999",display:"none",height:"100%",width:"100%",margin:"0px",left:"0px",top:"0px"};l=document.createElement("div"),e(l,n),u.appendChild(l)}function c(n){var e=n.getAttribute("data-src");e?(l.style.backgroundImage="url("+e+")",l.style.display="block"):console.log("Sorry, an element doesn't have a data-src!")}function s(){console.log("stop!"),l.style.display="none",l.style.backgroundImage=""}function d(n,e){u=document.body,r();var o=!1;e&&e.preload&&(o=!!e.preload),t(n,o)}var u,l;return n(d,{})}();
//]]>
</script>

<script type='text/javascript'>
var elements = document.querySelectorAll( '.post-body a' );
GifLinks( elements );
</script>

Perhatikan pada script bertuliskan .post-body, gantikan sesuai dengan tagging bagian post template blog kalian masing-masing! Jika ingin memberi sentuhan CSS pada gif links...

.giflink {
 font-style: italic;
 color: rgb(245, 90, 3);
 /* BLAH-BLEH-BLOH HERE */ 
}

Syntax HTML<a data-src="LINK-IMG.gif">Title</a>DONE.

Buat bonusnya, silahkan sobat buka live HTML editor kepunyaan kalian masing² kemudian masukan bumbu ramuan berikut ini Open it atau ini juga boleh Open it

Semoga rakyat Palestina diberikan kesabaran dalam menghadapi cobaan dari tindakan rakyat bar-bar zionis yahudi israel.

Allohu Akbar...

Thus articles Hide GIF Image use Giflinks and Turn up when Hover

that is all articles Hide GIF Image use Giflinks and Turn up when Hover This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Hide GIF Image use Giflinks and Turn up when Hover with the link address https://autopostingblogspot.blogspot.com/2014/07/hide-gif-image-use-giflinks-and-turn-up.html