onMouseClickOut

Discussion in 'JavaScript' started by blueparukia, Sep 17, 2007.

0
  1. #1
    OK, I have the rollover image established using the onClick Function.
    (when you click on the image it changes) I want to have it so when you click off the image (anywhere on the page), it restores. What is the unction to do this?

    Thanks,

    BP
     
    blueparukia, Sep 17, 2007 IP
  2. nico_swd

    nico_swd Prominent Member

    Messages:
    4,153
    Likes Received:
    344
    Best Answers:
    18
    Trophy Points:
    375
    #2
    Try onblur.
     
    nico_swd, Sep 17, 2007 IP
  3. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #3
    That doesn't seem to work.


    BP
     
    blueparukia, Sep 17, 2007 IP
  4. nico_swd

    nico_swd Prominent Member

    Messages:
    4,153
    Likes Received:
    344
    Best Answers:
    18
    Trophy Points:
    375
    #4
    After re-reading your question, I don't think there's an event for that.

    But you could do the following.

    Onclick, change the image, and add an onclick even to body, which restores the image, and changes itself to an empty function.

    
document.body.onclick = function()
{
    document.getElementById('image').src = /* your old source */;
    document.body.onclick = function() {}
}
    Code (javascript):
     
    nico_swd, Sep 17, 2007 IP
  5. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #5
    Well, I understand the basics of how that works, but don't know what to put as my "old source".
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>BeZDredge</title>
<script type="text/javascript">
document.body.onclick = function()
{
    document.getElementById('image').src = /* your old source */;
    document.body.onclick = function() {}
}
</script>
<script type="text/javascript">
function imagerestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function preload() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=preload.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function locateobject(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=locateobject(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function rollover() { //v3.0
  var i,j=0,x,a=rollover.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=locateobject(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onLoad="preload('images/welcomefolder2.png')">
<div id="pageContent">
<!-- START OF PANE CODE -->

<div id="dhtmlgoodies_xpPane">
	<div class="dhtmlgoodies_panel">
		<div>
			<!-- Start content of pane -->
			Welcome to BeZDredge. <br>
                        Bring your website into the future.
			<!-- End content -->
		</div>
	</div>
	<div class="dhtmlgoodies_panel">
		<div>

                  <a href="index.html">Home</a><br>
                  <a href="forums">Forums</a> <br>
                  <a href="contact.html">Contact</a><br>
                  <a href="about.html">About Us</a> 
                    
			
		</div>
	</div>

	<div class="dhtmlgoodies_panel">
		<div>
			<!-- Start content of pane -->
			<b>index.html</b><br>
			HTML Document<br><br>
			Date modified: Sep. 16th 2007
			<!-- End content -->
		</div>
	</div>

</div>
<script type="text/javascript">
initDhtmlgoodies_xpPane(Array('Some Quick information','Other places','Details'),Array(true,true,false),Array('pane1','pane2','pane3'));
</script>
<!-- END OF PANE CONTENT -->
<div id="otherContent">
	<div class="textContent" width="100%">
	<br><center><img src="http://www.bezdredge.net/index/images/logo.png"></center>
		</div>

    <div onBlur="imagerestore()" onClick="rollover('folder','','images/welcomefolder2.png',1)"><img src="images/welcomefolder1.png" alt="welcome to bezdredge" name="folder" width="174" height="47" border="0"></div></div>
</div>
</body>
</html>
    Code (markup):

    I am not even sure of where to put it all. :confused:


    Thanks ,

    BP
     
    blueparukia, Sep 17, 2007 IP
  6. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #6
    So where can I put that code? Please help....

    The functions used in the rollover are: imagerestore, preload, locateobject and rollover.


    Thanks,

    BP
     
    blueparukia, Sep 17, 2007 IP