Image to Remain on Click

L

liunx

Guest
I use image buttons which changes when moused-overed and mousedOut...but I also want to have the image moused-overed to remain when it is clicked<br />
<br />
...below is the script i used...what and where do i need to insert the new code?<br />
<br />
<div align="left"> <br />
<table border="0" cellspacing="0" width="110" cellpadding="0"> <br />
<tr> <br />
<td align="left"> <br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"ABOUT_US_NTCR3.htm" onmouseout="BNB_mouseoff('main')" onmouseover="BNB_mouseon('main');return true "> <br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"main1.gif" name="main" VSPACE=0 border=0 alt="ABOUT US" onMouseOver="playSound(2)" onMouseOut="stopSound(2)" onClick="playSound(4)" align="left" width="130" height="40"></a> </td> <br />
</tr> <br />
<br />
What htmline do i need to insert into the script?<!--content--><head><br />
<script><br />
var _clicked = false;<br />
</script><br />
</head><br />
<body><br />
...<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"ABOUT_US_NTCR3.htm" onmouseout="if(!_clicked){BNB_mouseoff('main')}" onmouseover="BNB_mouseon('main');return true" onclick="_clicked=true"> <br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"main1.gif" name="main" VSPACE=0 border=0 alt="ABOUT US" onMouseOver="playSound(2)" onMouseOut="stopSound(2)" onClick="playSound(4)" align="left" width="130" height="40"></a><br />
...<!--content-->Originally posted by gil davis <br />
<head><br />
<script><br />
var _clicked = false;<br />
</script><br />
</head><br />
<body><br />
...<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"ABOUT_US_NTCR3.htm" onmouseout="if(!_clicked){BNB_mouseoff('main')}" onmouseover="BNB_mouseon('main');return true" onclick="_clicked=true"> <br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"main1.gif" name="main" VSPACE=0 border=0 alt="ABOUT US" onMouseOver="playSound(2)" onMouseOut="stopSound(2)" onClick="playSound(4)" align="left" width="130" height="40"></a><br />
... <br />
<br />
Uhmm...Gil, i must admit im a little slowww with this one.....do I just put the above script uhmm...where? :confused:<br />
<br />
and this is to what it refers to right?: onclick="_clicked=true"><!--content--><RANT><br />
Oh, come on! How much more precise do I have to be?<br />
<br />
The HEAD tags indicate that the script goes in the HEAD section. You can combine the one line in any script that already exists in the HEAD section, or you can cut and paste the SCRIPT tags and the one line of code in the HEAD section. If you don't have a HEAD section, you can cut and paste the HEAD tags along with the SCRIPT tags and the one line of code in your page right before the BODY tag. If you don't have a BODY tag, well I give up. Go find an HTML tutorial or a dummy's book on HTML.<br />
</RANT><br />
<br />
Ok, now that I got that out of my system ...<br />
<br />
In order to prevent the onmouseout event handler from changing the image, you have to insert a "gate" that has memory in the form of a variable (in this case, "_clicked" is that variable). If "_clicked" is false, then the mouseout is allowed to execute and change the image back to the default. If it is true, then it is disabled. The action of clicking on the link sets "_clicked" to true and inhibits the mouseout. BTW, there is no way to undo this action (you didn't ask for one, so I didn't give you one) except for a page reload/refresh. <br />
<br />
(BTW, you could go one step further and have yet another image that represents the clicked state and add an image change to the onclick handler and a "gate" to the mouseover handler.)<br />
<br />
A variable must be declared before you try to compare it to some value, otherwise you will get a run-time error. Hence, the one line of script in the head section, which initializes "_clicked" to false.<!--content-->Ok...gee..hmmm...I haven't actually gotten it yet done successfully..actually I'm way beyond over my head with this one...dunno why i even thought of this coz nobody would notice anyway...<br />
<br />
...now, don't rant:p but i think i have a pretty good idea already of what you're saying...especially the last part...of having another image appear when it's an "onclicked state" then i'd actually have to have 3 images buttons (oh no!) All the while, I thought I could just "re-use" the onmouseover-onMouseon image be in a sort of "frozen" state...but then, i have to reload the whole frame...<br />
<br />
Anyway, thanks! And sorry if increased your blood pressure...<br />
<br />
<br />
btw, here's how originally how my <head> looks (i know it's messy!): in case you're intrested...<br />
<br />
____<br />
<br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><br />
<meta name="GENERATOR" content="Microsoft FrontPage 4.0"><br />
<meta name="ProgId" content="FrontPage.Editor.Document"><br />
<title>Welcome to My Dumbassite!</title><br />
<script language="JavaScript"><br />
<!--<br />
browsok = (((navigator.appName == "Netscape")<br />
&& (parseInt(navigator.appVersion) >= 3))<br />
|| ((navigator.appName == "Microsoft Internet Explorer")<br />
&& (parseInt(navigator.appVersion)>=3)));<br />
if(browsok){<br />
// MouseOn <br />
// Note: the 184 is for the WIDTH, 34 is for the HEIGHT<br />
main1 = new Image(184,34);<br />
main1.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"main2.gif";<br />
updates1 = new Image(184,34);<br />
updates1.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"updates2.gif";<br />
Download <!--more-->1 = new Image(184,34);<br />
Download <!--more-->1.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"Download <!--more-->2.gif"; <br />
answers1 = new Image(184,34);<br />
answers1.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"answers2.gif";<br />
comments1 = new Image(184,34);<br />
comments1.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"comments2.gif";<br />
<br />
<br />
// MouseOff<br />
// Note: the 184 is for the WIDTH, 34 is for the HEIGHT<br />
main0 = new Image(184,34);<br />
main0.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"main1.gif";<br />
updates0 = new Image(184,34);<br />
updates0.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"updates1.gif";<br />
Download <!--more-->0 = new Image(184,34);<br />
Download <!--more-->0.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"Download <!--more-->1.gif";<br />
answers0 = new Image(184,34);<br />
answers0.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"answers1.gif";<br />
comments0 = new Image(184,34);<br />
comments0.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"comments1.gif";<br />
}<br />
function BNB_mouseon(n){<br />
if(browsok){<br />
imageON = eval(n + "1.src");<br />
document [n].src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/imageON;">http://www.webdeveloper.com/forum/archi ... p/imageON;</a><!-- m --><br />
}<br />
}<br />
function BNB_mouseoff(n){<br />
if(browsok){<br />
imageOFF = eval(n + "0.src");<br />
document [n].src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/imageOFF;">http://www.webdeveloper.com/forum/archi ... /imageOFF;</a><!-- m --><br />
}<br />
}<br />
// --><br />
</SCRIPT><!--content-->
 
You must log in or register to reply here.
Back
Top