javascript mouseOver code

Question

Pretty simple function here but not working. Just started with Javascript so be gentle with me. Also does anyone know of any good community forums for beginners. I feel this is such a simple question to ask on here, but maybe not.

<html>
<head>
<script type="text/javascript">

var img;

function mouseOver()
{
    alert(img);
    img.src ="button_over.jpg";
}
function mouseOut()
{
    img.src ="button_out.jpg";
}

function init()
{

    img = document.getElementById("buttonWrapper").getElementsByTagName('img')[0];  
}
</script>
</head>

<body onLoad="javascript:init()">
    <div id="buttonWrapper">
        <img border="0" src="button_out.jpg" width="62" height="74" onmouseover="mouseOver()" onmouseout="mouseOut()" / >
    </div>
</body>
</html>

This is a perfectly fine venue for beginner questions. Anything well-formed, no matter the expertise level, is welcome here :) — David, Feb 04 '11 at 21:43
On that note... Define "not working." Does the code not fire at all? The `alert()` for example never gets called? — David, Feb 04 '11 at 21:44
Yes, please select an answer. When people take time out of their day to answer your question, you should be considerate enough to select the correct one. If there are no answers that satisfy you, perhaps you should think about rephrasing the question. — camainc, Mar 09 '11 at 19:25

score 3 · Answer 1 · answered Feb 04 '11 at 21:50

3

Live demo: http://jsfiddle.net/jTB54/

Just put this code at the bottom of the page (right before </body>) and you won't need an onload handler:

var img = document.getElementById("buttonWrapper").getElementsByTagName('img')[0];

img.onmouseover = function() {
    this.src = "button_over.jpg";
}

img.onmouseout = function() {
    this.src = "button_out.jpg";
}

answered Feb 04 '11 at 21:50

Šime Vidas

182,163
62
281
385

Do I still need it inside my tag – Chapsterj Feb 04 '11 at 22:11
Great works like a charm. So when javascript is in the head of a page you have to use the body onLoad event. If you put all your javascript in the body itself you don't have to wait for it to load. IS this correct in thinking. Does this not bloat the overall load of the page. Whats the advantage and disadvantages. – Chapsterj Feb 04 '11 at 22:19
@user Yes, you have to put it inside an SCRIPT element. JavaScript code that is embedded into an HTML document has to be inside SCRIPT. To answer your second question: The browser parses the HTML code sequentially. If you put the JavaScript code at the bottom of the page, then all the HTML elements have already been parsed and you are safe to execute JavaScript code immediately. Also, read here: http://developer.yahoo.com/performance/rules.html#js_bottom – Šime Vidas Feb 04 '11 at 22:25

score 2 · Answer 2 · answered Feb 04 '11 at 21:47

I don't know if this will fix your problem, but wouldn't it be easier to do something like this?

<html>
<head>
<script type="text/javascript">

function mouseOver(img)
{
    img.src ="button_over.jpg";
}
function mouseOut(img)
{
    img.src ="button_out.jpg";
}

</script>
</head>

<body>
    <div id="buttonWrapper">
        <img border="0" src="button_out.jpg" width="62" height="74" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" />
    </div>
</body>
</html>

score 1 · Answer 3 · answered Feb 04 '11 at 21:50

JavaScript is a solution for your issue but I would recommend a different approach: Use CSS instead!

Here a tutorial I found on Google: http://inspectelement.com/tutorials/create-a-button-with-hover-and-active-states-using-css-sprites/

This also will solve the 'preloading issue' you will face, means: When you go with the mouse over the button the hover image needs time to load. the result will be a gap in the displaying of the images (for a half second there will be no image displayed).

score 0 · Answer 4 · answered Feb 04 '11 at 21:51

I would suggest learning and using JQuery:

http://jquery.com/

There are a lot of good tutorials on the site, and you can Google for more.

Here is a snippet from a site that has a few buttons that have mouseover, mouseup, mousedown, and hover states. Each button state has its own image, of course:

 $(function () {
    $("#btnPrintSheet").mousedown(function () {
        $(this).attr("src", BASE_IMG_PATH + "printDN.gif");
    }).mouseup(function () {
        $(this).attr("src", BASE_IMG_PATH + "printOV.gif");
    }).hover(function () {
        $(this).attr("src", BASE_IMG_PATH + "printOV.gif");
    }, function () {
        $(this).attr("src", BASE_IMG_PATH + "printUP.gif");
    });
 });

You can add a click event handler to that as well...

score 0 · Answer 5 · answered Mar 16 '21 at 05:56

The function init() can be removed since we don't really need it. Below is a shorter version of your code.

<html>

<body>
  <div>
    <img src="button_out.jpg" width="62" height="74" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" / >
  </div>
</body>
  
<script>
var mouseOver = img => {
  img.src ="button_over.jpg";
}
var mouseOut = img => {
  img.src ="button_out.jpg";
}
</script>
  
</html>

score -4 · Accepted Answer · answered Feb 04 '11 at 21:44

-4

Do yourself a HUGE favor - if you're just getting started with Javascript, learn jQuery. It will drastically simplify what you're trying to do. Go to here

In this case, you can easily tie a click event to your img tag with examples here.

answered Feb 04 '11 at 21:44

n8wrl

19,439
4
63
103

Agreed. Javascript != jQuery and the question was specifically for help with Javascript. – khr055 Feb 04 '11 at 21:48
While it is true I did not answer his specific question, I surely do wish someone would have pointed me to jQuery a few years back when I got started. I guess I was hoping to make his javascript-life easier long-term. – n8wrl Feb 04 '11 at 21:51
1

How can you say Javascript != jQuery? jQuery is a Javascript library. – camainc Feb 04 '11 at 21:52
2

jQuery is JavaScript. JavaScript isn't jQuery. – Jonathon Faust Feb 04 '11 at 21:55
2

@n8wrl - it would be great as a comment, not an answer to his problem. – Jonathon Faust Feb 04 '11 at 21:55
1

My next task is to learn jQuery but I figured I want to understand the basics of javascript first before I jump into jQuery. But I do want to learn it also. Thanks to all for the help here. – Chapsterj Feb 04 '11 at 22:21

javascript mouseOver code

6 Answers6

Linked