This is a JavaScript assignment. The assignment is as follows: Write a JavaScrip
ID: 3677121 • Letter: T
Question
This is a JavaScript assignment. The assignment is as follows: Write a JavaScript enabled web page that presents the user with thumbnails of at least five images. Provide a button underneath each image that when chosen the image will appear full size in a new window for the user to preview. Write code that will create a new window, large enough to display the full size image. The window will have its content dynamically written to it using document.write() statements. Remember to open and close the data stream to the new window at the appropriate junctures in the code. With the new window, write code that will produce a well-formed HTML document. In other words, include , , and tags. Give the new document an appropriate title. Use appropriate CSS code for setting a background color of your choice. In the new document to be displayed in the opened window, create code that will center all the content in the page. Create an heading, then output the value of the image name, creating an appropriate title for each image. Create an tag with the src attribute equal to the full-sized version of the chosen image. Include height and width attributes inside the tag. Create an HTML form in the new document. Within the form, include a button that is scripted to close the new window. Use the window object's focus() method to ensure that the new window remains visible when the user selects another image to preview.
Explanation / Answer
<!--
<div class='thumbnails'> apert we alll five imaage
in img tag we add simple image and preview button
onclick we call javascript myFunction function and in this function we pass full size img path and image title
if we want dynamically content in new window then we also pass contnet
myFunction function we open new window and add html content.
we change all content and css every thing to requirement.
change all image according to requirement
-->
<!DOCTYPE html>
<html>
<head>
<style>
.thumbnails{ width:100px; float:left;margin: 10px;}
</style>
</head>
<body>
<p>Click the button to open a new browser window.</p>
<div>
<div class="thumbnails ">
<img src="Koala.jpg" width="100"/>
<button>Preview</button>
</div>
<div class="thumbnails ">
<img src="Jellyfish.jpg" width="100"/>
<button>Preview</button>
</div>
<div class="thumbnails ">
<img src="Hydrangeas.jpg" width="100"/>
<button>Preview</button>
</div>
<div class="thumbnails ">
<img src="Desert.jpg" width="100"/>
<button>Preview</button>
</div>
<div class="thumbnails ">
<img src="Chrysanthemum.jpg" width="100"/>
<button>Preview</button>
</div>
</div>
<script>
var myWindow;
// pass new window width according to your requirement
var width = 980;
// pass new window height according to your requirement
var height = 700;
var body_color = '#C3BCBC'
// pass new window image width if you want
var win_ing_width = 960;
// pass new window image height if you want
var win_ing_height = '';
// This function use for open new window and apply content in window
// if you want add content dynamically then you change according to requirement.
// you also pass window content in myFunction function
// just give you example myFunction(url,title,content)
// now you use content varible dirsct in myWindow.document.write(content);
// In this case you remove var content in myFunction function
function myFunction(url, title) {
myWindow = window.open("", "myWindow", "width="+width+", height="+height);
var content = '<!DOCTYPE html>'+
'<html>'+
'<head>'+
'<style>'+
'.main{background: '+body_color+'; width: 980px; margin: auto;}'+
'.heading{background: #BBA0A0; text-align: center;}'+
'.content{background: #BBA0A0; text-align: center;}'+
'.thumbnails{ width:100%; float:left;margin: 10px;}'+
'.clr{clear: both;}'+
'</style>'+
'<script>function closeWin() {window.close();}</script>'+
'</head>'+
'<body>'+
'<div class="main">'+
'<div class="heading">'+
'Heading part here'+
'</div>'+
'<div>'+
'<form action="test.html" method="get">'+
'<button>Close</button>'+
'</form>'+
'<div class="thumbnails ">'+
'<img src="'+url+'" title="'+title+'" width="'+win_ing_width+'" height="'+win_ing_height+'"/>'+
'</div>'+
'<div class="clr"></div>'+
'<div class="content">'+
'Conter pasrt here'+
'</div>'+
'</div>'+
'</body>'+
'</html>';
//myWindow.document.write('');
// write content in new window
myWindow.document.write(content);
myWindow.document.close();
}
</script>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.