Language

How to manage the iframe to show when clicking

Serba Aneka Informasi feeds 

Simply manage iframe to show when clicking

I have been around on the Internet to look for ways to manage the iframe so that it is displayed after clicking. This is essential if we are going to display the contents of an iframe which includes the category of heavy, such as video or flash animation. When the contents of the iframe is displayed directly will cause a delay in the opening process of our web page, and might have made "very valuable visitors" soon shut off the page because of the slow process. Though perhaps not all visitors want to watch our incredible flash videos and animations, but only requires some information from the certain web page.
Now watch the animation below.





You might like it (enjoy the rest at photobucket) or not, whatever, and the code for this iframe is


<iframe src="http://i1276.photobucket.com/albums/y462/staffpicks/Animated_GIFs/karate.gif" 
height="360" frameborder="0"style="display: none;" width="480"  rel="nofollow" seamless></iframe>

We simply manage iframe to show by using "tag attribute" in html, for example, with another animation, so do not bore us.


<a href="http://s1276.photobucket.com/user/staffpicks/media/Animated_GIFs/holymackerel.gif"> Click here to play animation</a>

using target="target_name" for <a> attribute tag and by giving the name of the link associated with adding a tag name="target_name" also empty the src in iframe, so our code would be like this


<a 
href="http://i1276.photobucket.com/albums/y462/staffpicks/Animated_GIFs/holymackerel.gif 
target="holly-mackerel"> Click here to play</a>
<iframe frameborder="0" height="360" name="holly-mackerel" src="" rel="nofollow" style="display: none;" width="480" seamless></iframe>

The results of the lines of code that we have created will appear as below, where we are required to click on a link before the iframe opened. Also, we can duplicate HTML tag <a> pointed to other hyperlink.

Click here to play animation #2
Click here to play animation #1



Now we have a clickable iframe, that is in the same iframe showed difference animations depend on which link have clicked. While, seamless option is used so that the iframe we made approach the appearance of web pages where the iframe placed.
And lastly, my expectation, "how to simply manage iframe" can be beneficial to us all.

 *****



comments powered by Disqus