Welcome to the home of the one and only JavaScript Guru. I will from here on our take you under my wing in the art of JavaScript. For the lesson at hand we will be beginning with an Image control in our HTML and see what we can do from there.

If you do not have an Image to work with or would like to follow along in the code as well, please feel free to download the free source code located below.

Once we have created and set an image in our HTML, we must have a source for that image. What if we went ahead and were able to change the source of that Image control without the need to reload the page.

First let’s go and declare that we will be using JavaScript within the HTML page by adding the appropriate script tag.

We used over 10 web hosting companies before we found Server Intellect. They offer dedicated servers, and they now offer cloud hosting!

Code Block
Ask a Question
Download Source
HTMLPage.htm
Setting Script Tag
<head>
<script type="text/javascript" language="javascript">
</script>
    <title></title>
</head>
First we have the Image control with a source and let go ahead and name it to “the_image.”
Code Block
Ask a Question
Download Source
HTMLPage.htm
Create Image Control
<img name="the_image">
Now we can go ahead and change the Image by changing the src by using the “OnMouseOver” attribute in which we will be making our JavaScript call. We will be taking the document object and calling the image in question, the “the_image”. We will then be calling the src property of the Image and setting it to another URL or source.

We used over 10 web hosting companies before we found Server Intellect. Our new server with cloud hosting,was set up in less than 24 hours. We were able to confirm our order over the phone. They responded to our inquiries within an hour. Server Intellect’s customer support and assistance are the best we’ve ever experienced.

Code Block
Ask a Question
Download Source
HTMLPage.htm
OnMouseOver Event
<img name="the_image"
     src="sunset.jpg"
     onmouseover="document.the_image.src ='photography_image.jpg';" 
Go ahead and run the application to see what we have done so far, be sure to save your work.

Now we are left with a dilemma, the image remains with the source of the new Image even with the mouse away from the Image. What we need to do to remedy this is set another Property to make an additional call, the “OnMouseOut”.

Similar to the “OnMouseOver”, we will now be creating an event at the occurrence of the mouse being removed from the Image control. Just as we did before, we will be setting the source back to the original Image like so:
Code Block
Ask a Question
Download Source
HTMLPage.htm
Image control
<img name="the_image"
     src="sunset.jpg"
     onmouseover="document.the_image.src ='photography_image.jpg';" 
     onmouseout="document.the_image.src='sunset.jpg';"/>
And there you have it; we have just used JavaScript to cycle between images without the need to refresh the page. If you have any other questions or concerns and have not yet downloaded the source code for this project, I strongly suggest doing so. Seeing it in its entirety can help clear up many of your questions. Thank you for your time and I hope this has been helpful, take care.

We stand behind Server Intellect and their support team. They offer dedicated servers, and they are now offering cloud hosting! 

JSImageTut.zip