Script: CSS Menu highlight
http://www.dynamicdrive.com/dynamici...shighlight.htm
Is there any way I could get the table cells to stay the mouseover color once clicked on with this script? Also how would I target a frame?
Any help is appreciated.
Nec
Printable View
Script: CSS Menu highlight
http://www.dynamicdrive.com/dynamici...shighlight.htm
Is there any way I could get the table cells to stay the mouseover color once clicked on with this script? Also how would I target a frame?
Any help is appreciated.
Nec
To target frames, change
<a href="http://www.urlgoeshere.com" class="menulink" class=&{ns4class};>
to
To target frames, change
<a href="http://www.urlgoeshere.com" target="YOU_FRAME_NAME" class="menulink" class=&{ns4class};>
Why would you need cells to stay with the same color if the page will be refreshed anyway and it will get reset?
*sigh*
FPit...the reason he would want to is obvious. The page isn't being reset. He's using frames, remember? Only the target frame will be reset, and guess what? The target frame is probably not the one with the nav.
Anywho, you can add this right underneath where it says var ns4class=''
Then, in the links themselves, add id="link1" for the first link (duh). Then, add onClick="color(1)" for the first link...like so:Code:var selected=0
function color(num){
var name="link"
var el=""
if (document.getElementById(name+selected)){
name="link"+selected
el=document.getElementById(name)
if (el.className=="menulinked") el.className="menulink"
}
name="link"+num
el=document.getElementById(name)
el.className="menulinked"
selected=num
}
Obviously, you'll have some other stuff in there as well (class names and such. keep them intact.)Code:<a href="./myPage.html" target="myFrame" id="link1" onClick="color(1)">Click ME!</a>
<a href="./myPage.html" target="myFrame" id="link2" onClick="color(2)">Click ME!</a>
Finally, create a CSS class called menulinked and set it up how you want...(underneath a.menulink:hover{})
Code:.menulinked {
display: block;
width: 198px;
text-align: left;
text-decoration: none;
font-family:arial;
font-size:12px;
color: #000000;
border: solid 1px #6100C1;
background-color:#F0E1FF;
}
Haha, I failed to connect the two together, my bad, brain glitch...
Thanx for the help.
But now the cell only stays highlighted until the next link is clicked.
Nec
rofl, Now I'm the one who missed something...I assumed that was the effect you were looking for?
Please describe this a little better, and I'll fix it, lol....
I would like them to stay that way once clicked on untill the page is refreshed or reopened. As it is now it works, but not the way I'd like it to.
Nec
Are you talking about the cell staying highlighted the way a visited link would function?
Yes, but resetting when refreshed.
Simple enough. Get rid of the javascript function stuff I gave you. Ignore the id="link1" part, and simply put onClick="this.className='menulinked'"
Sooo....delete:
And now the links =Code:var selected=0
function color(num){
var name="link"
var el=""
if (document.getElementById(name+selected)){
name="link"+selected
el=document.getElementById(name)
if (el.className=="menulinked") el.className="menulink"
}
name="link"+num
el=document.getElementById(name)
el.className="menulinked"
selected=num
}
Code:<a href="./myPage.html" target="myFrame" onClick="this.className='menulinked'">Click ME!</a>
Thank you.
Nec