asked on

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

Rainer Jeschor

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

Mike Eghtebas

ASKER

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

ASKER CERTIFIED SOLUTION

Rainer Jeschor

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Mike Eghtebas

ASKER

Yes, this worked. I will accept this shortly. FYI, I have a followup question at: https://www.experts-exchange.com/questions/28652330/insert-image-dynamically.html if you have a moment to take a look at it.

Thanks,

Mike