Solved

Flip image

Posted on 2002-05-23
8
834 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 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
Independent Software Vendors: 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

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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Telerik RadEditor Control Save 8 39
Expanding/Collapsing Tree on SharePoint List 29 66
Horizontal Full Calendar using php 5 43
iframe stay to the left of page 5 30
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this. Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it i…
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.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

751 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