...

View Full Version : OnClick and OnUnClick?



Bob Leny
07-29-2006, 10:51 PM
I have an image with an OnClick thingy. When you click it, it changes the images. No problems there, however, I want to make it so that if the user clicks on any thing else (even the background), the changed image would revert back to the first image.

I have the preloading script:



<script type="text/javascript">
<!--
var f1 = new Image();
f1.src = "folder_1.png";
var f2 = new Image();
f2.src = "folder_2.png";
-->
</script>


Then I have this for my image:


<a onclick="document.fol.src=f2.src"><img name="fol" src="folder_1.png"></a>


I hope this is enogh detail. If not please ask me to explain further.

How can I do this?

Thanks!

Bill Posters
07-29-2006, 11:43 PM
Use the onfocus and onblur methods.

Mr J
07-30-2006, 12:15 AM
Give the following a try


<script type="text/javascript">
<!--

function changePic(e){

obj=(!e?event.srcElement:e.target)

if(obj.nodeName=="IMG"){
document.images["fol"].src="folder_2.png"
}
else{
document.images["fol"].src="folder_1.png"
}


}

document.onclick=changePic


-->
</script>

<img name="fol" src="folder_1.png">

vwphillips
07-30-2006, 12:40 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
<!--
var f1 = new Image();
f1.src = "http://www.vicsjavascripts.org.uk/StdImages/Two.gif";
var f2 = new Image();
f2.src = "http://www.vicsjavascripts.org.uk/StdImages/One.gif";
var f3 = new Image();
f3.src = "http://www.vicsjavascripts.org.uk/StdImages/Four.gif";

var zxcEvtAry=[];

function ImgClick(zxcimg){
var zxcevt=window.event||arguments.callee.caller.arguments[0];
var zxceobj =zxcEventObj(zxcevt);
if (zxcimg){
if (!window['zxc'+zxceobj.id]){ window['zxc'+zxceobj.id]=true; zxcEvtAry.push([zxceobj,zxceobj.src]); }
zxceobj.src=zxcimg
}
Restore(zxceobj);
}

function Restore(zxcobj){
for (var zxc0=0;zxc0<zxcEvtAry.length;zxc0++){
if (zxcEvtAry[zxc0][0]!=zxcobj){
zxcEvtAry[zxc0][0].src=zxcEvtAry[zxc0][1];
}
}
}

function zxcEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
return zxceobj;
}

function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}

var zxcEvt=0;

function zxcAddEvt(zxco,zxcfun,zxcevt){
if (zxco['zxc'+zxcfun+zxcevt]){ return; }
zxco['zxcaddEvt'+zxcEvt]=window[zxcfun];
zxco['zxc'+zxcfun+zxcevt]=true;
zxcEventAdd(zxco,zxcevt,'zxcaddEvt'+zxcEvt);
zxcEvt++;
}

zxcAddEvt(document,'ImgClick','click')

-->
</script>

</head>

<body>
<a onclick="ImgClick(f2.src);"><img id="fol" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif"></a>
<br />
<a onclick="ImgClick(f3.src);"><img id="fol1" src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif"></a>

</body>

</html>

Kor
07-30-2006, 09:02 AM
Mr.J's code looks simplier. I should add to his code an identifier, if you indend to use that upon a single picture...:

if(obj.nodeName=='IMG' && obj.id=='myPic')
.....
.....
<img name="fol" id="myPic" src="folder_1.png">

If multiple, you can use an array or an object to set the src addresses and the ids.

Bob Leny
07-30-2006, 08:37 PM
I like this:


<script type="text/javascript">
<!--
function dbl(nav)
{
window.location = nav;
}

function changePic(e)
{
obj = (!e?event.srcElement:e.target);

if(obj.nodeName == "IMG")
{
document.images["fol"].src = "folder_2.png";
}
else
{
document.images["fol"].src = "folder_1.png";
}
}

document.onclick = changePic;
-->
</script>


However, I would really like it if some one could explain what all the diffrent stuff does? I know and understand some of it, but not all of it. Some of this I have never even seen.

Thanks!

Pyth007
07-31-2006, 04:33 PM
Not sure what you don't understand, but I'll try piecing together what I think might be confusing...

The very last line sets the entire document's onclick event to the changePic function to handle it. This means wherever in the document you click, the changePic function will be run. Now in most browsers, the onclick event will pass in a parameter e that holds the info. about what was clicked; however IE doesn't play by the rules, so it doesn't pass in anything. So the first line of the function tries to establish (crossbrowser-wise) which element was clicked (and assigns that object to obj). The first line first checks if anything was passed into the function as e (or rather if nothing was passed in by asking "if not e" or in other words "if e does not exist"). If this check is true, then we know it was IE using the function, so we get the 'event' object (which the other browsers had already passed in) and see which element it is using IE's srcElement property. If on the other hand a value for e was found, we get the object of the event using the target property. Now that we know what object was clicked, we check to see if the object was an <img> element by checking its nodeName which returns the uppercase form of the tag name. If it was an <img> that was clicked then it assigns one source for the desired object, and assigns a different picture source to the object if an image was not clicked. Note that this last test was just to see if an <img> was clicked; if you have multiple <img>s, then you'll need to add something to the condition to distinguish which <img> was clicked (hense Kor's addition).

Mr J
07-31-2006, 05:31 PM
If were to use multiple images you could possibly go something like this


<script type="text/javascript">
<!--
arr=[]

arr['mypic1']=["pic1.jpg","pic2.jpg"]
arr['mypic2']=["pic3.jpg","pic4.jpg"]
arr['mypic3']=["pic5.jpg","pic6.jpg"]

lastId=null
function changePic(e){

obj=(!e?event.srcElement:e.target)

if(lastId!=null){
document.images[lastId].src=arr[lastId][0]
}


if(obj.nodeName=="IMG"&&obj.className=="picswap"){
document.images[obj.id].src=arr[obj.id][1]
lastId=obj.id
}

}

document.onclick=changePic

-->
</script>

<img class="picswap" id="mypic1" src="pic1.jpg">
<img class="picswap" id="mypic2" src="pic3.jpg">
<img class="picswap" id="mypic3" src="pic5.jpg">



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum