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
– David, Commented Feb 4, 2011 at 21:43
On that note... Define "not working." Does the code not fire at all? The alert() for example never gets called? — David
– David, Commented Feb 4, 2011 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
– camainc, Commented Mar 9, 2011 at 19:25

Šime Vidas · Accepted Answer · 2011-02-04 21:50:19Z

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 4, 2011 at 21:50

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chapsterj Over a year ago

Do I still need it inside my <script type="text/javascript"></script> tag

Chapsterj Over a year ago

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.

Šime Vidas Over a year ago

@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: developer.yahoo.com/performance/rules.html#js_bottom

MarioVW · Accepted Answer · 2011-02-04 21:47:06Z

2

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>

answered Feb 4, 2011 at 21:47

MarioVW

2,5923 gold badges26 silver badges32 bronze badges

Comments

Daniel K · Accepted Answer · 2011-02-04 21:50:11Z

1

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).

answered Feb 4, 2011 at 21:50

Daniel K

7,1012 gold badges29 silver badges35 bronze badges

Comments

camainc · Accepted Answer · 2011-02-04 21:51:25Z

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...

Sorya · Accepted Answer · 2021-03-16 05:56:51Z

0

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>

answered Mar 16, 2021 at 5:56

Sorya

941 silver badge2 bronze badges

Comments

n8wrl · Accepted Answer · 2011-02-04 21:44:58Z

-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 4, 2011 at 21:44

n8wrl

19.9k4 gold badges70 silver badges106 bronze badges

6 Comments

khr055 Over a year ago

Agreed. Javascript != jQuery and the question was specifically for help with Javascript.

camainc Over a year ago

How can you say Javascript != jQuery? jQuery is a Javascript library.

Jonathon Faust Over a year ago

jQuery is JavaScript. JavaScript isn't jQuery.

Jonathon Faust Over a year ago

@n8wrl - it would be great as a comment, not an answer to his problem.

Chapsterj Over a year ago

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.

|

Collectives™ on Stack Overflow

javascript mouseOver code

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related