Tag: web design

Posted on by

Changing Web Page Items Using JavaScript

This tutorial is designed for JavaScript newbies. It was originally written in 2009 and uses SWF objects, which are no longer supported in modern browsers. Regardless, the JavaScript can be adapted to work with any type of media.

I recently had a client who wanted a page with a SWF movie that could be changed to a different SWF by clicking on a button on the page. A while back, I did a project where the user could click a link and change the source of an image on the page using JavaScript, but changing an entire SWF seemed a little more difficult. The code to change the image to a different image looked like this:

<image id=”imagetochange” src=”pic1.jpg”>
<a href=”#” onclick=”imagetochange.src=’pic2.jpg'”>Change image</a>

This code was simple enough, so I tried modifying it to change the source of the SWF when I clicked the link. My code now looked like this:

<object id=”changemovie” type=”application/x-shockwave-flash” data=”flashmovie1.swf” width=”640″ height=”400″>
  <param id=”changethis” name=”movie” value=”flashmovie1.swf” />
</object>
<a href=”#” onclick=”changemovie.data=’flashmovie2.swf’; changethis.value=’flashmovie2.swf’;”>Change movie</a>

This worked in some browsers but it didn’t work in others, so I was forced to come up with a different solution. After some research, I was reminded of two JavaScript items that eventually made the whole thing possible: getElementById and innerHTML. After some tweaking, I ended up with a code that looked something like this:

<script type=”text/javascript”>
  function changeText() {
    document.getElementById(‘flashitem’).innerHTML = ‘<object type=”application/x-shockwave-flash” data=”flashmovie2.swf” width=”640″ height=”400″> <param name=”movie” value=”flashmovie2.swf” /> </object>’;
  }
</script>

<div id=”flashitem”>
  <object type=”application/x-shockwave-flash” data=”flashmovie1.swf” width=”640″ height=”400″>
    <param name=”movie” value=”flashmovie1.swf” />
  </object>
</div>
<a href=”#” onclick=”changeText();”>Change movie</a>

First, I created a JavaScript function called changeText(). Inside the function, I placed “document.getElementByID(‘flashitem’)”. This calls a function which searches the page for an element with the id of “flashitem”. Then I added “.innerHTML”, which tells the program that we are doing something with the innerHTML property of the specified element. I then set the value of the innerHTML property to the code for the SWF object I wanted to replace the original SWF, and closed the changeText() function. Now when the function is called, it will change the HTML inside a div with the id of “flashitem” to the code to place the new SWF on the Web page. Now I just needed to create the div and the link.

I created a new div with the code for the original SWF object inside and gave the div an id of “flashitem”. Outside the div, I then created a link to call the function changeText(), and it worked perfectly.

This article was originally published on Artistic Imposter Design.

Posted on by

Creating a Basic Web Page

This tutorial is designed for Web design newbies, to instruct in the creation of a simple Web page.

The first thing to know about Web site creation is that every Web page requires four things. These four things are an opening <html> tag, an opening <body> tag, a closing </body> tag, and a closing </html> tag. The markup for a basic Web page looks like this:

<html>
<body>

</body>
</html>

Earlier, I mentioned the word ‘tag’. A tag is an HTML formatting element used to tell the browser how to format and display the information contained in the Web page. Most tags come in pairs, hence the need for an opening <html> tag AND a closing </html> tag. Exceptions to this rule include the line break tag, <br />, and the image tag, <image src=”someImage.jpg” />. Information that you wish to be formatted with a certain tag is placed between the opening and closing tags.

Let’s begin by creating the basic Web page mentioned earlier. To create the file, you will need an HTML or text editor. Notepad (Windows) works well as a basic editor, but i prefer something with a few more features. I mostly use BBEdit on my Mac, but Notepad++ is a great Windows alternative. If you’re looking for a fully-featured program, Adobe Dreamweaver is the industry standard, but a great inexpensive alternative is HTML-Kit.

Many applications will automatically added things like the tags mentioned earlier, but in the interest of being thorough we’ll add everything manually. We’ll start with a blank document and save it as “index.html”. When a browser visits a Web address, the file it looks for is the file named index. If the browser unable to find this file, it will display a file tree of the files in the directory on the Web server related to that Web address. There are other methods to prevent the file tree from showing, but those are beyond the scope of this tutorial.

Now that your document is saved, we’re going to start adding things. The first thing we want to add to the blank page is the Document Type Definition (DTD) or doctype. Strictly speaking, the doctype is not required to create a Web page, but it IS required to create a well-formed Web page. The World Wide Web Consortium (W3C) defines several doctypes, but the one we will use for this example is the HTML5 doctype. The HTML5 doctype looks like this:

<!DOCTYPE html>

Next, we add the opening <html> tag and a new tag called the <head> tag. The document head is a place where information is stored that will not be displayed on the actual Web page. There are a lot of different things that can go in the head, but the only thing we want to put for now is the Web page’s title. So we add an opening <title> tag, then the page title. We’ll call this page “My First Web Page.” Then we add a closing </title> tag, a closing </head> tag, and an opening <body> tag. Our markup should now look like this:

<!DOCTYPE html>
<html>
<head>

<title>My First Web Page</title>

</head>
<body>

Once we have that, we just need to add some content to our page and close the <head> and <body> tags. Let’s add a paragraph that reads “I am learning to build Web sites and this is my first Web page.” To add a paragraph, we use another special tag, the <p> tag. So now we type: <p>I am learning to build Web sites and this is my first Web page.</p>, then type a closing </body> tag and a closing </html> tag. Your page should now look like this:

<!DOCTYPE html>
<html>
<head>

<title>My First Web Page</title>

</head>
<body>

<p>I am learning to build Web sites and this is my first Web page.</p>

</body>
</head>

Now, just save your document and open it in a Web browser. Congratulations! You now know how to build a basic Web page.

This article is an updated version of an article originally published on Artistic Imposter Design.