How to Change a Picture in JavaScript for Firefox
JavaScript is a popular client-side scripting language, meaning it runs in the website visitor's browser software. JavaScript enhances web page content by adding dynamic functionality that responds to user actions. Firefox is a popular free open-source web browser program, preferred by many users for its advanced security, early adoption of tabbed browsing and many available extensions and plugins. Writing JavaScript code that is compliant with the broadly accepted W3C standards ensures that your code will be portable and support many browsers, including Firefox.
Other People Are Reading
Instructions
-
-
1
Change a picture with JavaScript by identifying the image you wish to replace and then dynamically changing the "src" attribute of the HTML element, which specifies the image's source file.
Include an "id" attribute in the "img" tag for the picture you wish to change. When you write the HTML for your web page, you will create code such as this:
<img src="images/closed-box.jpg" alt="picture of a box" title="My Favorite Packing Crate" id="switchablePic" />
-
2
Type your JavaScript code functions. Implement an event utility function to handle events, such as the event that fires when the page finishes loading and the events that fire when the mouse pointer rolls over or back out of the image. There are a number of very handy functions available on the Internet that you can use (see Resources). For this example, imagine that you are using the addEvent function written by Dean Edwards. This function takes three arguments: the object element to which the event will be attached, the event that will be handled and the name of the function that will handle the event. Use it to initialize the picture switching functions when the page load event fires.
addEvent(window, 'load', initializeRollover);
-
-
3
Mouse events trigger your rollover function. Attach mouseover and mouseout events to the "switchablePic" image. When those events fire, they will trigger the functions that switch the image's source. Force the browser to preload the rollover image by defining it as a new image object; this prevents a delay effect that sometimes occurs when the image source is switched before the replacement image has finished loading.
function initializeRollover(){
// attach the event listeners
var picture = document.getElementById('switchablePic');
addEvent(picture, 'mouseover', rollover);
addEvent(picture, 'mouseout', rollout);// preload the rollover image into the browser
var replacementImageSource = 'images/open-box.jpg';
var img = new Image();
img.src = replacementImageSource;
} -
4
Create a rollover function that changes the source file of the image from a picture of a closed box to a picture of an open box. A well-written addEvent function will allow you to employ the "this" keyword to quickly and easily reference the object that called the function.
function rollover(){
this.src = 'images/open-box.jpg';
} -
5
Implement a rollout function that switches the source file back to the picture of a closed box when the mouse pointer leaves the image.
function rollout(){
this.src = 'images/closed-box.jpg';
} -
6
Wrap your script in an HTML script element and include it in the HTML head of your document, along with a link to the event handling function of your choice.
<script type="text/javascript" src="includes/events.js"></script>
<script type="text/javascript">
//your script goes here
</script> -
7
Portable, cross-browser scripting. View the page in your Firefox web browser to test your script. The image will switch to its replacement when you hold your mouse pointer over it; and it will switch back when you remove your mouse pointer.
-
1
References
Resources
- Photo Credit computer image by PinkShot from Fotolia.com computer image by blaine stiger from Fotolia.com blue computer mouse image by Paolo Frangiolli from Fotolia.com browser (child with notebook sit green grass) image by STOLBTSOV ALEXANDRE from Fotolia.com
