Mebu onMouseover problem.

I am new to java script..

The problem is i am trying to implement a very good looking Menu with images.

actually here is the code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<META name="GENERATOR" content="IBM WebSphere Studio">
<META http-equiv="Content-Style-Type" content="text/css">
<LINK href="theme/Master.css" rel="stylesheet" type="text/css">
<TITLE>O2 Magnet Lines</TITLE>
<script language="JavaScript">
function changeImage(objImg, newImgFileName)
{
     if (!document.images)
          return;

     //Only 4.0 and later browsers will pass this point

     objImg.src = newImgFileName;
}
</script>

</HEAD>
<BODY>
<TABLE align="center" width="780">
<tr>
<TD >
<TABLE border="0" width="100%">
<TR align="left">
<TD bgcolor="silver" align="left" width="57" height="60" >
<IMG src="images/req.jpg" onclick="changeImage(this, 'images/req2.jpg')" onMouseOver="changeImage(this, 'images/req1.jpg')" onMouseOut="changeImage(this, 'images/req.jpg')">
</TD>
<TD bgcolor="silver" align="left" width="49" height="60">
<IMG src="images/detail.jpg" onMouseOver="changeImage(this, 'images/detail1.jpg')" onMouseOut="changeImage(this, 'images/detail.jpg')">
</TD>
<TD bgcolor="silver" align="left" width="76" height="60">
<IMG src="images/type.jpg" onMouseOver="changeImage(this, 'images/type1.jpg')" onMouseOut="changeImage(this, 'images/type.jpg')">
</TD>
<TD bgcolor="silver" align="left" width="90" height="60">
<IMG src="images/reqln.jpg" onMouseOver="changeImage(this, 'images/reqln1.jpg')" onMouseOut="changeImage(this, 'images/reqln.jpg')">
</TD>
<TD bgcolor="silver" align="left" width="56" height="60">
<IMG src="images/contact.jpg" onMouseOver="changeImage(this, 'images/contact1.jpg')" onMouseOut="changeImage(this, 'images/contact.jpg')">
</TD>
<TD height="60"></TD>
</TR>
</TABLE>
</TD>
</tr>
</TABLE>
</BODY>
</HTML>

its a very normal htnl page .

All i need is just a function to handle my On click event.
what happens is when clicked image gets selected and then because of mouseover event and mouse out events its gets back to diffrent images as per the value pased.

How to retain the Clicked images as it is (i.e disabling the mouse over & mouse out events) and keeping the mouse over and mouse event of other images whihc are not clicked as it is.

I need a clear cut function to handle it  with the required changes to the above code.

its urget please help.

LVL 23
Siva Prasanna KumarPrincipal Solutions ArchitectAsked:
Who is Participating?
 
basicinstinctCommented:
Change the script to this:

<script language="JavaScript">

var lastImg = "";
var baseImg = "";
var frozenImg = "";

function changeImage(objImg, newImgFileName, doFreeze)
{
      var imgId = objImg.id;
      if(doFreeze)
      {
           if(frozenImg != "")
           {
                temp = document.getElementById(frozenImg);
                temp.src = baseImg;
           }
           else if(lastImg == "")
           {
                 lastImg = objImg.src;
           }
         frozenImg=imgId;
         baseImg = lastImg;
         objImg.src = newImgFileName;
      }
      else if(imgId != frozenImg)
      {
          lastImg = objImg.src;
          objImg.src = newImgFileName;
      }
}

</script>


And change the body element to this:

<body onload="changeImage(document.getElementById('img1'), 'images/req.jpg', true);">


Just a note on the script I have given you here: I have take the approach that you may change things over time.  This script allows you to:
-store images in any location - different images can be in different locations
-Use the same image name in different <img> elements.
-Break from the convention of naming your images "name" "name1" "name2"

So, the script doesn't care what the images are called or where they are located, but this comes at a price, and the price is elegance.  If you KNOW for sure that these things will never change then the script could be made more elegant (still would do the same thing).  
0
 
basicinstinctCommented:
This works for me:

All I did was add the new function called "freezeImage" and added this handler to each image:

onClick="freezeImage(this);"



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<META name="GENERATOR" content="IBM WebSphere Studio">
<META http-equiv="Content-Style-Type" content="text/css">
<LINK href="theme/Master.css" rel="stylesheet" type="text/css">
<TITLE>O2 Magnet Lines</TITLE>
<script language="JavaScript">
function changeImage(objImg, newImgFileName)
{
     if (!document.images)
          return;

     //Only 4.0 and later browsers will pass this point

     objImg.src = newImgFileName;
}

function freezeImage(objImg)
{
      objImg.removeAttribute('onMouseOver');
      objImg.removeAttribute('onMouseOut');
}


</script>

</HEAD>
<BODY>
<TABLE align="center" width="780">
<tr>
<TD >
<TABLE border="0" width="100%">
<TR align="left">
<TD bgcolor="silver" align="left" width="57" height="60" >
<IMG src="images/req.jpg" onclick="changeImage(this, 'images/req2.jpg')" onMouseOver="changeImage(this, 'images/req1.jpg')" onMouseOut="changeImage(this, 'images/req.jpg')" onClick="freezeImage(this);">
</TD>
<TD bgcolor="silver" align="left" width="49" height="60">
<IMG src="images/detail.jpg" onMouseOver="changeImage(this, 'images/detail1.jpg')" onMouseOut="changeImage(this, 'images/detail.jpg')" onClick="freezeImage(this);">
</TD>
<TD bgcolor="silver" align="left" width="76" height="60">
<IMG src="images/type.jpg" onMouseOver="changeImage(this, 'images/type1.jpg')" onMouseOut="changeImage(this, 'images/type.jpg')" onClick="freezeImage(this);">
</TD>
<TD bgcolor="silver" align="left" width="90" height="60">
<IMG src="images/reqln.jpg" onMouseOver="changeImage(this, 'images/reqln1.jpg')" onMouseOut="changeImage(this, 'images/reqln.jpg')" onClick="freezeImage(this);">
</TD>
<TD bgcolor="silver" align="left" width="56" height="60">
<IMG src="images/contact.jpg" onMouseOver="changeImage(this, 'images/contact1.jpg')" onMouseOut="changeImage(this, 'images/contact.jpg')" onClick="freezeImage(this);">
</TD>
<TD height="60"></TD>
</TR>
</TABLE>
</TD>
</tr>
</TABLE>
</BODY>
</HTML>
0
 
Siva Prasanna KumarPrincipal Solutions ArchitectAuthor Commented:
hi basicinstinct ,

Nice to see your fast response but the thing is its not working for me.

You need to note that there are three pictures for each TD on clicking on that TD the Last Picture which is being displayed must be freezed for that TD and other TD's functionality must remain as it is.


what's hapening with your code is that its just displaying the MouseOver image and nothing is happening on click.

Please help me.

Thank You.
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
Siva Prasanna KumarPrincipal Solutions ArchitectAuthor Commented:
Even i tryed this


function freezeImage(objImg,newImgFileName)
{
      objImg.src = newImgFileName;
     objImg.removeAttribute('onMouseOver');
     objImg.removeAttribute('onMouseOut');
}

<TD bgcolor="silver" align="left" width="57" height="60" >
<IMG src="images/req.jpg" onclick="freezeImage(this, 'images/req2.jpg')" onMouseOver="changeImage(this, 'images/req1.jpg')" onMouseOut="changeImage(this, 'images/req.jpg')" >
</TD>

yet the image is not freezing.

0
 
basicinstinctCommented:
Ok, I think I understand what you trying to do...  Here is a flexible solution you can tweak.  If you want to freeze the image pass "true" if you don't want to freeze it pass "false".  You can decide when and where it freezes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<META name="GENERATOR" content="IBM WebSphere Studio">
<META http-equiv="Content-Style-Type" content="text/css">
<LINK href="theme/Master.css" rel="stylesheet" type="text/css">
<TITLE>O2 Magnet Lines</TITLE>
<script language="JavaScript">
function changeImage(objImg, newImgFileName, doFreeze)
{
     if (!document.images)
          return;

     //Only 4.0 and later browsers will pass this point

     objImg.src = newImgFileName;
     if(doFreeze)
     {
           objImg.removeAttribute('onMouseOver');
            objImg.removeAttribute('onMouseOut');
       }
}

</script>

</HEAD>
<BODY>
<TABLE align="center" width="780">
<tr>
<TD >
<TABLE border="0" width="100%">
<TR align="left">
<TD bgcolor="silver" align="left" width="57" height="60" >
<IMG src="images/req.jpg" onclick="changeImage(this, 'images/req2.jpg', true)" onMouseOver="changeImage(this, 'images/req1.jpg', false)" onMouseOut="changeImage(this, 'images/req.jpg', false)">
</TD>
<TD bgcolor="silver" align="left" width="49" height="60">
<IMG src="images/detail.jpg" onclick="changeImage(this, 'images/req2.jpg', true)" onMouseOver="changeImage(this, 'images/detail1.jpg', false)" onMouseOut="changeImage(this, 'images/detail.jpg', false)">
</TD>
<TD bgcolor="silver" align="left" width="76" height="60">
<IMG src="images/type.jpg" onclick="changeImage(this, 'images/req2.jpg', true)" onMouseOver="changeImage(this, 'images/type1.jpg', false)" onMouseOut="changeImage(this, 'images/type.jpg', false)">
</TD>
<TD bgcolor="silver" align="left" width="90" height="60">
<IMG src="images/reqln.jpg" onclick="changeImage(this, 'images/req2.jpg', true)" onMouseOver="changeImage(this, 'images/reqln1.jpg', false)" onMouseOut="changeImage(this, 'images/reqln.jpg', false)">
</TD>
<TD bgcolor="silver" align="left" width="56" height="60">
<IMG src="images/contact.jpg" onclick="changeImage(this, 'images/req2.jpg', true)" onMouseOver="changeImage(this, 'images/contact1.jpg', false)" onMouseOut="changeImage(this, 'images/contact.jpg', false)">
</TD>
<TD height="60"></TD>
</TR>
</TABLE>
</TD>
</tr>
</TABLE>
</BODY>
</HTML>








0
 
basicinstinctCommented:
oh, it's working in Firefox but not IE.  
I'll find another way...
0
 
Siva Prasanna KumarPrincipal Solutions ArchitectAuthor Commented:
No its not happening its not freezing as soon as i move to next icon from the clicked one the Clicked icon resets to the image i specifeid in MouseOut event.
0
 
Siva Prasanna KumarPrincipal Solutions ArchitectAuthor Commented:
ya it is some what working in Fire Fox Nice to see that but one more thing i just need the MoverOver Events of Other icons as its is i.e only the previously clicked image should be restored with its mouseover and mouseout events.

Please help.

Thank You.
0
 
basicinstinctCommented:
Ok, everything the same as my last post, but replace the "changeImage" function to this:

function changeImage(objImg, newImgFileName, doFreeze)
{
     if (!document.images)
          return;

     //Only 4.0 and later browsers will pass this point

       if(objImg.getAttribute('Style') != 'frozen')
       {
           objImg.src = newImgFileName;
       }
     if(doFreeze)
     {
            objImg.setAttribute('Style', 'frozen');
       }
}

0
 
Siva Prasanna KumarPrincipal Solutions ArchitectAuthor Commented:
That was a good one i need the other images to get back to there normal state once some other icon is clicked.

If Possible can you get me browser independent implementation. Please

Please add this feature also i think this is a little tough to implement.

Thank You.
0
 
basicinstinctCommented:
Ok, same code as before, except the script element - replace it with this (and tell me if I have misunderstood):

Does this work for you?  LEt me know if there are any probs.  By the way, I meant to be setting the 'Class' attribute before, not Style - I thought one thing and typed another.

<script language="JavaScript">

var lastImg = "";

function changeImage(objImg, newImgFileName, doFreeze)
{
      var imgClass = objImg.getAttribute('class');
      
      if(doFreeze)
      {
           objImg.setAttribute('class','frozen');
      lastImg = objImg.src;
      objImg.src = newImgFileName;
      }
      else if(imgClass != 'frozen')
      {
      var imgs = document.getElementsByTagName('img');
      for(var i=0; i<imgs.length; i++)
      {
            if(imgs[i].getAttribute('class') == 'frozen')
            {
                  imgs[i].src = lastImg;
                  imgs[i].setAttribute('class','unfrozen');
                  break;
            }
      }
      objImg.src = newImgFileName;
      }
}

</script>
0
 
Siva Prasanna KumarPrincipal Solutions ArchitectAuthor Commented:
No its not happening Mouse Over events are yet taking place on the seleted one.

so once the mouse is moved on the other icons the selected image is getting reseted.
0
 
basicinstinctCommented:
Oh right, you only wanted it on a click!  Oops - we'll get there buddy :)

Try this:

<script language="JavaScript">

var lastImg = "";

function changeImage(objImg, newImgFileName, doFreeze)
{
      var imgClass = objImg.getAttribute('class');
      
      if(doFreeze)
      {
      var imgs = document.getElementsByTagName('img');
      for(var i=0; i<imgs.length; i++)
      {
            if(imgs[i].getAttribute('class') == 'frozen')
            {
                  imgs[i].src = lastImg;
                  imgs[i].setAttribute('class','unfrozen');
                  break;
            }
      }
           objImg.setAttribute('class','frozen');
      lastImg = objImg.src;
      objImg.src = newImgFileName;
      }
      else if(imgClass != 'frozen')
      {
      objImg.src = newImgFileName;
      }
}

</script>
0
 
Michel PlungjanIT ExpertCommented:
Here is one without the setAttribute which is not very compatible - this will work from NS4+ and IE5+ - if we change the replace function, it will work in even older browsers

saveImg = "";
function changeImage(objImg, newImgFileName) {
  if (!document.images) return;
  if (saveImg == objImg)  return;
  objImg.src = newImgFileName;
}
function clickImage(objImg,clickedImage) {
  if (saveImg) {
    saveImg.src = saveImg.src.replace(/[1|2]\.gif/,'\.gif');
  }
  objImg.src= clickedImage;
  saveImg=objImg;
}
0
 
Siva Prasanna KumarPrincipal Solutions ArchitectAuthor Commented:
Hi basicinstinct  Thanks it works but one last thing

see once the user clicks on any of the icon and then selects a another icon next.

Under this conditions the previous icon which was selected is remianing in its (mouser Over State (i.e for req1.jpg for 1st TD and so on )) please i want it to be reseted to req.jpg whihc is mouse out image please do me this favour.

Thank You.

Waiting for your reply.
0
 
Michel PlungjanIT ExpertCommented:
Try mine, Shivaspk, no need to change your code (except adding  the onClick to the rest of the images)
0
 
basicinstinctCommented:
Hi shivaspk

Did you try mplunjan's code?

0
 
Siva Prasanna KumarPrincipal Solutions ArchitectAuthor Commented:
I didnt understood his code.
:(
As i am very new to JS.

mplungjan  can you give the complete code as the HTML i have placed above so that if it works then i will try to understand it.

Thank You.
0
 
basicinstinctCommented:
shivaspk - I think my code grew because I kept tweaking it as I didn't quite get what you needed - I would like to rewrite it from the start - also mplungian says one of the instructions I have used is not as widely supported as the alternative, and I trust what he says.  So, rather than me start again, let's try mplunjian's code.  I think he meant for you to incorporate it into your original code like this (note, I have not tested this at all):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<META name="GENERATOR" content="IBM WebSphere Studio">
<META http-equiv="Content-Style-Type" content="text/css">
<LINK href="theme/Master.css" rel="stylesheet" type="text/css">
<TITLE>O2 Magnet Lines</TITLE>
<script language="JavaScript">
saveImg = "";
function changeImage(objImg, newImgFileName) {
  if (!document.images) return;
  if (saveImg == objImg)  return;
  objImg.src = newImgFileName;
}
function clickImage(objImg,clickedImage) {
  if (saveImg) {
    saveImg.src = saveImg.src.replace(/[1|2]\.gif/,'\.gif');
  }
  objImg.src= clickedImage;
  saveImg=objImg;
}
</script>

</HEAD>
<BODY>
<TABLE align="center" width="780">
<tr>
<TD >
<TABLE border="0" width="100%">
<TR align="left">
<TD bgcolor="silver" align="left" width="57" height="60" >
<IMG src="images/req.jpg" onclick="clickImage(this, 'images/req2.jpg')" onMouseOver="changeImage(this, 'images/req1.jpg')" onMouseOut="changeImage(this, 'images/req.jpg')">
</TD>
<TD bgcolor="silver" align="left" width="49" height="60">
<IMG src="images/detail.jpg" onclick="clickImage(this, 'images/req2.jpg')" onMouseOver="changeImage(this, 'images/detail1.jpg')" onMouseOut="changeImage(this, 'images/detail.jpg')">
</TD>
<TD bgcolor="silver" align="left" width="76" height="60">
<IMG src="images/type.jpg" onclick="clickImage(this, 'images/req2.jpg')" onMouseOver="changeImage(this, 'images/type1.jpg')" onMouseOut="changeImage(this, 'images/type.jpg')">
</TD>
<TD bgcolor="silver" align="left" width="90" height="60">
<IMG src="images/reqln.jpg" onclick="clickImage(this, 'images/req2.jpg')" onMouseOver="changeImage(this, 'images/reqln1.jpg')" onMouseOut="changeImage(this, 'images/reqln.jpg')">
</TD>
<TD bgcolor="silver" align="left" width="56" height="60">
<IMG src="images/contact.jpg" onclick="clickImage(this, 'images/req2.jpg')" onMouseOver="changeImage(this, 'images/contact1.jpg')" onMouseOut="changeImage(this, 'images/contact.jpg')">
</TD>
<TD height="60"></TD>
</TR>
</TABLE>
</TD>
</tr>
</TABLE>
</BODY>
</HTML>
0
 
Siva Prasanna KumarPrincipal Solutions ArchitectAuthor Commented:
basicinstinct

Now By using the above code what's happening is without moving the mouse on the icons just by clicking on individual icons directly i am able to selet all the icons.

Which should not happen.

Thank You.
0
 
basicinstinctCommented:
ok, just to clarify, we'll go back to my code for now, can you try this and see if this is the behaviouy you want...

<script language="JavaScript">

var lastImg = "";
var baseImg = "";

function changeImage(objImg, newImgFileName, doFreeze)
{
      var imgClass = objImg.getAttribute('class');
      if(doFreeze)
      {
      var imgs = document.getElementsByTagName('img');
      for(var i=0; i<imgs.length; i++)
      {
            if(imgs[i].getAttribute('class') == 'frozen')
            {
                  imgs[i].src = baseImg;
                  imgs[i].setAttribute('class','unfrozen');
                  break;
            }
      }
      baseImg = lastImg;
           objImg.setAttribute('class','frozen');
      objImg.src = newImgFileName;
      }
      else if(imgClass != 'frozen')
      {
      lastImg = objImg.src;
      objImg.src = newImgFileName;
      }
}

</script>
0
 
Siva Prasanna KumarPrincipal Solutions ArchitectAuthor Commented:
Yes this is what i am looking for Thank You.

If you don't mind i will close the question a little later as i would like to clearly check the functionality and also need to under stand your code.

Thanks for your support guys.

Special Thanks to basicinstinct .

basicinstinct if you don't mind can you help me in making this code Browser independent Please if you can.

Great Guys Thanks For Every Thing.

Thank You.

 
0
 
basicinstinctCommented:
hi, ok, now i know exactly what you want - i will work on a rewrite
0
 
basicinstinctCommented:
Ok, I tested the code I gave you above in Fireox, Mozilla and IE and it worked. But I think I have made a few logical improvements, so perhaps use the code below instead instead.  I have changed the javascript, also I have added an ID attribute to each of the 'img' tags.
I have tested this code on Mozilla, Firefox and IE too.

Let me know if there are any issues.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<META name="GENERATOR" content="IBM WebSphere Studio">
<META http-equiv="Content-Style-Type" content="text/css">
<LINK href="theme/Master.css" rel="stylesheet" type="text/css">
<TITLE>O2 Magnet Lines</TITLE>
<script language="JavaScript">

var lastImg = "";
var baseImg = "";
var frozenImg = "";

function changeImage(objImg, newImgFileName, doFreeze)
{
      var imgId = objImg.id;
      if(doFreeze)
      {
      if(frozenImg != "")
      {
            temp = document.getElementById(frozenImg);
            temp.src = baseImg;
      }
           frozenImg=imgId;
           baseImg = lastImg;
        objImg.src = newImgFileName;
      }
      else if(imgId != frozenImg)
      {
           lastImg = objImg.src;
           objImg.src = newImgFileName;
      }
}

</script>

</HEAD>
<BODY>
<TABLE align="center" width="780">
<tr>
<TD >
<TABLE border="0" width="100%">
<TR align="left">
<TD bgcolor="silver" align="left" width="57" height="60" >
<IMG id="img1" src="images/req.jpg" onclick="changeImage(this, 'images/req2.jpg', true)" onMouseOver="changeImage(this, 'images/req1.jpg', false)" onMouseOut="changeImage(this, 'images/req.jpg', false)">
</TD>
<TD bgcolor="silver" align="left" width="49" height="60">
<IMG id="img2" src="images/detail.jpg" onclick="changeImage(this, 'images/req2.jpg', true)" onMouseOver="changeImage(this, 'images/detail1.jpg', false)" onMouseOut="changeImage(this, 'images/detail.jpg', false)">
</TD>
<TD bgcolor="silver" align="left" width="76" height="60">
<IMG id="img3" src="images/type.jpg" onclick="changeImage(this, 'images/req2.jpg', true)" onMouseOver="changeImage(this, 'images/type1.jpg', false)" onMouseOut="changeImage(this, 'images/type.jpg', false)">
</TD>
<TD bgcolor="silver" align="left" width="90" height="60">
<IMG id="img4" src="images/reqln.jpg" onclick="changeImage(this, 'images/req2.jpg', true)" onMouseOver="changeImage(this, 'images/reqln1.jpg', false)" onMouseOut="changeImage(this, 'images/reqln.jpg', false)">
</TD>
<TD bgcolor="silver" align="left" width="56" height="60">
<IMG id="img5" src="images/contact.jpg" onclick="changeImage(this, 'images/req2.jpg', true)" onMouseOver="changeImage(this, 'images/contact1.jpg', false)" onMouseOut="changeImage(this, 'images/contact.jpg', false)">
</TD>
<TD height="60"></TD>
</TR>
</TABLE>
</TD>
</tr>
</TABLE>
</BODY>
</HTML>
0
 
Michel PlungjanIT ExpertCommented:
I think he wants

<TD bgcolor="silver" align="left" width="57" height="60" >
<IMG src="images/req.jpg" onclick="clickImage(this, 'images/req2.jpg')" onMouseOver="changeImage(this, 'images/req1.jpg')" onMouseOut="changeImage(this, 'images/req.jpg')">
</TD>
<TD bgcolor="silver" align="left" width="49" height="60">
<IMG src="images/detail.jpg" onclick="clickImage(this, 'images/detail2.jpg')" onMouseOver="changeImage(this, 'images/detail1.jpg')" onMouseOut="changeImage(this, 'images/detail.jpg')">
</TD>
<TD bgcolor="silver" align="left" width="76" height="60">
<IMG src="images/type.jpg" onclick="clickImage(this, 'images/type2.jpg')" onMouseOver="changeImage(this, 'images/type1.jpg')" onMouseOut="changeImage(this, 'images/type.jpg')">
</TD>
<TD bgcolor="silver" align="left" width="90" height="60">
<IMG src="images/reqln.jpg" onclick="clickImage(this, 'images/reqln2.jpg')" onMouseOver="changeImage(this, 'images/reqln1.jpg')" onMouseOut="changeImage(this, 'images/reqln.jpg')">
</TD>
<TD bgcolor="silver" align="left" width="56" height="60">
<IMG src="images/contact.jpg" onclick="clickImage(this, 'images/contact2.jpg')" onMouseOver="changeImage(this, 'images/contact1.jpg')" onMouseOut="changeImage(this, 'images/contact.jpg')">
</TD>
0
 
Michel PlungjanIT ExpertCommented:
I tried this code and when I click the new image, the old image changes back and the new image stays so I am not sure what code you tested.
There is no reason to change the html with the code I provided other than add the needed onClick. No ID needed and no change of the method calls

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<META name="GENERATOR" content="IBM WebSphere Studio">
<META http-equiv="Content-Style-Type" content="text/css">
<LINK href="theme/Master.css" rel="stylesheet" type="text/css">
<TITLE>O2 Magnet Lines</TITLE>
<script language="JavaScript">
saveImg = "";
function changeImage(objImg, newImgFileName) {
  if (!document.images) return;
  if (saveImg == objImg)  return;
  objImg.src = newImgFileName;
}
function clickImage(objImg,clickedImage) {
  if (saveImg) {
    saveImg.src = saveImg.src.replace(/[1|2]\.jpg/,'\.jpg');
  }
  objImg.src= clickedImage;
  saveImg=objImg;
}
</script>

</HEAD>
<BODY>
<TABLE align="center" width="780">
<tr>
<TD >
<TABLE border="0" width="100%">
<TR align="left">


<TD bgcolor="silver" align="left" width="57" height="60" >
<IMG src="images/req.jpg" onclick="clickImage(this, 'images/req2.jpg')" onMouseOver="changeImage(this, 'images/req1.jpg')" onMouseOut="changeImage(this, 'images/req.jpg')">
</TD>
<TD bgcolor="silver" align="left" width="49" height="60">
<IMG src="images/detail.jpg" onclick="clickImage(this, 'images/detail2.jpg')" onMouseOver="changeImage(this, 'images/detail1.jpg')" onMouseOut="changeImage(this, 'images/detail.jpg')">
</TD>
<TD bgcolor="silver" align="left" width="76" height="60">
<IMG src="images/type.jpg" onclick="clickImage(this, 'images/type2.jpg')" onMouseOver="changeImage(this, 'images/type1.jpg')" onMouseOut="changeImage(this, 'images/type.jpg')">
</TD>
<TD bgcolor="silver" align="left" width="90" height="60">
<IMG src="images/reqln.jpg" onclick="clickImage(this, 'images/reqln2.jpg')" onMouseOver="changeImage(this, 'images/reqln1.jpg')" onMouseOut="changeImage(this, 'images/reqln.jpg')">
</TD>
<TD bgcolor="silver" align="left" width="56" height="60">
<IMG src="images/contact.jpg" onclick="clickImage(this, 'images/contact2.jpg')" onMouseOver="changeImage(this, 'images/contact1.jpg')" onMouseOut="changeImage(this, 'images/contact.jpg')">
</TD>
<TD height="60"></TD>
</TR>
</TABLE>
</TD>
</tr>
</TABLE>
</BODY>
</HTML>
0
 
basicinstinctCommented:
He wanted this:

------------------------------------------------------------------------------
when page loads img src = imgA (this is hard coded in the HTML)

onMouseOver: img src = imgB
onMouseOut: img src = imgA
onClick: img src = imgC (and remains frozen at imgC)

when any other img element fires onClick then the img src returns back to imgA
-------------------------------------------------------------------------------
This is further complicated by the fact that value of imgA, imgB and imgC are different for each of the img elements.

Looks easy at first, but it's kind of tricky.





0
 
Michel PlungjanIT ExpertCommented:
Just for completeness...

Here is one that works in IE, FF, Mozilla AND Netscape 4!

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR" content="IBM WebSphere Studio">
<meta http-equiv="Content-Style-Type" content="text/css">
<link href="theme/Master.css" rel="stylesheet" type="text/css">
<title>O2 Magnet Lines</title>
<script language="JavaScript">
saveImg = "";
ext = ".jpg";
imageDir = "images/";

function swap(imgName, on) {
  if (!document.images) return;
  if (saveImg == imgName)  return;
  document.images[imgName].src = imageDir+imgName+((on)?"1":"")+ext;
}
function clickImage(imgName,lnk) {
  if (!document.images) return;
  if (saveImg) {
    document.images[saveImg].src = imageDir+imgName+ext;
  }
  document.images[imgName].src=imageDir+imgName+"2"+ext;
  saveImg=imgName;
  if (lnk.blur) lnk.blur(); // remove the dotted line
  return false;
}
</script>

</head>
<body>
<table align="center" width="780">
<tr>
<td >
<table border="0" width="100%">
<tr align="left">
<td bgcolor="silver" align="left" width="57" height="60"><a href="#"
onclick="return clickImage('req',this)"
onMouseOver="swap('req',1)"
onMouseOut="swap('req',0)"><img name="req" src="images/req.gif" border="0"></a></td>
<td bgcolor="silver" align="left" width="49" height="60"><a href="#"
onclick="return clickImage('detail',this)"
onMouseOver="swap('detail',1)"
onMouseOut="swap('detail',0)"><img name="detail" src="images/detail.gif" border="0"></a></td>
<td bgcolor="silver" align="left" width="76" height="60"><a href="#"
onclick="return clickImage('type',this)"
onMouseOver="swap('type',1)"
onMouseOut="swap('type',0)"><img name="type" src="images/type.gif" border="0"></a></td>
<td bgcolor="silver" align="left" width="90" height="60"><a href="#"
onclick="return clickImage('reqln',this)"
onMouseOver="swap('reqln',1)"
onMouseOut="swap('reqln',0)"><img name="reqln" src="images/reqln.gif" border="0"</a></td>
<td bgcolor="silver" align="left" width="56" height="60"><a href="#"
onclick="return clickImage('contact',this)"
onMouseOver="swap('contact',1)"
onMouseOut="swap('contact',0)"><img name="contact" src="images/contact.gif" border="0"></a></td>
<td height="60"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
0
 
Michel PlungjanIT ExpertCommented:
@basicInstinct, Yes, I understood that and that is what I posted from the beginning. A simple 3 state mouseover, like the ones I wrote in 1996 ;)
0
 
Siva Prasanna KumarPrincipal Solutions ArchitectAuthor Commented:
basicinstinct

Thanks for all that now i have a samll issue.

how can i do some thing like this on load the 1st Tab (i.e req.jpg) must be selected and then after the same old functionality as what you have given.

how to do this with your present code?

i am using this code of yours.

<script language="JavaScript">

var lastImg = "";
var baseImg = "";

function changeImage(objImg, newImgFileName, doFreeze)
{
      var imgClass = objImg.getAttribute('class');
      if(doFreeze)
      {
     var imgs = document.getElementsByTagName('img');
     for(var i=0; i<imgs.length; i++)
     {
          if(imgs[i].getAttribute('class') == 'frozen')
          {
               imgs[i].src = baseImg;
               imgs[i].setAttribute('class','unfrozen');
               break;
          }
     }
     baseImg = lastImg;
          objImg.setAttribute('class','frozen');
     objImg.src = newImgFileName;
      }
      else if(imgClass != 'frozen')
      {
     lastImg = objImg.src;
     objImg.src = newImgFileName;
      }
}

</script>

Thank You
0
 
Michel PlungjanIT ExpertCommented:
WIth my code you need

1. change
if (lnk.blur) lnk.blur(); // remove the dotted line
to
if (lnk && lnk.blur) lnk.blur(); // remove the dotted line

and 2

<body onLoad="clickImage('req')">
0
 
Siva Prasanna KumarPrincipal Solutions ArchitectAuthor Commented:
basicinstinct  in the code you have given above i think hter is some problem as the last image i.6 the 5th one
once clicked is noot getting reseted when and other icon is clicked.

please help in solving that.

mplungjan  thanlks for you code but right now i can't try it as its already in testing stage but i will personally try it and get back.

Tnak You.
0
 
Siva Prasanna KumarPrincipal Solutions ArchitectAuthor Commented:
sorry guys i got to know what was wrong thanks for every thing and i will wait for one more day and then close it.

Thank You.
0
 
Michel PlungjanIT ExpertCommented:
hmmm.
0
 
basicinstinctCommented:
mplungian - not very nice to say hmmmm - he accepted the right answer
0
 
Michel PlungjanIT ExpertCommented:
He accepted an answer - It will work in some browsers and not in others.
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.