CODEWITHSUNDEEP
javascript
Chapsterj
Chapsterj

Reputation: 6625

javascript mouseOver code

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>

Upvotes: 1

Views: 13830

Answers (6)

Sorya
Sorya

Reputation: 94

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>

Upvotes: 0

camainc
camainc

Reputation: 3810

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

Upvotes: 0

Šime Vidas
Šime Vidas

Reputation: 185933

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";
}

Upvotes: 3

Daniel K
Daniel K

Reputation: 7083

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

Upvotes: 1

MarioVW
MarioVW

Reputation: 2524

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>

Upvotes: 2

n8wrl
n8wrl

Reputation: 19765

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.

Upvotes: -4

Related Questions