[SOLVED] How to highlight selected link.

[andrewmoir]

Hi all,

I initially put this in Javascript section, however its more appropriate here.

I have page with links (generated by PHP).  Each link opens a popup window.

When clicking on a link I need that link to be highlighted (marked) so that when finished with the popup I can tell which link I was last on.

I need the link to lose its highlights once I select another link, and for that new link to get the highlight.

Highlight can be a change of colour, or a pointer.

Note that a standard text link is highlighted when selected, but when the window loses focus the highlight disappears.

Have googled this topic to death and so far have come up with nothing.

Thank you for your help

Andy

[fenway]

And my initial comment still applies... why can't you capture the onclose?

[nogray]

you can do this with some javascript and style. basiclly, when you click on a link the script goes through the links, find the higlighted link and unhighlighted. Than highlight the link you clicked on. If you have a lot of the links in the page, put the window.open before the selectLink (in the sample below)
[code]
<script language="javascript">
function hide_selection(){
var lnks = document.getElementsByTagName("A");
for(i=0; i<lnks.length; i++){
if (lnks[i].className == "selected_link"){
lnks[i].className = "";
break;
}
}
}

function selectLink(ob){
hide_selection();
ob.className = "selected_link";
}
</script>
<style>
.selected_link {background:#e9e5c6;}
</style>
<a href="#" onclick="selectLink(this); window.open('test1.html', '', '');">Link 1</a><br />
<a href="#" onclick="selectLink(this); window.open('test1.html', '', '');">Link 2</a><br />
<a href="#" onclick="selectLink(this); window.open('test1.html', '', '');">Link 3</a><br />
<a href="#" onclick="selectLink(this); window.open('test1.html', '', '');">Link 4</a><br />
[/code]

[andrewmoir]

Nogray:  Thanks very much that worked great. ;D

small problem
1) - I have a long page of links, once one of the links on the bottom of the page is selected, it highlights perfectly, but it also refreshes the page and so the page returns to the top, the link remains highlighted but offscreen at the bottom of the page.
???Solution???Somehow using the anchor tag and the Name attribute??

2)- putting the window.open before the selectLink gives no popups??e.g.

<a href="#" window.open('test1.html', '', ''); onclick="selectLink(this);">Link 1</a><br />
<a href="#" onclick="selectLink(this); window.open('test1.html', '', '');">Link 2</a><br />

1st link does not work, 2nd does.


Fenway:  I apologise, my HTML and PHP is great but when it comes to Javascript I am a copy and paste monkey - thus the reason I did not use your suggestion - I did attempt to google it though.

Thanks for you help so far..

[nogray]

this should do everything you need
[code]
<a href="#" onclick="window.open('test1.html', '', ''); selectLink(this); return false;">Link 1</a><br />
[/code]

[andrewmoir]

Great,

thank you very much to Nogray for his help.

This topic may be marked closed  /  Solved .  Can't find

FYI - If you want the popup to always get the focus:

add  - win.focus();

<a href="#" onclick="selectLink(this); win =
window.open('quickview.php?numrows=10&sample=<?php echo $samplenumber;
?>&b=b', 'popup', '');  win.focus(); return false;">b</a>

regards