[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Javascript images onmouse

Posted on 2009-02-13
6
Medium Priority
?
256 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

0
Comment
Question by:R8VI
  • 3
  • 2
6 Comments
 
LVL 3

Expert Comment

by:Blomholm
ID: 23631384
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
 
LVL 15

Expert Comment

by:fsze88
ID: 23631811
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
 
LVL 3

Expert Comment

by:Blomholm
ID: 23631886
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 16

Expert Comment

by:sunithnair
ID: 23631924
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
 
LVL 15

Expert Comment

by:fsze88
ID: 23632056
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
 
LVL 15

Accepted Solution

by:
fsze88 earned 2000 total points
ID: 23633380
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question