JavaScript
--
Questions
--
Followers
Top Experts
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.pn
<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:
dpic.png
<a href="./images/location.pn
<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;
}dpic.png
Zero AI Policy
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
Hi,
first you have to change the a hrefs:
Then in the image.html page it should look like:
HTH
Rainer
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>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;
}HTH
Rainer
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)
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...">Des
After a click on them I get a blank page with message: This webpage is not found and url of:
file:///C:/Users/Mike/Desk
and
file:///C:/Users/Mike/Desk
I also tried:
<a id="A2" href="image.html?img=locat
Message:
No webpage was found for the web address: file:///C:/Users/Mike/Desk
Error code: ERR_FILE_NOT_FOUND
With a copy of location.png in root directory
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>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...">Des
After a click on them I get a blank page with message: This webpage is not found and url of:
file:///C:/Users/Mike/Desk
and
file:///C:/Users/Mike/Desk
I also tried:
<a id="A2" href="image.html?img=locat
Message:
No webpage was found for the web address: file:///C:/Users/Mike/Desk
Error code: ERR_FILE_NOT_FOUND
With a copy of location.png in root directory
ASKER CERTIFIED SOLUTION
membership
Log in or create a free account to see answer.
Signing up is free and takes 30 seconds. No credit card required.
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
Thanks,
Mike
EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
JavaScript
--
Questions
--
Followers
Top Experts
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.