New Topic/Question
Reply
Page where customer selects images to put in shopping cart
<!DOCTYPE HTML>
<html>
<head>
<!--TITLE-->
<title>HTML5 and CSS3</title>
<!--STYLES-->
<style type="text/css">
#div1{width:400px;
height:140px;
padding:10px;
border:1px solid #aaaaaa;
}
</style>
<!--SCRIPTS-->
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the images that you would like to order into your shopping cart.</p>
<fieldset id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<legend>Shopping Cart</legend>
</fieldset>
<br>
<img id="drag1" src="images/jadams.gif" draggable="true" ondragstart="drag(event)" width="100" height="auto">
<img id="drag2" src="images/jefferson.gif" draggable="true" ondragstart="drag(event)" width="100" height="auto">
<img id="drag3" src="images/madison.gif" draggable="true" ondragstart="drag(event)" width="100" height="auto">
<img id="drag4" src="images/washington.gif" draggable="true" ondragstart="drag(event)" width="100" height="auto">
<br>
<input type="button" value="Cancel" onclick=""/>
<input type="button" value="Check Shopping Cart" onclick=""/>
</body>
</html>
Page that displays the selected images
<!DOCTYPE HTML>
<html>
<head>
<!--TITLE-->
<title>View Shopping Cart</title>
<!--STYLES-->
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<p>Here are the portraits that are in your shopping cart:</p>
<img src="images/jadams.gif" width="100" height="auto">
<br>
<p>Are you ready to <a href="">place your order</a>? Or do you want to <a href="">modify it</a>?</p>
</body>
</html>
MultiQuote
| 