• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 265
  • Last Modified:

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

0
R8VI
Asked:
R8VI
  • 3
  • 2
1 Solution
 
BlomholmCommented:
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

0
 
fsze88Commented:
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

0
 
BlomholmCommented:
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.


0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
sunithnairCommented:
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

0
 
fsze88Commented:
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
0
 
fsze88Commented:
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

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now