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-
<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,
</TD>
<TD bgcolor="silver" align="left" width="49" height="60">
<IMG src="images/detail.jpg" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="76" height="60">
<IMG src="images/type.jpg" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="90" height="60">
<IMG src="images/reqln.jpg" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="56" height="60">
<IMG src="images/contact.jpg" onMouseOver="changeImage(t
</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.
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-
<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,
</TD>
<TD bgcolor="silver" align="left" width="49" height="60">
<IMG src="images/detail.jpg" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="76" height="60">
<IMG src="images/type.jpg" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="90" height="60">
<IMG src="images/reqln.jpg" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="56" height="60">
<IMG src="images/contact.jpg" onMouseOver="changeImage(t
</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.
ASKER
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.
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.
ASKER
Even i tryed this
function freezeImage(objImg,newImgF
{
objImg.src = newImgFileName;
objImg.removeAttribute('on
objImg.removeAttribute('on
}
<TD bgcolor="silver" align="left" width="57" height="60" >
<IMG src="images/req.jpg" onclick="freezeImage(this,
</TD>
yet the image is not freezing.
function freezeImage(objImg,newImgF
{
objImg.src = newImgFileName;
objImg.removeAttribute('on
objImg.removeAttribute('on
}
<TD bgcolor="silver" align="left" width="57" height="60" >
<IMG src="images/req.jpg" onclick="freezeImage(this,
</TD>
yet the image is not freezing.
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-
<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('on
objImg.removeAttribute('on
}
}
</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,
</TD>
<TD bgcolor="silver" align="left" width="49" height="60">
<IMG src="images/detail.jpg" onclick="changeImage(this,
</TD>
<TD bgcolor="silver" align="left" width="76" height="60">
<IMG src="images/type.jpg" onclick="changeImage(this,
</TD>
<TD bgcolor="silver" align="left" width="90" height="60">
<IMG src="images/reqln.jpg" onclick="changeImage(this,
</TD>
<TD bgcolor="silver" align="left" width="56" height="60">
<IMG src="images/contact.jpg" onclick="changeImage(this,
</TD>
<TD height="60"></TD>
</TR>
</TABLE>
</TD>
</tr>
</TABLE>
</BODY>
</HTML>
<!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-
<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('on
objImg.removeAttribute('on
}
}
</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,
</TD>
<TD bgcolor="silver" align="left" width="49" height="60">
<IMG src="images/detail.jpg" onclick="changeImage(this,
</TD>
<TD bgcolor="silver" align="left" width="76" height="60">
<IMG src="images/type.jpg" onclick="changeImage(this,
</TD>
<TD bgcolor="silver" align="left" width="90" height="60">
<IMG src="images/reqln.jpg" onclick="changeImage(this,
</TD>
<TD bgcolor="silver" align="left" width="56" height="60">
<IMG src="images/contact.jpg" onclick="changeImage(this,
</TD>
<TD height="60"></TD>
</TR>
</TABLE>
</TD>
</tr>
</TABLE>
</BODY>
</HTML>
oh, it's working in Firefox but not IE.
I'll find another way...
I'll find another way...
ASKER
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.
ASKER
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.
Please help.
Thank You.
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('St
{
objImg.src = newImgFileName;
}
if(doFreeze)
{
objImg.setAttribute('Style
}
}
function changeImage(objImg, newImgFileName, doFreeze)
{
if (!document.images)
return;
//Only 4.0 and later browsers will pass this point
if(objImg.getAttribute('St
{
objImg.src = newImgFileName;
}
if(doFreeze)
{
objImg.setAttribute('Style
}
}
ASKER
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.
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.
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
lastImg = objImg.src;
objImg.src = newImgFileName;
}
else if(imgClass != 'frozen')
{
var imgs = document.getElementsByTagN
for(var i=0; i<imgs.length; i++)
{
if(imgs[i].getAttribute('c
{
imgs[i].src = lastImg;
imgs[i].setAttribute('clas
break;
}
}
objImg.src = newImgFileName;
}
}
</script>
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
lastImg = objImg.src;
objImg.src = newImgFileName;
}
else if(imgClass != 'frozen')
{
var imgs = document.getElementsByTagN
for(var i=0; i<imgs.length; i++)
{
if(imgs[i].getAttribute('c
{
imgs[i].src = lastImg;
imgs[i].setAttribute('clas
break;
}
}
objImg.src = newImgFileName;
}
}
</script>
ASKER
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.
so once the mouse is moved on the other icons the selected image is getting reseted.
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.getElementsByTagN
for(var i=0; i<imgs.length; i++)
{
if(imgs[i].getAttribute('c
{
imgs[i].src = lastImg;
imgs[i].setAttribute('clas
break;
}
}
objImg.setAttribute('class
lastImg = objImg.src;
objImg.src = newImgFileName;
}
else if(imgClass != 'frozen')
{
objImg.src = newImgFileName;
}
}
</script>
Try this:
<script language="JavaScript">
var lastImg = "";
function changeImage(objImg, newImgFileName, doFreeze)
{
var imgClass = objImg.getAttribute('class
if(doFreeze)
{
var imgs = document.getElementsByTagN
for(var i=0; i<imgs.length; i++)
{
if(imgs[i].getAttribute('c
{
imgs[i].src = lastImg;
imgs[i].setAttribute('clas
break;
}
}
objImg.setAttribute('class
lastImg = objImg.src;
objImg.src = newImgFileName;
}
else if(imgClass != 'frozen')
{
objImg.src = newImgFileName;
}
}
</script>
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,clickedI
if (saveImg) {
saveImg.src = saveImg.src.replace(/[1|2]
}
objImg.src= clickedImage;
saveImg=objImg;
}
saveImg = "";
function changeImage(objImg, newImgFileName) {
if (!document.images) return;
if (saveImg == objImg) return;
objImg.src = newImgFileName;
}
function clickImage(objImg,clickedI
if (saveImg) {
saveImg.src = saveImg.src.replace(/[1|2]
}
objImg.src= clickedImage;
saveImg=objImg;
}
ASKER
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.
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.
Try mine, Shivaspk, no need to change your code (except adding the onClick to the rest of the images)
Hi shivaspk
Did you try mplunjan's code?
Did you try mplunjan's code?
ASKER
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.
:(
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.
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-
<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,clickedI
if (saveImg) {
saveImg.src = saveImg.src.replace(/[1|2]
}
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(t
</TD>
<TD bgcolor="silver" align="left" width="49" height="60">
<IMG src="images/detail.jpg" onclick="clickImage(this, 'images/req2.jpg')" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="76" height="60">
<IMG src="images/type.jpg" onclick="clickImage(this, 'images/req2.jpg')" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="90" height="60">
<IMG src="images/reqln.jpg" onclick="clickImage(this, 'images/req2.jpg')" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="56" height="60">
<IMG src="images/contact.jpg" onclick="clickImage(this, 'images/req2.jpg')" onMouseOver="changeImage(t
</TD>
<TD height="60"></TD>
</TR>
</TABLE>
</TD>
</tr>
</TABLE>
</BODY>
</HTML>
<!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-
<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,clickedI
if (saveImg) {
saveImg.src = saveImg.src.replace(/[1|2]
}
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(t
</TD>
<TD bgcolor="silver" align="left" width="49" height="60">
<IMG src="images/detail.jpg" onclick="clickImage(this, 'images/req2.jpg')" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="76" height="60">
<IMG src="images/type.jpg" onclick="clickImage(this, 'images/req2.jpg')" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="90" height="60">
<IMG src="images/reqln.jpg" onclick="clickImage(this, 'images/req2.jpg')" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="56" height="60">
<IMG src="images/contact.jpg" onclick="clickImage(this, 'images/req2.jpg')" onMouseOver="changeImage(t
</TD>
<TD height="60"></TD>
</TR>
</TABLE>
</TD>
</tr>
</TABLE>
</BODY>
</HTML>
ASKER
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.
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.
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.getElementsByTagN
for(var i=0; i<imgs.length; i++)
{
if(imgs[i].getAttribute('c
{
imgs[i].src = baseImg;
imgs[i].setAttribute('clas
break;
}
}
baseImg = lastImg;
objImg.setAttribute('class
objImg.src = newImgFileName;
}
else if(imgClass != 'frozen')
{
lastImg = objImg.src;
objImg.src = newImgFileName;
}
}
</script>
<script language="JavaScript">
var lastImg = "";
var baseImg = "";
function changeImage(objImg, newImgFileName, doFreeze)
{
var imgClass = objImg.getAttribute('class
if(doFreeze)
{
var imgs = document.getElementsByTagN
for(var i=0; i<imgs.length; i++)
{
if(imgs[i].getAttribute('c
{
imgs[i].src = baseImg;
imgs[i].setAttribute('clas
break;
}
}
baseImg = lastImg;
objImg.setAttribute('class
objImg.src = newImgFileName;
}
else if(imgClass != 'frozen')
{
lastImg = objImg.src;
objImg.src = newImgFileName;
}
}
</script>
ASKER
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.
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.
hi, ok, now i know exactly what you want - i will work on a rewrite
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-
<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(fr
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,
</TD>
<TD bgcolor="silver" align="left" width="49" height="60">
<IMG id="img2" src="images/detail.jpg" onclick="changeImage(this,
</TD>
<TD bgcolor="silver" align="left" width="76" height="60">
<IMG id="img3" src="images/type.jpg" onclick="changeImage(this,
</TD>
<TD bgcolor="silver" align="left" width="90" height="60">
<IMG id="img4" src="images/reqln.jpg" onclick="changeImage(this,
</TD>
<TD bgcolor="silver" align="left" width="56" height="60">
<IMG id="img5" src="images/contact.jpg" onclick="changeImage(this,
</TD>
<TD height="60"></TD>
</TR>
</TABLE>
</TD>
</tr>
</TABLE>
</BODY>
</HTML>
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-
<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(fr
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,
</TD>
<TD bgcolor="silver" align="left" width="49" height="60">
<IMG id="img2" src="images/detail.jpg" onclick="changeImage(this,
</TD>
<TD bgcolor="silver" align="left" width="76" height="60">
<IMG id="img3" src="images/type.jpg" onclick="changeImage(this,
</TD>
<TD bgcolor="silver" align="left" width="90" height="60">
<IMG id="img4" src="images/reqln.jpg" onclick="changeImage(this,
</TD>
<TD bgcolor="silver" align="left" width="56" height="60">
<IMG id="img5" src="images/contact.jpg" onclick="changeImage(this,
</TD>
<TD height="60"></TD>
</TR>
</TABLE>
</TD>
</tr>
</TABLE>
</BODY>
</HTML>
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(t
</TD>
<TD bgcolor="silver" align="left" width="49" height="60">
<IMG src="images/detail.jpg" onclick="clickImage(this, 'images/detail2.jpg')" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="76" height="60">
<IMG src="images/type.jpg" onclick="clickImage(this, 'images/type2.jpg')" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="90" height="60">
<IMG src="images/reqln.jpg" onclick="clickImage(this, 'images/reqln2.jpg')" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="56" height="60">
<IMG src="images/contact.jpg" onclick="clickImage(this, 'images/contact2.jpg')" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="57" height="60" >
<IMG src="images/req.jpg" onclick="clickImage(this, 'images/req2.jpg')" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="49" height="60">
<IMG src="images/detail.jpg" onclick="clickImage(this, 'images/detail2.jpg')" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="76" height="60">
<IMG src="images/type.jpg" onclick="clickImage(this, 'images/type2.jpg')" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="90" height="60">
<IMG src="images/reqln.jpg" onclick="clickImage(this, 'images/reqln2.jpg')" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="56" height="60">
<IMG src="images/contact.jpg" onclick="clickImage(this, 'images/contact2.jpg')" onMouseOver="changeImage(t
</TD>
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-
<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,clickedI
if (saveImg) {
saveImg.src = saveImg.src.replace(/[1|2]
}
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(t
</TD>
<TD bgcolor="silver" align="left" width="49" height="60">
<IMG src="images/detail.jpg" onclick="clickImage(this, 'images/detail2.jpg')" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="76" height="60">
<IMG src="images/type.jpg" onclick="clickImage(this, 'images/type2.jpg')" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="90" height="60">
<IMG src="images/reqln.jpg" onclick="clickImage(this, 'images/reqln2.jpg')" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="56" height="60">
<IMG src="images/contact.jpg" onclick="clickImage(this, 'images/contact2.jpg')" onMouseOver="changeImage(t
</TD>
<TD height="60"></TD>
</TR>
</TABLE>
</TD>
</tr>
</TABLE>
</BODY>
</HTML>
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-
<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,clickedI
if (saveImg) {
saveImg.src = saveImg.src.replace(/[1|2]
}
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(t
</TD>
<TD bgcolor="silver" align="left" width="49" height="60">
<IMG src="images/detail.jpg" onclick="clickImage(this, 'images/detail2.jpg')" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="76" height="60">
<IMG src="images/type.jpg" onclick="clickImage(this, 'images/type2.jpg')" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="90" height="60">
<IMG src="images/reqln.jpg" onclick="clickImage(this, 'images/reqln2.jpg')" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="56" height="60">
<IMG src="images/contact.jpg" onclick="clickImage(this, 'images/contact2.jpg')" onMouseOver="changeImage(t
</TD>
<TD height="60"></TD>
</TR>
</TABLE>
</TD>
</tr>
</TABLE>
</BODY>
</HTML>
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.
--------------------------
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.
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-
<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].s
}
function clickImage(imgName,lnk) {
if (!document.images) return;
if (saveImg) {
document.images[saveImg].s
}
document.images[imgName].s
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)"
<td bgcolor="silver" align="left" width="49" height="60"><a href="#"
onclick="return clickImage('detail',this)"
onMouseOver="swap('detail'
onMouseOut="swap('detail',
<td bgcolor="silver" align="left" width="76" height="60"><a href="#"
onclick="return clickImage('type',this)"
onMouseOver="swap('type',1
onMouseOut="swap('type',0)
<td bgcolor="silver" align="left" width="90" height="60"><a href="#"
onclick="return clickImage('reqln',this)"
onMouseOver="swap('reqln',
onMouseOut="swap('reqln',0
<td bgcolor="silver" align="left" width="56" height="60"><a href="#"
onclick="return clickImage('contact',this)
onMouseOver="swap('contact
onMouseOut="swap('contact'
<td height="60"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
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-
<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].s
}
function clickImage(imgName,lnk) {
if (!document.images) return;
if (saveImg) {
document.images[saveImg].s
}
document.images[imgName].s
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)"
<td bgcolor="silver" align="left" width="49" height="60"><a href="#"
onclick="return clickImage('detail',this)"
onMouseOver="swap('detail'
onMouseOut="swap('detail',
<td bgcolor="silver" align="left" width="76" height="60"><a href="#"
onclick="return clickImage('type',this)"
onMouseOver="swap('type',1
onMouseOut="swap('type',0)
<td bgcolor="silver" align="left" width="90" height="60"><a href="#"
onclick="return clickImage('reqln',this)"
onMouseOver="swap('reqln',
onMouseOut="swap('reqln',0
<td bgcolor="silver" align="left" width="56" height="60"><a href="#"
onclick="return clickImage('contact',this)
onMouseOver="swap('contact
onMouseOut="swap('contact'
<td height="60"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
@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 ;)
ASKER
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.getElementsByTagN
for(var i=0; i<imgs.length; i++)
{
if(imgs[i].getAttribute('c
{
imgs[i].src = baseImg;
imgs[i].setAttribute('clas
break;
}
}
baseImg = lastImg;
objImg.setAttribute('class
objImg.src = newImgFileName;
}
else if(imgClass != 'frozen')
{
lastImg = objImg.src;
objImg.src = newImgFileName;
}
}
</script>
Thank You
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.getElementsByTagN
for(var i=0; i<imgs.length; i++)
{
if(imgs[i].getAttribute('c
{
imgs[i].src = baseImg;
imgs[i].setAttribute('clas
break;
}
}
baseImg = lastImg;
objImg.setAttribute('class
objImg.src = newImgFileName;
}
else if(imgClass != 'frozen')
{
lastImg = objImg.src;
objImg.src = newImgFileName;
}
}
</script>
Thank You
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')"
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')"
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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.
ASKER
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.
Thank You.
hmmm.
mplungian - not very nice to say hmmmm - he accepted the right answer
He accepted an answer - It will work in some browsers and not in others.
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-
<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('on
objImg.removeAttribute('on
}
</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,
</TD>
<TD bgcolor="silver" align="left" width="49" height="60">
<IMG src="images/detail.jpg" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="76" height="60">
<IMG src="images/type.jpg" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="90" height="60">
<IMG src="images/reqln.jpg" onMouseOver="changeImage(t
</TD>
<TD bgcolor="silver" align="left" width="56" height="60">
<IMG src="images/contact.jpg" onMouseOver="changeImage(t
</TD>
<TD height="60"></TD>
</TR>
</TABLE>
</TD>
</tr>
</TABLE>
</BODY>
</HTML>