473,379 Members | 1,283 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > how to pass image file name (src) to a function that creates a web page?

Join Bytes to post your question to a community of 473,379 software developers and data experts.

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

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
4 4888
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
"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
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
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
New Post

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
image swapping in php
by: Richard | last post by:
I'm beginning to undertake php for the fun of it. Working on a problem I hope can be solved in php. Basically what I have is this: <body> <img name="main" src="image1.jpg"> <a href="#"...
PHP
16
determine whether the image file is loaded
by: Donjuan | last post by:
Hi all I have trouble with tracking whether my image file is loaded. i use DHTML to change my image. HERE is the code: <img name="someimage" src="1.jpg"...
Javascript
1
How i can populate all fileds dynamically in jsp page based on contents found in xml file?
by: vj | last post by:
How i can populate all fileds dynamically in jsp page based on contents found in xml file? I have written jsp servlets and java class file. i transferred automatic data from jsp to servlet then to...
Javascript
4
image validation
by: yatin | last post by:
hi, friend. i have a problem in image validation plz check it. i have to include a image validation in foam 1. but i sending a details through form2. But when i include a image validation in foam1,...
PHP
2
Using jS to display an image from file
by: Tim Streater | last post by:
The following test page is intended to allow the user to choose an image file, and then display it. It works as expected in Safari 3.1.1, FF 2.0.0.14 (Mac), and IE7 (XP). But, it fails in FF...
Javascript
11
Image on mouseover not working
by: Evolution445 | last post by:
I got this code, and it somehow doesnt work. <TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0 align="center"> <TR> <TD background="{image-path}navfiller.gif" HEIGHT=40...
Javascript
3
how to pass the user name using cookies
by: swetha123 | last post by:
hello, I don't know how to use cookies please help me in this I am using the dream weaver cs4 I designed the navigation bar to my page using dream weaver cs4 navigation bar contains...
PHP
1
Problem facing while Dynamic Image Creation to replace Font Embedding
by: neovantage | last post by:
Hey all, I am using a PHP script which creates headings at run time in a sense at page execution. I am stuck a with a very little problem which i am sure i will have the solution from experts. ...
PHP
1
Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
General
0
Wordpress or something else?
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
Content Management Systems
0
One-click Importing Excel Data into a*Database
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
Microsoft Excel
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Basic Javascript concepts
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
Javascript
0
Batch import of multiple excel files into the database
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
Data Management
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!