By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,261 Members | 1,658 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,261 IT Pros & Developers. It's quick & easy.

How to pass image file name (SRC) to a function that creates a Web page?

P: n/a
Hi,

I'd like to know if it's possible to pass an image name (the IMG SRC
attribute) from HREF element to a function that is activated by onClick
event and creates a Web page.

I have this HREF element:

<A HREF onClick="showLargePicture()"><IMG HEIGHT=25 SRC="test01.jpg"></A>

When an user clicks on the picture, the following code is performed:

function showLargePicture() {
var lines="";
lines+="<HTML><HEAD>";
lines+="<TITLE>Any Title</TITLE>";
lines+="</HEAD>";
lines+="<BODY onClick = 'window.close()'>";
lines+="<IMG SRC='test01.jpg'>";
lines+="<BR>";
lines+="Click on the window to closes it";
lines+="</BODY></HTML>";
var newWin=window.open();
newWin.document.open();
newWin.document.write(lines);
newWin.document.close();
newWin.focus();
}

Is it possible to modify the code so it'll pass the SRC attribute to the
function and thus to use it with any picture on the parent Web page?

Thanks!

Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Amir wrote:
Hi,

I'd like to know if it's possible to pass an image name (the IMG SRC
attribute) from HREF element to a function that is activated by onClick
event and creates a Web page.

I have this HREF element:

<A HREF onClick="showLargePicture()"><IMG HEIGHT=25 SRC="test01.jpg"></A>

When an user clicks on the picture, the following code is performed:

function showLargePicture() {
var lines="";
lines+="<HTML><HEAD>";
lines+="<TITLE>Any Title</TITLE>";
lines+="</HEAD>";
lines+="<BODY onClick = 'window.close()'>";
lines+="<IMG SRC='test01.jpg'>";
lines+="<BR>";
lines+="Click on the window to closes it";
lines+="</BODY></HTML>";
var newWin=window.open();
newWin.document.open();
newWin.document.write(lines);
newWin.document.close();
newWin.focus();
}

Is it possible to modify the code so it'll pass the SRC attribute to the
function and thus to use it with any picture on the parent Web page?

Thanks!


It's real easy, but it doesn't make much sense, the image that opens in
new window will be the same size as the image on the page. Is that what
you want?
Mick

Jul 23 '05 #2

P: n/a
"Mick White" <mw******@BOGUSrochester.rr.com> wrote
Amir wrote:
Hi,

I'd like to know if it's possible to pass an image name (the IMG SRC
attribute) from HREF element to a function that is activated by onClick
event and creates a Web page.

I have this HREF element:

<A HREF onClick="showLargePicture()"><IMG HEIGHT=25 SRC="test01.jpg"></A>
When an user clicks on the picture, the following code is performed:

function showLargePicture() {
var lines="";
lines+="<HTML><HEAD>";
lines+="<TITLE>Any Title</TITLE>";
lines+="</HEAD>";
lines+="<BODY onClick = 'window.close()'>";
lines+="<IMG SRC='test01.jpg'>";
lines+="<BR>";
lines+="Click on the window to closes it";
lines+="</BODY></HTML>";
var newWin=window.open();
newWin.document.open();
newWin.document.write(lines);
newWin.document.close();
newWin.focus();
}

Is it possible to modify the code so it'll pass the SRC attribute to the
function and thus to use it with any picture on the parent Web page?

Thanks!


It's real easy, but it doesn't make much sense, the image that opens in
new window will be the same size as the image on the page. Is that what
you want?
Mick


Mick,
no, the image that opens in new window won't be the same size as the image
on the page from which it opens. One image is specified by:
<IMG HEIGHT=25 SRC="test01.jpg">
while the other image (which will be on the page that opens) is specified
by:
<IMG SRC='test01.jpg'>.
Jul 23 '05 #3

P: n/a
I wrote this to veiw animated gifs, wanted to be able to change the
windows size and background color, but I'm sure there's a much simpler
script out there..
its written for five images..
<html><head><title>newWindow</title>
<script language="javascript"><!--
function z1(){
with(document.xx){
p1b.value=('001.jpg');
bcb.value=('ffff00');
hb.value=('200');
wb.value=('200')}}
function z2(){
with(document.xx){
p1b.value=('002.jpg');
bcb.value=('ff0000');
hb.value=('300');
wb.value=('300')}}
function z3(){
with(document.xx){
p1b.value=('003.jpg');
bcb.value=('ffffff');
hb.value=('400');
wb.value=('400')}}
function z4(){
with(document.xx){
p1b.value=('004.jpg');
bcb.value=('0000ff');
hb.value=('500');
wb.value=('500')}}
function z5(){
with(document.xx){
p1b.value=('005.jpg');
bcb.value=('00ffff');
hb.value=('600');
wb.value=('600')}}
function wm(){
var p1=xx.p1b.value;
var bc=xx.bcb.value;
var h=xx.hb.value;
var w=xx.wb.value;
preWindow=open("", "preWindow","status=no, toolbar=no, menubar=no,
height="+h+", width="+w+", resizable=yes, top=0, left=0");
with(preWindow.document){
open();
write('<html><head><title>..::take.care::..<\/title>\n'
+'<style type="text/css">\n'
+'body{background-color:#'+bc+';\n'
+'background-image:url('+p1+');\n'
+'background-repeat:no-repeat;\n'
+'background-position:center;\n'
+'margin:0px}<\/style><\/head>'
+'<body onBlur="self.close()">'
+'<\/body><\/html>');
close();
focus();}} //--></script>
<style type="text/css">
body{background-color:#ffffff;
color:#000000}</style></head>
<body><div align="center">
<form name="xx">
<input type="hidden" name="p1b" size="8" value="">
<input type="hidden" name="bcb" size="8" value="">
<input type="hidden" name="hb" size="8" value="">
<input type="hidden" name="wb" size="8" value="">
<input type="image" src="001.jpg" height="60" width="60"
onClick="z1();wm()">
<input type="image" src="002.jpg" height="60" width="60"
onClick="z2();wm()">
<input type="image" src="003.jpg" height="60" width="60"
onClick="z3();wm()">
<input type="image" src="004.jpg" height="60" width="60"
onClick="z4();wm()">
<input type="image" src="005.jpg" height="60" width="60"
onClick="z5();wm()">
<h2>click anywhere on screen to close newWindow</h2>
</form></div></body></html>

Jul 23 '05 #4

P: n/a
Amir wrote:


Mick,
no, the image that opens in new window won't be the same size as the image
on the page from which it opens. One image is specified by:
<IMG HEIGHT=25 SRC="test01.jpg">
while the other image (which will be on the page that opens) is specified
by:
<IMG SRC='test01.jpg'>.


function showLargePicture(src) {
var lines="<HTML><HEAD><TITLE>Any Title</TITLE></HEAD>";
lines+="<BODY onclick = 'window.close()'>";
lines+="<IMG SRC='"+src+"'>Click on the window to close it";
lines+="</BODY></HTML>";
var newWin=window.open();
newWin.document.open();
newWin.document.write(lines);
newWin.document.close();
newWin.focus();
}

<image src="a.gif" onclick="showLargePicture(this.src)">

Mick
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.