Forum Moderators: open
I just googled 1.5 hours, but I'm still clueless.
I want to change the onMouseover property of certain links in the whole document:
<a href="normal">normal</a>
<a href="blank" target="_blank">blank</a>
<script>
function displaylayer(obj) {
alert("mouseover");
return true;
}
var links = document.getElementsByTagName('A');
for (var i=0; i<links.length; i++) {
if (links[i].target == "_blank") {
links[i].onMouseover="javascript:displaylayer(this);";
}
}
</script>
The links don't seem to have the new onMouseover value.
There is no javascript error.
But links[i].href="..." works.
What am I doing wrong here?
Any hints greatly appreciated!
Thank you,
Hannes.
What you need to do is to attach the event to the elements. IE and W3C compliant browsers handle this differently so you need to account for this:
<script type="text/javascript">
<!--
//the function being added
function displaylayer() {
alert("mouseover");
return true;
}
//this function adds the events
function changeLinks(){
var alinks = document.getElementsByTagName('A');
for (var i=0; i<alinks.length; i++) {
if (alinks[i].target == "_blank") {
//if IE
if(!window.event){
alinks[i].addEventListener('mouseover',displaylayer,false)
//otherwise
}else{
alinks[i].attachEvent('onmouseover',displaylayer)
}
}
}
}
//-->
</script>
</head>
<body onload="changeLinks()">
<a href="javascript:void(0)">normal</a>
<a href="javascript:void(0)" target="_blank">blank</a>
</body>
That should do the trick.
ajkimoto
Thank you very much! That does the trick :-)
Here my complete code:
document.write("<div id='opensinnewwindow' style='position:absolute; visibility:hidden; top:1; left:1; background-color:#0000ff; font-family:Verdana; font-size: 11px; color:#ffffff; font-weight: bold;'>This link opens in a new window!</div>");
var links = document.getElementsByTagName('A');
for (var i=0; i<links.length; i++) {
if (links[i].target == "_blank") {
if(window.addEventListener){//Moz,NN
links[i].addEventListener('mouseover',displaylayer,false);
links[i].addEventListener('mouseout',displaylayer,false);
} else {//IE
links[i].attachEvent('onmouseover',displaylayer);
links[i].attachEvent('onmouseout',displaylayer);
}
}
}
var state = 0;
var mousex = 0;
var mousey = 0;
var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
function getMouseXY(e) {
if (IE) {
mousex = event.clientX + document.body.scrollLeft
mousey = event.clientY + document.body.scrollTop
} else {
mousex = e.pageX;
mousey = e.pageY;
}
if (mousex < 0) { mousex = 0; }
if (mousey < 0) { mousey = 0; }
mousex = mousex + 20;
return true;
}
function displaylayer() {
if (state == 1) { state = 0; } else { state = 1; }
if(document.layers){//NN4+
document.layers['opensinnewwindow'].style.left = mousex;
document.layers['opensinnewwindow'].style.top = mousey;
document.layers['opensinnewwindow'].visibility = state? "show" : "hide";
} else if(document.getElementById) {//Moz,NN6,IE5+
var obj = document.getElementById('opensinnewwindow');
obj.style.visibility = state? "visible" : "hidden";
document.getElementById('opensinnewwindow').style.left = mousex;
document.getElementById('opensinnewwindow').style.top = mousey;
} else if(document.all) {//IE 4
document.all['opensinnewwindow'].style.left = mousex;
document.all['opensinnewwindow'].style.top = mousey;
document.all['opensinnewwindow'].style.visibility = state? "visible" : "hidden";
}
return false;
}
It parses the whole document and displays the div-layer whenever the mouse is over a link which will open in a new window! I just simply include this js-file into any existing page (at the bottom!) and it works very well :-)
Thanks again and best regards,
Hannes.
