Overriding '<a href' with '<a onClick' for JavaScript function openWindow(URL) for image and link...

Kevin Lyons · Jul 20, 2004

Hello,

Can anyone assist me with what I am trying to do with the following
code (six different scenarios to try to make the functionality work
correctly)?

I want to always (and ONLY) display in the status bar 'Symantec
Corporation' whenever anyone mouses over (onMouseOver) my image or
link OR when one clicks while holding the left mouse down (onClick) on
the same image or link. Upon releasing the mouse (onMouseOut), the
status bar should be 'blank'. I need the link to open in a new window
via my function openWindow(URL) code.

What is happening in most of the six scenarios, is that when one
clicks the link, either the function doesn't engage, but rather the <a
href= takes effect instead OR that status bar shows
'JavaScript

penWindow('http://www.symantec.com/');' when one clicks
while holding the left mouse down (onClick) on the image or link.

Additionally, for only the link, I need the CSS/style to show 'red'
when one mouses over (onMouseOver) it and then change to 'blue' upon
releasing the mouse (onMouseOut).

How about integrating 'style="cursor:hand"' into the code or perhaps
setting some of the data via a <div> or <span> snippet?

Thanks much,

Paul

----------------------

<html>
<head>
<style type="text/css">a:link {text-decoration:underline;
color:blue;}a:visited{text-decoration:underline; color:blue;}a:hover
{text-decoration:underline; color:red;}a:active
{text-decoration:underline; color:blue;}</style>
<script language="JavaScript">
function openWindow(URL) {
var availWidth = screen.availWidth + 1;
var availHeight = screen.availHeight;
var x = 0, y = 0;
if (document.all) {
x = window.screenTop;
y = window.screenLeft;
}
else if (document.layers) {
x = window.screenX;
y = window.screenY;
availWidth = availWidth - 11;
availHeight = availHeight - 155;
}
var arguments =
'resizable=yes,toolbar=yes,location=yes,directories=yes,addressbar=yes,scrollbars=yes,status=yes,menubar=yes,top=0,left=0,screenX='+x+',screenY='+y+',width='+availWidth+',height='+availHeight;
var newWindow = window.open(URL,'_blank',arguments);
}
</script>
</head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0"
text="#333333" link="#336699" vlink="#336699"
alink="#990033" bgcolor="#999999">
<center>
<table>
<tr>
<td>
<b>First Scenario</b>
<a href="JavaScript

penWindow('http://www.symantec.com/');"
onMouseOver="window.status='Symantec Corporation';
return true;" onMouseDown="window.status='Symantec Corporation';
return true;" onMouseOut="window.status=''; return
true;"><img src="http://www.symantec.com/images/downloads/product_shot.gif"></a>
<a href="JavaScript

penWindow('http://www.symantec.com/');"
onMouseOver="window.status='Symantec Corporation';
return true;" onMouseDown="window.status='Symantec Corporation';
return true;" onMouseOut="window.status=''; return
true;">Symantec1</a>
</td><td>  </td><td>
<b>Second Scenario</b>
<a onMouseOver="window.status='Symantec Corporation'; return true;"
onMouseOut="window.status='Symantec
Corporation'; return true;" onMouseDown="window.status='Symantec
Corporation'; return true;"
onClick="openWindow('http://www.symantec.com/');"><img
src="http://www.symantec.com/images/downloads/product_shot.gif"></a>
<a onMouseOver="window.status='Symantec Corporation'; return true;"
onMouseOut="window.status='Symantec
Corporation'; return true;" onMouseDown="window.status='Symantec
Corporation'; return true;"
onClick="openWindow('http://www.symantec.com/');">Symantec2</a>
</td><td>  </td><td>
<b>Third Scenario</b>
<a onMouseOver="window.status='Symantec Corporation'; return true;"
onMouseOut="window.status=''; return true;"
onMouseDown="window.status='Symantec Corporation'; return true;"
onClick="openWindow('http://www.symantec.com/');"
style="cursor:hand"><img
src="http://www.symantec.com/images/downloads/product_shot.gif"></a>
<a onMouseOver="window.status='Symantec Corporation'; return true;"
onMouseOut="window.status=''; return true;"
onMouseDown="window.status='Symantec Corporation'; return true;"
onClick="openWindow('http://www.symantec.com/');"
style="cursor:hand">Symantec3</a>
</td></tr>
<tr><td><b>Fourth Scenario</b>
<a href="" onMouseOver="window.status='Symantec Corporation'; return
true;" onMouseOut="window.status=''; return
true;" onMouseDown="window.status='Symantec Corporation'; return
true;"
onClick="openWindow('http://www.symantec.com/'); return true;"
style="cursor:hand"><img
src="http://www.symantec.com/images/downloads/product_shot.gif"></a>
<a href="" onMouseOver="window.status='Symantec Corporation'; return
true;" onMouseOut="window.status=''; return
true;" onMouseDown="window.status='Symantec Corporation'; return
true;"
onClick="openWindow('http://www.symantec.com/'); return true;"
style="cursor:hand">Symantec4</a>
</td><td>  </td><td>
<b>Fifth Scenario</b>
<a href="#" style="text-decoration: none; cursor: default;"
onClick="return false;" onMouseOver="window.status=' ';return
true;"><img src="http://www.symantec.com/images/downloads/product_shot.gif"></a>
<a href="#" style="text-decoration: none; cursor: default;"
onClick="return false;" onMouseOver="window.status=' ';return
true;">Symantec5</a>
</td><td>  </td><td>
<b>Sixth Scenario</b>
<a onMouseOver="window.status='Symantec Corporation'; return true;"
onMouseOut="window.status=''; return true;"
onMouseDown="window.status='Symantec Corporation'; return true;"
onClick="openWindow('http://www.symantec.com/');" style="a:link
{text-decoration:underline; color:blue;}
a:visited{text-decoration:underline; color:blue;} a:hover
{text-decoration:underline; color:red;} a:active
{text-decoration:underline; color:blue;}"><img
src="http://www.symantec.com/images/downloads/product_shot.gif"></a>
<a onMouseOver="window.status='Symantec Corporation'; return true;"
onMouseOut="window.status=''; return true;"
onMouseDown="window.status='Symantec Corporation'; return true;"
onClick="openWindow('http://www.symantec.com/');" style="a:link
{text-decoration:underline; color:blue;}
a:visited{text-decoration:underline; color:blue;} a:hover
{text-decoration:underline; color:red;} a:active
{text-decoration:underline; color:blue;}">Symantec6</a>
</td>
</tr>
</table>
</body>
</html>

Kevin Lyons · Jul 20, 2004

All,

First of all, I errored, I would prefer the status to show
'http://www.symantec.com/' for onMouseOver and onClick instead of
'Symantec Corporation'.

After making some changes, by adding 'return false;' in the onClick
handler it is doing the trick for the '<a href=' portion!!

I have added this JavaScript line 'var hrefName =
"http://www.symantec.com/";' to show how I need it enhanced. The
reason for this is because I am going to display a different
link/company depending upon other code in the file and need the '<a
href=' to reference a variable array of URLs.

In the meantime, all is now working with my additions but please see
the '<a href=hrefName' portion below.

How can I pass a JavaScript variable to the '<a href=' portion of the
HTML?

By the way, I am primarily interested in getting it to work correctly
for Internet Explorer.

------------------------------------------------------

<a href="http://www.symantec.com/"
onClick="openWindow(hrefName);return false"
onMouseOver="window.status=hrefName"
onMouseDown="window.status=hrefName"
onMouseOut="window.status=''"><img
src="http://www.symantec.com/images/downloads/product_shot.gif"></a>
<a href="http://www.symantec.com/"
onClick="openWindow(hrefName);return false"
onMouseOver="window.status=hrefName;"
onMouseDown="window.status=hrefName"
onMouseOut="window.status=''">Symantec10</a>
<a href=hrefName onClick="openWindow(hrefName);return false"
onMouseOver="window.status=hrefName"
onMouseDown="window.status=hrefName"
onMouseOut="window.status=''"><img
src="http://www.symantec.com/images/downloads/product_shot.gif"></a>
<a href=hrefName onClick="openWindow(hrefName);return false"
onMouseOver="window.status=hrefName;"
onMouseDown="window.status=hrefName"
onMouseOut="window.status=''">Symantec20</a>

------------------------------------------------------

Thanks much,

Kevin

(e-mail address removed) (Kevin Lyons) wrote in message...

Mike Foster · Jul 27, 2004

Kevin said:
...
How can I pass a JavaScript variable to the '<a href=' portion of the
HTML?
...

Have a look at the following demo. Perhaps it will help.
http://cross-browser.com/toys/link_interception.html

Need help with change color of td and link	2	Feb 25, 2005
hiding URL in popup window title and status bars	4	Aug 20, 2006
php with javascript	7	Apr 11, 2005
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
variable from URL $_GET	1	Apr 5, 2006
Javascript / FireFox help needed	9	Jul 20, 2007
javascript in firefox fine but in IE it chokes on a long string??	2	Nov 2, 2007
Mouseover - Image Change on MO	1	Feb 22, 2004

Overriding '<a href' with '<a onClick' for JavaScript function openWindow(URL) for image and link...

Kevin Lyons

Kevin Lyons

Mike Foster

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads