insert image into .html file dynamically

The following lines open a blank page with location.png and dpic.png images in them, respectively:

<a href="./images/location.png" target="_blank">90024</a>

<a href="./images/dpic.png" target="_blank">DPIC</a>

Question: How can I modify the above two lines and code below to put these images in an specific (image.html) instead of a blank page.

Upon opening of image.html it needs to sense what image is requested and insert it in <div id="content"> of image.html given below:
<!DOCTYPE html>
<html><head><title>More Descriptions</title>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    
	<link rel="stylesheet" type="text/css" href="./styles/image2.css"/>
</head>
<body>
<div id="content">

</div>
</body>
</html>
---  image2.css ----
* reset browser default margins because different browser would have different margin settings*/
* {
    margin : 0; 
    padding : 0; 
}

/* apply uniform margins for select elements for uniformity*/
h1, h2, h3, h4, h5, p, ul, ol   
{
    margin : 0 20px; 
    padding : .5em 0; 
}
    
/* =html set background color and an image at the top with color transition, dark to background color  )*/
 body
{
	background : rgb(137, 137, 137);
} 
#content {
    background: blue url(../images/dpic.png);
	background-size: 320px 200px;
	margin:5em auto;
	width:320px;
	height:200px;
	border: 0px solid red;
}

Open in new window

location.png
dpic.png
LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
Hi,

first you have to change the a hrefs:
<a href="image.html?img=location.png" target="_blank">90024</a>
 <a href="image.html?img=dpic.png" target="_blank">DPIC</a>

Open in new window


Then in the image.html page it should look like:
<!DOCTYPE html>
<html>
	<head>
		<title>More Descriptions</title>
		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="./styles/image2.css"/>
		<script type="text/javascript">
			// Helper function
			function GetURLParameterValue(sParam)
			{
				var sQueryString = window.location.search.substring(1);
				var sVariables = sQueryString.split('&');
				for (var i = 0; i < sVariables.length; i++)
				{
					var sCurrentParamName = sVariables[i].split('=');
					if (sCurrentParamName[0] == sParam)
					{
						return sCurrentParamName[1];
					}
				}
			}​

			$(document).ready(function () {
				var imageName = "";
				var contentToAdd = "";
				imageName = GetURLParameterValue("img");
				if (imageName == "") {
					// You might change the alternate content
					contentToAdd = "<span>No image provided.</span>";
				} else {
					contentToAdd = "<img src='./images/" + imageName + "' />";
				}
				$("#content").append(contentToAdd);
			});
		</script>
	</head>
	<body>
		<div id="content"></div>
	</body>
</html>
---  image2.css ----
* reset browser default margins because different browser would have different margin settings*/
* {
    margin : 0; 
    padding : 0; 
}

/* apply uniform margins for select elements for uniformity*/
h1, h2, h3, h4, h5, p, ul, ol   
{
    margin : 0 20px; 
    padding : .5em 0; 
}
    
/* =html set background color and an image at the top with color transition, dark to background color  )*/
 body
{
	background : rgb(137, 137, 137);
} 
#content {
    background: blue url(../images/dpic.png);
	background-size: 320px 200px;
	margin:5em auto;
	width:320px;
	height:200px;
	border: 0px solid red;
}

Open in new window


HTH
Rainer
0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Hi Rainer,

I have added altert("sParam  x); in 5 location in the image.html to get some response from java script but it seems it is not firing (see lines 11, 14, 26, 28, and 40)
<!DOCTYPE html>
<html>
	<head>
		<title>More Descriptions</title>
		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="./styles/image2.css"/>
		<script type="text/javascript">
			// Helper function
			alert("sParam 1");
			function GetURLParameterValue(sParam)
			{
			alert("sParam 2");
				var sQueryString = window.location.search.substring(1);
				var sVariables = sQueryString.split('&');
				for (var i = 0; i < sVariables.length; i++)
				{
					var sCurrentParamName = sVariables[i].split('=');
					if (sCurrentParamName[0] == sParam)
					{
						return sCurrentParamName[1];
					}
				}
			}?
alert("sParam 3");
			$(document).ready(function () {
			alert("sParam 4");
				var imageName = "";
				var contentToAdd = "";
				imageName = GetURLParameterValue("img");
				if (imageName == "") {
					// You might change the alternate content
					contentToAdd = "<span>No image provided.</span>";
				} else {
					contentToAdd = "<img src='./images/" + imageName + "' />";
				}
				$("#content").append(contentToAdd);
			});
			alert("sParam 5");
		</script>
	</head>
	<body>
		<div id="content"></div>
	</body>
</html>

Open in new window


In my calling index.html I call for these images using:
<a id="A2" href="image.html?img=./images/location.png" target="_blank"><abbr title="Location map...">90024</abbr></a>
and
<a id="A5" href="image.html?img=./images/dpic.png" target="_blank"><abbr title="Certificate...">Design Professional Insur. Co</abbr></a>

After a click on them I get a blank page with message: This webpage is not found and url of:
file:///C:/Users/Mike/Desktop/ResumeGit/image.html?img=./images/location.png
and
file:///C:/Users/Mike/Desktop/ResumeGit/image.html?img=./images/dpic.png

I also tried:
<a id="A2" href="image.html?img=location.png"><abbr title="Location map...">90024</abbr></a>

Message:
No webpage was found for the web address: file:///C:/Users/Mike/Desktop/ResumeGit/image.html?img=location.png
Error code: ERR_FILE_NOT_FOUND

With a copy of location.png in root directory
0
Rainer JeschorCommented:
Hi,

the following works locally (using Chrome and IE (but I have to allow the scripting explicit).
I have a folder which contains the "master" HTML page as well as the target image html page.
In a subfolder names images there are the two images located.

This is the calling code in the master html page:
		<a id="A2" href="EEDynamicImage.html?img=location.png" target="_blank"><abbr title="Location map...">90024</abbr></a>
		<a id="A5" href="EEDynamicImage.html?img=dpic.png" target="_blank"><abbr title="Certificate...">Design Professional Insur. Co</abbr></a>

Open in new window


Please be aware that I have to use another HTML file name - please adopt it to fit your image.html

This is the code of the target page:
<!DOCTYPE html>
<html>
	<head>
		<title>More Descriptions</title>
		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="./styles/image2.css">
		<script type="text/javascript">
			// Helper function
			alert("sParam 1");
			function GetURLParameterValue(sParam)
			{
				alert("sParam 2");
				var sQueryString = window.location.search.substring(1);
				var sVariables = sQueryString.split('&');
				for (var i = 0; i < sVariables.length; i++)
				{
					var sCurrentParamName = sVariables[i].split('=');
					if (sCurrentParamName[0] == sParam)
					{
						return sCurrentParamName[1];
					}
				}
			}
			alert("sParam 3");
			$(document).ready(function () {
				alert("sParam 4");
				var imageName = "";
				var contentToAdd = "";
				imageName = GetURLParameterValue("img");
				if (imageName == "") {
					// You might change the alternate content
					contentToAdd = "<span>No image provided.</span>";
				} else {
					contentToAdd = "<img src='./images/" + imageName + "' />";
				}
				$("#content").append(contentToAdd);
			});
			alert("sParam 5");
		</script>
	</head>
	<body>
		<div id="content"></div>
	</body>
</html>

Open in new window


There has been additinal characters inside the scripts (a question mark,...).
Can you please test this?

Thanks and HTH
Rainer
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Yes, this worked. I will accept this shortly. FYI, I have a followup question at: http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28652330.html if you have a moment to take a look at it.

Thanks,

Mike
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.