Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Flip image

Posted on 2002-05-23
8
Medium Priority
?
836 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 200 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

688 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