Simple question by beginer

[Helpful person]

I am new to Javascript and have a fairly straightforward question. I
am trying to use an image as a link to open a new page with the
onmouseclick event. In general this seems to work fine with the open
statement.

I wish to use the same script at various places in my web and hence
wish to pass to the javascript function the URL location and the
width and height of the new page. I am having no luck trying to get
the open statement to work with passed arguements.

After doing a little research it seems I should be using the eval
statement, but this does not work. What am I doing wrong, and should
I be passing arguements to the open statement a different way?

The web page is at www.snowfisher.com/test.htm

 

[David Golightly]

I am new to Javascript and have a fairly straightforward question. I
am trying to use an image as a link to open a new page with the
onmouseclick event. In general this seems to work fine with the open
statement.

No JavaScript required:
<a href="img-src.jpg" target="_blank"><img src="img-src.jpg"
alt="something"></a>

The "target" attribute isn't valid XHTML, but you're not going for
that anyway.

After doing a little research it seems I should be using the eval
statement, but this does not work. What am I doing wrong, and should
I be passing arguements to the open statement a different way?

You should actually AVOID using the "eval" statement, until you have a
better understanding of its power and pitfalls. For most uses, there
are better workarounds.

In this case, your problem is the fact that you have a URL outside of
a string. What you mean is not:

function openwindow2(image_location,awidth,aheight) {
x = "window.open(" + image_location + ",'_blank'," +
"'width=200,height=100')"
alert(x)
eval( x)
}

but:

function openwindow2(image_location, awidth, aheight) {
window.open(image_location, '_blank', 'width=200,height=200');
}

Using "eval" here is quite overkill, where a simple function call will
suffice.

-David

 

[Helpful person]

No JavaScript required:
<a href="img-src.jpg" target="_blank"><img src="img-src.jpg"
alt="something"></a>

The "target" attribute isn't valid XHTML, but you're not going for
that anyway.


You should actually AVOID using the "eval" statement, until you have a
better understanding of its power and pitfalls. For most uses, there
are better workarounds.

In this case, your problem is the fact that you have a URL outside of
a string. What you mean is not:

function openwindow2(image_location,awidth,aheight) {
x = "window.open(" + image_location + ",'_blank'," +
"'width=200,height=100')"
alert(x)
eval( x)

}

but:

function openwindow2(image_location, awidth, aheight) {
window.open(image_location, '_blank', 'width=200,height=200');

}

Using "eval" here is quite overkill, where a simple function call will
suffice.

-David

The target attribute is not valid html strict which is one of the
reasons I need to use javascript.

I am not surprised that eval is not the correct solution. However,
how do I pass the width and height parameters to the open statement?

 

[David Golightly]

The target attribute is not valid html strict which is one of the
reasons I need to use javascript.

In that case, don't use target, then. Open the link in the current
window, and attach a JavaScript click event handler to the anchor tag
to prevent this from happening, should JS be enabled.

I am not surprised that eval is not the correct solution. However,
how do I pass the width and height parameters to the open statement?

With my above considerations, here's how this would look:

function openNewWindow(image_location, awidth, aheight) {
window.open(image_location, '_blank', 'width='+awidth
+',height='+aheight);
return false; // prevents default behavior
}

and your HTML tag:

<a href="img-src.jpg" onclick="openNewWindow(this.href, 300,
200);"><img src="img-src.jpg" alt="my picture"></a>

-David

 

[Helpful person]

In that case, don't use target, then. Open the link in the current
window, and attach a JavaScript click event handler to the anchor tag
to prevent this from happening, should JS be enabled.


With my above considerations, here's how this would look:

function openNewWindow(image_location, awidth, aheight) {
window.open(image_location, '_blank', 'width='+awidth
+',height='+aheight);
return false; // prevents default behavior

}

and your HTML tag:

<a href="img-src.jpg" onclick="openNewWindow(this.href, 300,
200);"><img src="img-src.jpg" alt="my picture"></a>

-David

Thank you very much. I'll try this when I have time.

 

[RobG]

With my above considerations, here's how this would look:

function openNewWindow(image_location, awidth, aheight) {
window.open(image_location, '_blank', 'width='+awidth
+',height='+aheight);
return false; // prevents default behavior

Only if that value is returned by the onclick handler itself. I guess
stricktly that should be:

if (window && typeof window.open == 'function'){
window.open(...);
return false;
}

Though it is likely not necessary.

}

and your HTML tag:

<a href="img-src.jpg" onclick="openNewWindow(this.href, 300,

To cancel navigation, pass the returned value to the onclick handler:

<a ... onclick="return openNewWindow(...);">


Otherwise navigation isn't cancelled.

 

[Thomas 'PointedEars' Lahn]

if (window && typeof window.open == 'function'){

Will not work in MSHTML where `typeof' for DOM methods yields
"object". Hence my writing isMethod() and isMethodType() in
http://PointedEars.de/scripts/types.js


Regards,

PointedEars

 

[David Golightly]

To cancel navigation, pass the returned value to the onclick handler:

<a ... onclick="return openNewWindow(...);">

Otherwise navigation isn't cancelled.

Right, good catch.

-David