Solved

Flip image

Posted on 2002-05-23
8
832 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

This article discusses four methods for overlaying images in a container on a web page
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

856 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