Solved

Flip image

Posted on 2002-05-23
8
820 Views
Last Modified: 2008-03-06
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
0
Comment
Question by:elzohry
  • 2
  • 2
  • 2
  • +2
8 Comments
 
LVL 32

Expert Comment

by:Batalf
ID: 7029289
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
 
LVL 32

Expert Comment

by:Batalf
ID: 7029292
<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
 
LVL 19

Accepted Solution

by:
DreamMaster earned 50 total points
ID: 7029412
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
 
LVL 22

Expert Comment

by:CJ_S
ID: 7030132
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7116651
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
 

Author Comment

by:elzohry
ID: 7117727
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
 
LVL 19

Expert Comment

by:DreamMaster
ID: 7120502
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
 

Author Comment

by:elzohry
ID: 7120513
So
Thanks all, and sorry for late

elzohry
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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…

705 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now