<html>
<head>
<style>
.hmmessage P
{
margin:0px;
padding:0px
}
body.hmmessage
{
FONT-SIZE: 10pt;
FONT-FAMILY:Tahoma
}
</style>
</head>
<body class='hmmessage'>I had a similar problem with some expand-colapse objects that would <BR>
hide the previously shown title content while expanding the content <BR>
of currently clicked title, etc.<BR>
<BR>
Lots of ideas came through my mind; like using numbered ids, or loop the <BR>
collection to reset all before expanding the clicked title, etc, but I droped<BR>
them all before my last decision.<BR>
I had some real headache with it, eventhough the idea was simple, it <BR>
required a hell of testing and rewritting both html, css, even script statements<BR>
mostly because of nested elements.etc<BR>
<BR>
The idea was to use a 'global var' as a "short term memory" cell for keeping track<BR>
of the last expanded element until new title is clicked. Yet at the end I was forced<BR>
to rewrite it all to make this aproach work on different browsers.<BR>
<BR>So, what I will bring you here, is a very simple and modified script of the same <BR>
aproach that should solve your problem. I'm using classes here to shorten your <BR>
script and possibly make it easier to read.<BR>
The Script:<BR>
<BR>
var current='';<BR>
<BR>
function persist(actual) {<BR> if (actual.target) <BR>
actual=actual.target<BR> else <BR>
actual=actual.srcElement<BR>
if (actual.className=="borderOff")<BR> current.className="borderOff"<BR> actual.className="borderOn"<BR> current=actual<BR> }<BR>
<BR>
The HTML code:<BR>
<BR>
<img src='...' class='borderOff' onMouseOver="persist(event)"><BR> <img src='...' class='borderOff' onMouseOver="persist(event)"><BR> <img src='...<BR>
<BR>
The CSS:<BR>
<BR>
.borderOn{<BR> border: solid 2px red;<BR>
}<BR>
.borderOff{<BR> border:none;<BR>
}<BR>
<BR>
This way you can chose what image gets the behaviour so that other ordinary <BR>
images remain excluded in a 'clean' way.<BR>
<BR>
ps.:<BR>
Reading earlier questions I find that you are using different bored colors!<BR>
In casse it's important, I propose you do the following:<BR>
<BR>
Youll have to first add Id's to the images so the border-color is specified<BR>
through "Id" selector in css.<BR>
<BR>
Asuming image Id's are given as follows: border1,..2,..3, etc, all you have to do is, <BR>
-add these extra css lines: <BR>
<BR>
#border1{<BR> border-color:red;<BR>
}<BR>#border2{<BR> border-color:green;<BR>
}<BR>#border3{<BR> border-color:blue;<BR>
}<BR>
...<BR>
<BR>
While off course, your image tags will become:<BR>
<img src='...' id='border1' class='borderOff' onMouseOver="persist(event)"> a.s.o.<BR>
<BR>
That's all!<BR>
If you decide use it, I would be glad if you add my signiture to it,<BR>
dont thank me. :)<BR>
<BR>
Regards,<BR>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <BR> Troy III <BR> progressive art enterprise<BR>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<BR><BR><BR><BR>
<HR id=stopSpelling>
<BR>
> Date: Sat, 6 Oct 2007 11:14:24 -0400<BR>> To: javascript@lists.evolt.org<BR>> From: tedd@sperling.com<BR>> Subject: [Javascript] Maintaining state<BR>> <BR>> Hi gang (again):<BR>> <BR>> I hope that my flurry of recent questions is not abusing your <BR>> kindness. If so, please tell me.<BR>> <BR>> Here's the situation.<BR>> <BR>> Let's say there are three images on a web page such that when the <BR>> user moves his/her cursor over one image, a border appears. No <BR>> problem, I can do that with css.<BR>> <BR>> However, I would like the border to remain (i.e., maintain state) <BR>> after the user has moved the cursor off the image and stay that way <BR>> until another image is subject to a rollover -- and then, that image <BR>> would maintain state. Only one image maintains state.<BR>> <BR>> I know this is counter to the way css does things, but it's not so <BR>> much in application HIG (human interface guidelines), where <BR>> maintaining state is common.<BR>> <BR>> I am sure that I could stumble around and come up with something, but <BR>> I would think this would be more of a staple function/method commonly <BR>> used by javascript experts (how's that for kissing up?).<BR>> <BR>> In any event, if any of you have encountered this before, I would <BR>> appreciate guidance.<BR>> <BR>> Thanks,<BR>> <BR>> tedd<BR>> <BR>> -- <BR>> -------<BR>> http://sperling.com http://ancientstones.com http://earthstones.com<BR>> _______________________________________________<BR>> Javascript mailing list<BR>> Javascript@lists.evolt.org<BR>> http://lists.evolt.org/mailman/listinfo/javascript<BR><BR><br /><hr />Windows Live Hotmail and Microsoft Office Outlook – together at last. <a href='http://office.microsoft.com/en-us/outlook/HA102225181033.aspx?pid=CL100626971033' target='_new'>Get it now!</a></body>
</html>