Changing Image Source in Javascript

Submitted by: 
Language: 
Visitors have accessed this post 581 times.

This project will teach how to change image source using basic javascript code. onClick event, image will automatically change.

Here's the full code.

  1. var img_tracker = 'chrome';
  2. function changeImg(){
  3. var image = document.getElementById('browser');
  4. if(img_tracker == 'chrome'){
  5. image.src = 'images/firefox.jpg';
  6. img_tracker = 'firefox';
  7. }else{
  8. image.src = 'images/chrome.jpg';
  9. img_tracker = 'chrome';
  10. }
  11. }

We set an image tracker that tells what image is displaying. If image tracker is chrome, onClick event, image will change to firefox. Same event if image tracker is firefox.

Hope you learn from this.


Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.