We help IT Professionals succeed at work.

Javascript images onmouse

R8VI
R8VI asked
on
Medium Priority
278 Views
Last Modified: 2012-05-06
Hi I have the following javascript and html

function movepic(img_name,img_src) {
document[img_name].src=img_src;

html
  <a href="" onmouseover="movepic('button','pic-off.gif')"
                onmouseout="movepic('button','pic-on.gif')">
                <img name="button" src="pic-off.gif" alt="Image"></a>

what I want to do is the following.

Have something along the lines of
1) just load pic 1 by default but according to variable x, so if x=1 then pic1 is loaded, else if x=2 then pic 2 is loaded.
2) then when someone hoovers over the image display a totally different pic which is pic 5

Thanks,

R8VI

Comment
Watch Question

Commented:
Here's a working sample:
<html>
<head>
	<script type="text/javascript">
	
	var x = "cross.png";
	
	function img_mouseover(img) {
	    img.src = "magnifier.png";
	}
	function img_mouseout(img) {
	    img.src = x;
	}
	function init() {
	    document.getElementById("image").src = x;
	}
	
	</script>
</head>
<body onload="init()">
 
<img src="" id="image" onmouseover="img_mouseover(this)" onmouseout="img_mouseout(this)" />
 
</body>
</html>

Open in new window

CERTIFIED EXPERT

Commented:
using img onload event should be easier and handling

<script language="javascript">
var x ;
var bloaded = false;
x = (Math.round(Math.random())+1);
function reloadimgevent(imageObj){
 
    if (x == 1){
      imageObj.src="http://www.kennam.com/images/image-1.jpg"
    }else if (x == 2){
      imageObj.src="http://www.kennam.com/images/image-2.jpg"
    
    }
    bloaded = true;
}
 
function mouseoverevent(imageObj){
  imageObj.src="http://www.kennam.com/images/image-3.jpg";
 
}
</script>
 
 
 
<img src="http://www.kennam.com/images/dot.gif" onload="if (!bloaded){reloadimgevent(this)};" onmouseover="mouseoverevent(this);" onmouseout="reloadimgevent(this);">

Open in new window

Commented:
I tried using onload of image at first, but couldnt get it to work then =/
Somehow it seemed like onload got fired each time I updated the image's src, which lead to the mouseover image not showing.


Is this what you are looking for?
<html>
<head>
        <script type="text/javascript">
        var x = 1;
        function ChangeImage(src) {
            img.src = "pic5.gif";
        }
        function LoadDefault() {
            if(x==1)
            	document.getElementById("button").src = "pic1.gif";
	    else
            	document.getElementById("button").src = "pic2.gif";
        }
        </script>
</head>
<body onload="LoadDefault();">
<a href=""><img src="" name="button" id="button" alt="Image" onmouseover="ChangeImage(this);" onmouseout="LoadDefault();" />
</body>
</html>

Open in new window

CERTIFIED EXPERT

Commented:
I tried using onload of image at first, but couldnt get it to work then ?
No, I tried on IE6,FF3, SAFARI, OPERA  they are works
onload got fired each time I updated the image's src?
We can control it by boolean bloaded , I works fine also..
?? why you ensure not works.
Also we could fire onerror event if wrong path of <img> tag src
What's your ie,ff version?
If using onload event on body tag, It may inconvenience if include in a js file... we should add this onload event on body tag on every pages or add window.onload=function(){....} in js file
please try copy whole code snippet and place in .html file. I am sure it works
more reference about onerror and onload event please have a look http://www.w3schools.com/tags/html5_img.asp
CERTIFIED EXPERT
Commented:
Sorry, please add onerror event on img tag that handling wrong path or unreadable images from image.src
<script language="javascript">
var x ;
var bloaded = false;
x = (Math.round(Math.random())+1);
function reloadimgevent(imageObj){
 
    if (x == 1){
      imageObj.src="http://www.kennam.com/images/image-1.jpg"
    }else if (x == 2){
      imageObj.src="http://www.kennam.com/images/image-2.jpg"
 
    }
    bloaded = true;
}
 
function mouseoverevent(imageObj){
  imageObj.src="http://www.kennam.com/images/image-3.jpg";
 
}
</script>
 
 
 
<img src="http://www.kennam.com/images/dot.gif2" onerror="if (!bloaded){reloadimgevent(this)};" onload="if (!bloaded){reloadimgevent(this)};" onmouseover="mouseoverevent(this);" onmouseout="reloadimgevent(this);">

Open in new window

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.