Customized HTML Page with variable Height ,Width, align and src attributes

Question

I have been asked to make a tool which customizes the Height ,Width, align and src attributes of the img/ad element.So what are the different ways to make this tool.The requirement is to changes the query parameters according to the need so as to modify the html for e.g http://swaraj.c/Sites/ad.html?height ="720"&width="90"&align="bottom"&src ="ad.jpeg"

So will this require a form with all these fields which when "POST"ed will change the file or is there any other way to do this ie just change the URL and customize the ad.html pasted below.

<HTML>
<HEAD>
<TITLE>Your Title Here</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<CENTER><IMG SRC="ad.jpeg" ALIGN="BOTTOM" width ="1000" height = "150"> </CENTER>
<HR>
<a href="http://somegreatsite.com">Link Name</a>
is a link to another nifty site
<H1>This is a Header</H1>
<H2>This is a Medium Header</H2>
Send me mail at <a href="mailto:support@yourcompany.com">
support@yourcompany.com</a>.
<P> This is a new paragraph!
<P> <B>This is a new paragraph!</B>
<BR> <B><I>This is a new sentence without a paragraph break, in bold italics.</I></B>
<HR>
</BODY>
</HTML>

`center`? Really. I think it is deprecated. And you have invalid HTML. — putvande, Dec 31 '13 at 19:13
@putvande HTML is not the point here.It's the tool which changes the html. — Swaraj Chhatre, Dec 31 '13 at 19:14
You could use JavaScript to parse the query paramters using info from this question: http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript and then manipulating the attributes on the `` element. You have `server-side` tagged, do you want to edit the permanant HTML page or just the tag? — zero298, Dec 31 '13 at 19:17
@zero298: *"It's like I'm working on an Angelfire site again."* Nah, there's no `LOLs!` — T.J. Crowder, Dec 31 '13 at 19:17

tjons · Answer 1 · 2013-12-31T19:24:52.407

-1

Three ways:

This can be done client-side with Angularjs. I am not an expert, but basically, you need to create a view that takes the query string as inputs.
You need to use a server-side tool that uses the information in the query string.
Finally, the easiest method would be to get the query string with Javascript:

function getQueryVariable(variable) {
```
var query = window.location.search.substring(1);
var vars = query.split("&amp;");
for (var i=0;i&lt;vars.length;i++) {
  var pair = vars[i].split("=");
  if (pair[0] == variable) {
  return pair[1];
}
}      alert('Query Variable ' + variable + ' not found');
}
```
This script should get all the data in the query string. You can then use it to manipulate as you wish. Here is a link that describes this method: http://jeffreifman.com/2006/06/26/how-can-i-get-query-string-values-from-url-in-javascript/ Thanks to him for the idea.

edited Dec 31 '13 at 19:24

answered Dec 31 '13 at 19:14

tjons

4,749
5
28
36

1

Care to explain how? OP tagged it as JavaScript. OP might not be familiar with AngularJS – putvande Dec 31 '13 at 19:15
@putvande check it now. – tjons Dec 31 '13 at 19:25
@TJonS but I understand parsing the query parameter and then replacing the Img tag but How do I make a post request without the form.I know it can be done with javascript as well. – Swaraj Chhatre Dec 31 '13 at 19:28
Why do you have to make a `post` request to change a tag on a page? – zero298 Dec 31 '13 at 19:44

Customized HTML Page with variable Height ,Width, align and src attributes

1 Answers1