asked on

Javascript images onmouse

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

Blomholm

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

Kin Fat SZE

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

Blomholm

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.

sunithnair

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

Kin Fat SZE

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

ASKER CERTIFIED SOLUTION

Kin Fat SZE

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial