Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations John Tel on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Opening image in new page with JavaScript 1
- Thread starter gina03
- Start date
-
1
- #2
dwarfthrower
Programmer
Yep, you can pass the information as a querystring in the URL that you use to open your new page.
For example say you want horse.jpg displayed at 100x50 on the next page you could hit the next page using a URL shaped like this:
In the nextpage.html file you can use Javascript to strip the appropriate information out of the location object.
For example say you want horse.jpg displayed at 100x50 on the next page you could hit the next page using a URL shaped like this:
In the nextpage.html file you can use Javascript to strip the appropriate information out of the location object.
- Thread starter
- #3
dwarfthrower
Programmer
Not at all, just copy everything in blue into a blank html page, pop it on your server and hit it with the following url querystring appended to the end ?imgsrc=horse.jpg&imgwidth=100&imgheight=50
So if your url was you would use ]?imgsrc=horse.jpg&imgwidth=100&imgheight=50 instead.
Sample code Here:
------------------------------
[tt]
<html>
<head>
<script>
function getURLvalues(){
var full_location = location.href;
var query_string = full_location.slice(
full_location.indexOf('?'),
full_location.length
);
var image_source = full_location.slice(
full_location.indexOf('imgsrc=') + 7,
full_location.indexOf('&imgwidth')
);
var image_width = full_location.slice(
full_location.indexOf('imgwidth=') + 9,
full_location.indexOf('&imgheight')
);
var image_height = full_location.slice(
full_location.indexOf('imgheight=') + 10,
full_location.length
);
alert('Full Location:\t' + full_location + '\n' +
'Query String:\t' + query_string + '\n' +
'Image Source:\t' + image_source + '\n' +
'Image Width:\t' + image_width + '\n' +
'Image Height:\t' + image_height
);
}
</script>
</head>
<body onLoad="getURLvalues()">
</body>
</html>
[/tt]
--------------------
End Sample Code
A fairly simple example, (hey it's not yet 9am here) but it should get the ball rolling. All I've done is grabbed the location.href object and used the JavaScript string manipulation functions to get the values I'm after. You would probably also want to put a bit of validation in there to check, firstly for the existence of the querystring, but also that the values provided were valid (numeric for the height & width etc.)
Hope this helps.
So if your url was you would use ]?imgsrc=horse.jpg&imgwidth=100&imgheight=50 instead.
Sample code Here:
------------------------------
[tt]
<html>
<head>
<script>
function getURLvalues(){
var full_location = location.href;
var query_string = full_location.slice(
full_location.indexOf('?'),
full_location.length
);
var image_source = full_location.slice(
full_location.indexOf('imgsrc=') + 7,
full_location.indexOf('&imgwidth')
);
var image_width = full_location.slice(
full_location.indexOf('imgwidth=') + 9,
full_location.indexOf('&imgheight')
);
var image_height = full_location.slice(
full_location.indexOf('imgheight=') + 10,
full_location.length
);
alert('Full Location:\t' + full_location + '\n' +
'Query String:\t' + query_string + '\n' +
'Image Source:\t' + image_source + '\n' +
'Image Width:\t' + image_width + '\n' +
'Image Height:\t' + image_height
);
}
</script>
</head>
<body onLoad="getURLvalues()">
</body>
</html>
[/tt]
--------------------
End Sample Code
A fairly simple example, (hey it's not yet 9am here) but it should get the ball rolling. All I've done is grabbed the location.href object and used the JavaScript string manipulation functions to get the values I'm after. You would probably also want to put a bit of validation in there to check, firstly for the existence of the querystring, but also that the values provided were valid (numeric for the height & width etc.)
Hope this helps.
- Thread starter
- #5
- Status
Similar threads
- Locked
- Question