Flip image

How to flip an image.
That means when i click over that image it changes to another image, and when i clicked over it agiain it turns back to the original one.

k_elzohry
elzohryAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
DreamMasterConnect With a Mentor Commented:
That indeed is the easiest way to do a mouseover...

However, as soon as you are placing your contents in a layer, it won't work and you will get much more complex ways for that mouseover...plus it will not be preloaded.

Here is a lot more complex way, but, once you have the .js file, you can use it anywhere and for any images whereever it is in your HTML file.

imageshandling.js
------------------
You will include this file in any HTML file where you want to do mouseovers or mouseclicks:


/********************************************************************************
FILE:                              imageshandling.js
PURPOSE:                        General mouseover, mouseclick functions
WHAT IT      CONTAINS:            Functions for general imagehandling, including mouseover
                                    mouseout and click states. Also handles preloading.
AUTHOR:                              CJ de Vos.
********************************************************************************/

isNS = navigator.appName=="Netscape"
/********************************************************************************
function            : imageAction(imgname, normal, mo)
parameters            : imgname - name of the image as found in the image tag (input, string)
                          normal - source of the normalstate image (input, string)
                          mo - source of the mouseover image (input, string)
Date added            : 10 Feb 2001
Changed                  : 19 Feb 2002 by Max Davidse (added comments)
Functionality      : Holds all imagenames and sources used for preloading.
Author                  : CJ de Vos
Still Needs            : -
********************************************************************************/
function imageAction(imgname, normal, mo)
{
      this.name=imgname
      this.normalimg = new Image();
      this.normalimg.src = normal;
      this.mouseoverimg = new Image();
      this.mouseoverimg.src = mo;
}

/********************************************************************************
function            : iSwap(imgname, state)
parameters            : imgname - name of the image as found in the image tag (input, string)
                          state - either 1 or 0, to turn the image on or off (input, integer)
Date added            : 10 Feb 2001
Changed                  : 19 Feb 2002 by Max Davidse (added comments)
Functionality      : Swaps the image to on or off, depending on the state parameter.
Author                  : CJ de Vos
Still Needs            : -
********************************************************************************/
function iSwap()
{
    args = iSwap.arguments;
    for(var e=0;e<args.length;e+=2)
    {
          bIsMatch=false
          for(i=0;i<document.activearray.length;i++) if(document.activearray[i]==args[e]) bIsMatch=true;
          if(!bIsMatch && (iObj = GetImage(args[e])) && document.imagesarray)
         for(i=0;i<document.imagesarray.length;i++)
            if(document.imagesarray[i].name==args[e])
             iObj.src = eval("document.imagesarray[i]."+((args[e+1]==1)?"mouseoverimg":"normalimg")+".src");
    }
}

/********************************************************************************
function       : iClick()
parameters     : arguments - array of imagenames as found in the image tag (input, string)
Date added     : 10 Feb 2001
Changed        : 19 Feb 2002 by Max Davidse (added comments)
Functionality  : Swaps the image to it's clicked state.
Author         : CJ de Vos
Still Needs    : -
********************************************************************************/

function iClick()
{
    var bIsMatch;
    args = iClick.arguments; // ** all images that need to be "clicked"
    for(i=0;i<document.activearray.length;i++)
    {
          bIsMatch = false;
          for(e=0;e<args.length;e++)
                if(args[e]==document.activearray[i]){ bIsMatch=true; break; }
          if(!bIsMatch)
          {
                // alert("there is an active image that needs to be set back! ("+document.activearray[i]+")")
                iObj = GetImage(document.activearray[i]);
                if(iObj) iObj.src=document.normalarray[i];
          }
    }
   
    // ** we have our buffer, turn all on!
    for(i=0;i<args.length;i++)
    {
          iObj = GetImage(args[i]);
          if(iObj)
           for(e=0;e<document.imagesarray.length;e++)
                if(document.imagesarray[e].name==args[i])
                {
                 iObj.src = document.imagesarray[e].mouseoverimg.src;
                 document.normalarray[i] = document.imagesarray[e].normalimg.src;
                }
    }
    document.activearray = args;
   
}

/********************************************************************************
function            : iPreload(imgname, normalimg, mouseoverimg)
parameters            : imgname - name of the image as found in the image tag (input, string)
                          normalimg - source of the normalstate image (input, string)
                          mouseoverimg - source of the mouseover image (input, string)
Date added            : 10 Feb 2001
Changed                  : 19 Feb 2002 by Max Davidse (added comments)
Functionality      : Preloads all used images.
Author                  : CJ de Vos
Still Needs            : -
********************************************************************************/
function iPreload(szImgname, szNormal, szMouseover)
{
      // Check if array already exists, if not, create it
      if(!document.imagesarray) document.imagesarray = new Array();
      if(!document.activearray) document.activearray = new Array();
      if(!document.normalarray) document.normalarray = new Array();

      // Array should've been created now, let's continue.
      for(var i=0;i<szNormal.length;i++)
            document.imagesarray[document.imagesarray.length] = new imageAction(szImgname[i], szNormal[i], szMouseover[i]);
}

/********************************************************************************
function            : GetImage(imgname)
parameters            : imgname - name of the image as found in the image tag (input, string)
Date added            : 10 Feb 2001
Changed                  : 19 Feb 2002 by Max Davidse (added comments)
Functionality      : Finds the image by calling the function FindImage.
Author                  : CJ de Vos
Still Needs            : -
********************************************************************************/
function GetImage(imgname)
{
      if(isNS) if(document.images[imgname]) return document.images[imgname];
      return (document.layers)?FindImage(imgname):document.all[imgname];
}

/********************************************************************************
function            : FindImage(imgname, obj)
parameters            : imgname - name of the image as found in the image tag (input, string)
                          obj - reference to the object of the image. (input, object)
Date added            : 10 Feb 2001
Changed                  : 19 Feb 2002 by Max Davidse (added comments)
Functionality      : Swaps the image to it's clicked state.
Author                  : CJ de Vos
Still Needs            : -
********************************************************************************/
function FindImage(imgname, obj)
{
      var i=0;
      var perObj = null;
      var tmpObj = (obj) ? obj.document.layers : document.layers;
      for(i=0;i<tmpObj.length;i++)
      {
            str += tmpObj[i].id;
            if(tmpObj[i].document.images[imgname]) return tmpObj[i].document.images[imgname];
      if(perObj = FindImage(imgname, tmpObj[i])) return perObj;
      }
      return false;
}


Now in the test.html file:

test.html
---------

<html>
<head>
<title>Internet Campaigns - Homepage</title>
<script src="js/imageshandling.js"></script>
<script language="javascript">
<!--
sImgName = new Array("image1", "image2")
sNormal = new Array("images/image1.gif", "images/image2.gif")
sMO  = new Array("images/image1_mo.gif", "images/image2_mo.gif")

function document_onload()
{
      iPreload(sImgName, sNormal, sMO);
}
//-->
</script>
<body onload="document_onload()">
<a href="somelink.html" onmouseover="iSwap('image1',1)" onmouseout="iSwap('image1',0)" onclick="iClick('image1')"><img src="images/image1.gif" border="0" name="image1"></a>
<a href="somelink2.html" onmouseover="iSwap('image2',1)" onmouseout="iSwap('image2',0)" onclick="iClick('image1')"><img src="images/image2.gif" border="0" name="image2"></a>
</body>
</html>

I know it looks complicated, but this is the most versatile mouseover script that I've ever seen, curtosy of my collegue and friend CJ_S. Altered and completed by myself.

Good luck with it.

Max.
0
 
BatalfCommented:
Try something like this

<script>
var image1 = 'image1.gif';
var image2 = 'image2.gif';
</script>
<a href="#" onclick="if(document.image1.src==image1)document.image1.src=image2; else document.image1.src=image1;"><img src="image1.gif" name="image1"></a>

That's the click -method. If you're looking for a mouse-over method:

<a href="#" onmouseover="document.image1.src='image2.gif'" onmouseout="document.image1.src='image1.gif'"><img src="image1.gif"></a>
0
 
BatalfCommented:
<a href="#" onmouseover="document.image1.src='image2.gif'" onmouseout="document.image1.src='image1.gif'"><img
src="image1.gif"></a>

should be:

<a href="#" onmouseover="document.image1.src='image2.gif'" onmouseout="document.image1.src='image1.gif'"><img
src="image1.gif" name="image1"></a>
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
CJ_SCommented:
Please note, there are several versions of the above script. Including one which does seperate mouseover, normal and clicked state images.

*wink@DreamMaster*

CJ
0
 
COBOLdinosaurCommented:
This question has been abandoned. I will make a recommendation to the
moderators on its resolution in a week or two. I appreciate any comments
that would help me to make a recommendation.
<note>
   In the absence of responses, I will recommend DELETE unless it is clear
   to me that it has value as a PAQ.  Silence = you don't care
</note>

Cd&
0
 
elzohryAuthor Commented:
Dear, All
I am sorry for late, I try every posted comment, and all of them not do what i want, so please any one menstion to me what i can do in that case.

If any expert know that any of above comment is TRUE and the error in my browser, i will grad the comment IMMEDIATLY.

Thanks, all

elzohry
0
 
DreamMasterCommented:
Well...I do know for a fact that the way I posted...works!! Always...I even tested it before I posted it here.....

But if it doesn't solve your problem...so be it..

Max.
0
 
elzohryAuthor Commented:
So
Thanks all, and sorry for late

elzohry
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.

All Courses

From novice to tech pro — start learning today.