Preloading Images JavaScript

Hello folks...

Want to know how to load an image before the user sees it?

Then read on.

We all hate moments like these online:

src

Here is the free code bit today:


<div class="hidden">
        <script type="text/javascript">
<!--//--><![CDATA[//><!--
        var images = new Array()
            function preload() {
                for (i = 0; i < preload.arguments.length; i++) {
                    images[i] = new Image()
                    images[i].src = preload.arguments[i]
                }
            }
            preload(
"http://www.navsounds.com/blogimages/button200x200of.gif",
)
            //--><!]]>
        </script>
    </div>


The code above is all about preloading your images. For those who don't know what that means or what it can do for you and your blog. Preloading images is exactly what it sounds like. When you write the code above into an HTML page or blog layout the browser looks at it and finds this spot:

            preload(
"http://www.navsounds.com/blogimages/button200x200of.gif"
)
Then it loads that image into a hidden area on the page so that the user doesn't see it until they are supposed to.

Drives you nuts doesn't it?



We all hate waiting for site data to download or for content to change on a page. Preloading images can help alleviate that problem by downloading the images into the users cache before they are needed.
I use this exact script to get my fancy blog button loaded so that when the user mouses over the button it can display the fancy, but large GIF file immediately.

The blog button that you see without interaction is a very small file, but to have the animation that I have when you mouse over my button it required having a 1.1MB GIF picture.

If I hadn't preloaded the GIF the user would have to wait anywhere from a couple of seconds to a minute depending on the their connection speed just to see my cool animation. (As you may have had to with this example.)
The preloading of my blog button saves the user from waiting so that when they hover over my button it is ready to play and works immediately.


You can utilize to this code on your blog or site to produce a similar result. If you have multiple pages on your blog for example and one of them contains a lot of pictures you could use this script to preload those images so that the user doesn't have to wait to see them when they navigate to your "pictures" page. Or if you are utilizing mouse over images it can help the image to be ready the instant the user mouses over.


Simply replace the contents of the quotes with the source location of the image you want to preload:

            preload(
"Where your image is"
)
If you have multiple images that you want to load do this:

  preload(
"Where your image is" ,
                                "Where your second image is",
                                "Etc."
)
Then take all of the code and put it inside an HTML/JavaScript widget.

<div class="hidden">
        <script type="text/javascript">
<!--//--><![CDATA[//><!--
        var images = new Array()
            function preload() {
                for (i = 0; i < preload.arguments.length; i++) {
                    images[i] = new Image()
                    images[i].src = preload.arguments[i]
                }
            }
             preload(


"WHERE YOUR IMAGE IS" ,
                                "WHERE YOUR 2ND IMAGE IS",
                                "ETC."


)
            //--><!]]>
        </script>
    </div>



Enjoy!
As always post any comments or questions...

HTML L*^%$

Hello!
Greetings bloggers and other people who get to this blog via random search words on Google.
To figure out today's subject you are going to have to click here.


































































































































Click here to test a link that doesn't open a new window.


















































































































































































Linking! (But maybe you could guess that from the post title...)

src

How it works

I have mentioned the <a> tag a couple of times now and figured that we could do with a little demonstration of some of the things it can do... 

The code I used above to get you all the way down here was:

a) <a href="http://takesomecode.blogspot.com/2012/03/greetings-bloggers-and-other-people-who.html#allthewaydown">Here</a>

(The link that you clicked...)

and

b) <span id="allthewaydown">Linking! (But maybe yo.......)</span>

(The spot the link took you to...)

src

While you probably already utilize the <a> tag on your blog, you might not have known about the possibility of using it like I did.

The <a> tag can provide hyper-linking not only to other pages, but also within the same page or other pages.

Here is how it's done in a step-by-step guide:

*If you want to have a post with any code you'll need to edit the HTML of the post and add it there...

1) First you need to have the spot you want it to link to. I used the <span> tag to do this but you can also use the <img>, <div>, <a>, and many other HTML tags. The key is in assigning that tag a particular value as an "id" as I did.

<span id="allthewaydown"></span>

While a variety of characters can be used it is best to keep it simple with lowercase letters and no numerals. Numerals can't be used at the beginning of the phrase anyway so I tend to do without them as much as I can.

2) Place whatever title or image you wanted to link to in between the <span> (<img>, <div>) tags.

<span id="allthewaydown"> WHATEVER YOU ARE LINKING TO </span>

3) Create the link using the <a> tag.

Here is the formula for links: Whatever page contains the stuff you're linking to + # + the id name.

So...

<a href="blahblahblah#allthewaydown">Word to click</a>

4) Decide whether or not to have the link open in another page.

Use good judgement with this as many users might become frustrated if every link they click on your site results in a new window or tab. If you want the link to open in a new tab or window simply include: target="_blank" inside of the <a> tag.

<a href="blahblahblah" target="_blank">Words used for link</a>

5) Done. Be sure to test all your links that way users don't encounter any errors.

For an example of opening another window or tab click here.

For another in page example click here.

For easy to use code click here.

Thanks for reading!

Enjoy the code!

As always please leave a comment if you have any questions or requests for code!

-Mike @ Take Some Code

P.S. What do you think of my blog button? Pretty cool eh? (hold mouse over it)

Mouse Over Images

{Hello World}

Today I'm going to explain the the science of mouse over images. Mouse over images are an awesome way to add a little flavor to a site and make the site more dynamic, fun, and aesthetically pleasing.



As you can see I've used my own footer image from the bottom of my blog as an example. My header also provides an additional example. How does it work?


One might easily guess that there are at least two images at work when using a mouse over image.
Combine the two images with some HTML and JavaScript and voila!


Now before you panic and runaway thinking this is too difficult for you... Look at all of the code for the image above:


<a href="http://takesomecode.blogspot.com" target="_blank">
            <img src='http://www.navsounds.com/blogimages/footerflat.png' alt="Take Some Code"
            style="border: 0px; width: 900px; height: 100px;" 
            onmouseover="this.src='http://www.navsounds.com/blogimages/footerof.png';"
            onmouseout="this.src='http://www.navsounds.com/blogimages/footerflat.png';" />
</a>


Let's break it down.


First of all, any spaces or line breaks tend to be ignored in HTML with only a few exceptions, and I have indented the code only to make it easier to read and understand. 


I'm going to skip over the basics of the <img> tag because I already covered it in my last post here.
In that post I talked about various attributes that you can give to an <img> tag. Two more attributes you can use are the:


onmouseover="this.src='http://www.navsounds.com/blogimages/footerof.png';"


&


onmouseout="this.src='http://www.navsounds.com/blogimages/footerflat.png';"


These attributes allow you to use some inline JavaScript for an <img> tag. And in this case the only thing that we want to have happen when the user moves their mouse over the image is to change the image.

Step by Step Guide:

1) You'll need two images for it to work and they'll need to be the exact same size otherwise it could look awful... Another tip is that you'll want the images to be similar except for a change in color of something in the image just like I changed the font color for my images. You can always experiment to find a suitable change.

2) Next you'll need to upload the two images to somewhere online that way they have a source.

It is best to have a naming scheme for your images that you can understand easily so as not to confuse yourself. In my example I have footerflat.png as the original image and footerof.png for the mouse over image. footerof.png to me means footeroverflat.png and it is the naming scheme that I use frequently and it works for me.

3) Next is the code itself.

onmouseover=""  is HTML and in between the quotes you are inserting JavaScript. The JavaScript used for this is " this.src='whatever your source is'; " HTML is rather forgiving if you happen to make a typo or not follow proper etiquette as I mentioned in my last post. However JavaScript is less forgiving and often needs to be exactly correct. When ending a line of code in JavaScript you end it with the " ; " semi-colon character.

"this" in JavaScript is referring to the HTML element that it is typed into and in this case the image.

"src" stands for source and is the location of your image. 

In JavaScript you can change attributes of an image by first specifying the image(this) and then what attribute to change after a "."

this . src

Be sure to format the code correctly like this:

"this.source='(use single quotes inside of the double quotes to prevent the code thinking that you are done)'   ;   "

Put it all together and eliminated the extra spaces:

onmouseover="this.src='imagelocation';"

4) Now your image will change when the user mouses over the image, but to make sure it changes back to the original image when the mouse leaves you need to tell it to do that with this code:

onmouseout="this.src='imagelocation';"

5) Put it all inside your first <img> tag.

6) Place all of the code where you want the images to show up on the page. 

7) Done.

Here is some easy code to use for yourself:

<a href="PLACE YOUR LINK ADDRESS HERE" target="_blank">

            <img src='FIRST IMAGE LOCATION' alt="IMAGENAME"

            style="border: 0px; width: WHATWIDTHpx; height: WHATHEIGHTpx;" 

            onmouseover="this.src='SECOND IMAGE LOCATION';"

            onmouseout="this.src='FIRST IMAGE LOCATION" /></a>

Thanks for reading!

Enjoy the code!

As always please leave a comment if you have any questions or requests for code!

-Mike @ Take Some Code

Blog Buttons

Hello again!
Today we are going to explore the code behind a blog button like this:



{Grab My Button}

<center><a href="http://takesomecode.blogspot.com" target="_blank"><img src='http://www.navsounds.com/blogimages/button200x200f.png' alt="Take Some Code" style="border: 0px; width: 200px; height: 200px;"/></a></center>


Blog buttons on their own are simple and require the use of only one html element that most bloggers are familiar with which is the <img> tag.  
The code I used to display everything above is as follows:<center>        {Grab My Button}        <br />        <a href="http://takesomecode.blogspot.com" target="_blank">        <img src='http://www.navsounds.com/blogimages/button200x200f.png' alt="Take Some Code"             style="border: 0px; width: 200px; height: 200px;" />        </a>        <br />        <textarea id="buttoncode" cols="21" rows="3" readonly="readonly">&lt;center&gt;&lt;img src='http://www.navsounds.com/blogimages/button200x200f.png' alt="Take Some Code" style="border: 0px; width: 200px; height: 200px;"/&gt;&lt;/center&gt;        </textarea></center>
It's probably pretty easy to figure out what the <center> and </center> tags do. They center everything in between. It is completely optional to use this part of the code, but images tend to look their best when they are centered on a page.
The {Grab My Button} is not code and only serves the purpose of creating a title above the image.
The <br /> tag is an empty tag which means it has no end tag and is thus self containing and it is used to indicate a line break. The <img> tag is also an empty tag since it has no ending and instead ends like this <img />. <br> is often an acceptable way to right this code, but to web designers the correct way is <br />. Writing it as <br> would be similar to be writing "right" instead of "write" like I did in the last sentence.
Now there are some weird symbols and characters going on inside of the text area and they are just the proper way to write the < and the > when they are not meant to be used by the browser, but only displayed to the user. (In other words when you don't actually want it to display an image or center everything in the text area) You can do without these characters and just use the < or >, but to ensure maximum readability to a variety of users and browsers its best to do it as I have.
I won't explain the <a></a> tags today, but suffice it to say they provide the link for the blog.
The <img> tag. 
<img src='http://www.navsounds.com/blogimages/button200x200f.png' alt="Take Some Code"             style="border: 0px; width: 200px; height: 200px;" />
It can contain many properties and the order that properties are written doesn't matter. The first property or attribute that I use is the "alt" attribute.
alt="Take Some Code"
The  "alt"  attribute is where you put an alternate name for the image in the event that the image can't be loaded or found. The text contained in the quotes would be displayed instead. Following the  "alt"  attribute I follow with the "style" attribute. 
style="border: 0px; width: 200px; height: 200px;"
The  "style" attribute is the place to specify the images width, height, border, padding, and many other styling properties. Many people like to forget the "style" attribute an just write border, width, and height  on their own. Again most of the time it may not matter, but to ensure that a variety of browsers and a variety of versions of those browsers can all display the image accurately it is best to use proper code etiquette and place all styling of the image inside of the "style" attribute.
The <textarea> tag
<textarea id="buttoncode" cols="21" rows="3" readonly="readonly"></textarea>
To display a box as I have under the image tag you can specify a text area.The attributes I am utilizing are the "col", "rows", "id", and "readonly".
The "col" attribute specify how many characters wide the text area should be and a good match for a 200px wide image is 21 columns.The "rows" attribute specify how tall the text area should be in text lines.The "id" portion can be used in many HTML elements and assigns a specific name to the element. I'll get into this another day.The "readonly" attribute is pretty self explanatory, but just in case it makes it so that the user cannot change the text in the field, but only read it or copy it.
Everything that is placed between the <textarea> and </textarea> tags will be included in the text field.
The end.
As always if there are any questions please ask in the comments section!Any requests for tutorials are also very welcome.
-Mike @ Take Some Code

HTML Basics

Introductions...

Hello my name is Mike and I am the wonderfully fantastic husband of Alyx from Everyday is a New Adventure.

I have created this blog as a means of sharing HTML, javaScript, CSS, and other types of code.

Followers will receive daily ideas and code tips to improve their own blog and learn some web design in the process.

Without further ado... I will now introduce HTML.

HTML is a computer programming language designed for the world wide web.

It is also an acronym that stands for Hyper-text Markup Language.

Those who remember the beginnings of the internet will remember a time when dial-up abounded with it's silly tones and websites were plain and boring.Most websites consisted of just text and maybe a few pictures and standard links.

The term mark up refers to adding marks or annotations to a document so that they are not displayed, but rather show the browser how to display something.

HTML consists of elements which each tell the browser to do something different.
You use many of them already I'm sure while blogging such as the break element <br /> or the image element <img... />. A web browser's job such as Google Chrome, Firefox, IE, or Safari is to read a webpage file like "index.html" and then display the page as it says to in the file.

A webpage can be created in just 9 lines of code:
<html>
<head>
<title>Title of your webpage
</title>
</head>
<body>
Whatever you want to display on the page
</body>
</html>

Now to explain it.
<html> - tells the browser that everything after that line is part of the webpage.
<head> - tells the browser that after this line is where you can put stuff that you don't want to show up in the body.
<title> - creates the title of the webpage and </title> ends the title.
</head> - ends the head section.
<body> - begins the body section where you put all of the pages content including pictures, text, links, and more.
Between the <body> and </body> is content.
</body> - closes the body section
</html> - ends the webpage.

And that's it. To create your own webpage all you would have to do is put these 9 lines of code into a standard text document, and then rename the extension from "textdocument.txt" to "textdocument.html" and now you have created a webpage.

Here is a step by step guide:
1) Create a text document on PC or MAC
2) Edit the document in a text editor such as Notepad (PC) or TextEdit(MAC)
3) Copy the code above by selecting it pressing Ctrl + C or Apple key + C
4) Paste the code in the text document by pressing Ctrl + V or Apple key + V
5) Save the text document and close it
6) Rename the text document from "TextDocument1.txt" to "whateveryouwant.html"
7)Done. Double click on the new file to open it in your default browser.
or
YouTube tutorial made by me... Enjoy the background music because I made that too...

That's all for today... I don't want to bore you with too much code, but for those looking for a freebie webpage built just like the example above Take Some Code here.

Have a good one!