Article | HTML/JavaScript Tutorial | Feb 2009 | M.McKennedy
So you want to know how to change a background image when a link is hovered over and back to the original onMouseOut but you don’t know much HTML and/or JavaScript? Perfect… take a look at this simple tutorial on how to use the Document Object Model (DOM), the onMouseOver and onMouseOut event handlers and a bit of JavaScript to make the magic happen.
Now before I jump into this I must say. I am not an expert in JavaScript nor HTML but I was bored today so I decided that I wanted to create a “onMouseOver” event to trigger the background image of a Div to display add odd image of myself (this is for my personal website of course, and all in good fun) when my name is hovered over with the mouse pointer. I wanted the image to appear as the background while keeping the text of the paragraph “on top” of the image, so it has looks like I am trapped beneath the text, yes, I know…not the most appropriate use of my time but it was enjoyable. As the mouse pointer is moved from the link the image goes back to a white background.
I do understand that there are many different ways to achieve this same effect. Some “better” than others. So if you have come here to add snotty comments about crappy HTML, JavaScript or CSS coding then you should just leave now. (Well, of course you can stay and read on…just don’t leave any negative feedback unless you have something constructive to go with it. If you know of other ways to achieve the image roll over effect then please feel free to post and post often!
I searched various forums and found plenty of different methods posted by a variety of different skill leveled authors but none that suited my “copy and paste” desires. There were a host of HTML tutorials on how to change the background color when a link was clicked. Tons of posts where the subject of the post and/or article was lost in a blur of childish bickering over coding semantics. I was looking for a quick and easy way so I reworked my search term and entered them over and over into the almighty Google to no avail. I needed to dig in to find out how it all worked so I changed my search terms to “HTML Document Object Model “. If I was going to do this I needed to learn about how HTML page elements can be accessed and therefore manipulated.
Eventually I stumbled upon (and in hindsight should have been the first place I looked) http://www.w3schools.com/ and specifically their section on the HTML Document Object Model – http://www.w3schools.com/htmldom/default.asp – I was able to figure it out and it’s really quite simple. Here is a link to what I did – hover your mouse over the word Michael in the first paragraph to watch the image appear. Move your mouse pointer away from the link to watch the background return to white.
Below are two static images of what happens with the mouse over, click on them for a larger view or just go to McKennedy.org and see it for yourself.
Hover Over This Link To Change The Div's Background Image (click for larger view)
Hovering Over The Link Causes The onMouseOver Event To Change The Background Image Of The Div
If you want to practice this on your own here are links to the two images:
Michael
Spacer
Here is how I did it.
<html><title></title><body><head>I put following section between the head tags – like this</head><body></html> tags:
<!– Image Roll –>
<script type=”text/javascript”>
function changeStyle()
{
document.getElementById(“imageRoll”).style.backgroundImage=”url(images/profile/from-above-thumbs-up.jpg)”;
}function changeStyleBack()
{
document.getElementById(“imageRoll”).style.backgroundImage=”url(images/spacer-2×2-white.jpg)”;
}
</script>
<!– End Image Roll –>
The Div that changes background when the link is hovered over is below: This belongs somewhere between the <body></body> tags.
<div id=”imageRoll” style=”background-repeat:no-repeat”>
<p style=”font-size: 1.2em”>Some Opening Title – Something BOLD – Eye Grabbing</p>
<p>Here is where I write some text, yes, some text and then I put some more and try to use words that are more than five characters. My name is <a href=”#” onmouseover=”changeStyle()”; onmouseout=”changeStyleBack()” title=”Michael Gives Two Thumbs Up To His Own Web Site>Michael</a>,
and if this code was live then when you hovered over the word “Michael” you would have seen an image of me appear beneath this text.</p>
</div>
To put the entire thing together:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>onMouseOver Change Div Background Image Example</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<!– Image Roll Over Code –>
<script type=”text/javascript”>
function changeStyle()
{
document.getElementById(“imageRoll”).style.backgroundImage=”url(images/profile/from-above-thumbs-up.jpg)”;
}
function changeStyleBack()
{
document.getElementById(“imageRoll”).style.backgroundImage=”url(images/spacer-2×2-white.jpg)”;
}
</script>
</head>
<body>
<div id=”imageRoll” style=”background-repeat:no-repeat; width:348px; height:261px”>
<p style=”font-size: 1.2em”>Some Opening Title – Something BOLD – Eye Grabbing</p>
<p>Here is where I write some text, yes, some text and then I put some more
and try to use words that are more than five characters. My name is <a href=”#” onmouseover=”changeStyle()” onmouseout=”changeStyleBack()” title=”Michael Gives Two Thumbs Up To His Own Web Site”>Michael</a>,
and if this code was live then when you hovered over the word "Michael" you
would have seen an image of me appear beneath this text.</p>
<p>I set the height in the style of this div because this text wasn’t filling
the space to allow the entire background image to appear when the link is
hovered over.</p>
</div>
</body>
</html>
The code above is valid XHTML Transitional 1.0. and has been tested in Firefox 3.0.6, IE 7, Google Chrome, Opera 9.2, and Safari (For Windows) 3.2.1.
I thought about pre-loading the image using JavaScript or CSS but then I realized that the image itself is only 18.9 KB therefore there should not be much time spent waiting for the background image to load.
So there it is…and it’s pretty simple too. A short and sweet way to solve the big JavaScript onMouseOver onMouseOut Background-Image changing mystery. Copy, Paste and modify the above code to fit your needs.
