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

A

Amir

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!
 
M

Mick White

Amir said:
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!
Click to expand...

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
 
A

Amir

Mick White said:
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
Click to expand...

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'>.
 
W

wasntme

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>
 
M

Mick White

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'>.
Click to expand...



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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to properly insert a landing page within same container beneath an image element? 0
Image shifts to the right when export the page to pdf 4
I Need Help with making a function that draws in a canvas using location data. 1
How do I output this recursive function correctly to a web browser? 2
How to stop an animated image from sticking to top of page? 2
I am trying to detect Which image id="" was clicked ? 22
Make 'Image X' spin 360deg on y-Axis until reset button clicked 1
How to have two html audio players on one page? 0

Members online

No members online now.
Total: 45 (members: 1, guests: 44)
Robots: 86

Forum statistics

Threads
473,997
Messages
2,570,240
Members
46,830
Latest member
HeleneMull

Latest Threads

Top