How do I instantiate multiple instances of a background picture in JavaScript?
Okay, so basically when I click the below buttons I want a new separate pic to show where I specify. That way I can have multiple copies of this pic in different locations on the page at any given time. Help?!
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link rel="stylesheet" type="text/css" href="styles/formstyle.css"/>
<script type = "text/javascript" src = "scripts/rearange.js">
var count = 0;
function northwest(image) {
var temp;
var myElement;
var newDiv = document.createElement('div');
开发者_如何转开发 newDiv.id = "image"+ count++;
document.body.appendChild(newDiv);
temp = newDiv.getAttribute("id") ;
myElement = document.getElementById(temp).style;
myElement.top = "30px";
myElement.left = "340px"; }
function southeast(image) {
var myElement;//create reference
myElement = document.getElementById('image').style;
myElement.top = "338px";
myElement.left = "667px";
}
function toggle(image) {
var dom = document.getElementById(image);
if (dom.style.display == '')
dom.style.display = 'none';
else
dom.style.display = '';
</script>
<title>Exercise IV</title>
</head>
<body>
<div id = "para">
Blah, Blah, Blah, Blah :)
</div>
div id ="image" ></div>
<div id = "links">
<p style="height: 121px; width: 92px" >
<input type="button" value = "northwest" onclick = "javascript: northwest('image')" />
<input type="button" value = "northeast" onclick = "javascript: northeast('image')" />
<input type="button" value = "southwest" onclick = "javascript: southwest('image')" />
<input type="button" value = "southeast" onclick = "javascript: southeast('image')" />
</p>
</div>
<div id = "show_Hide">
<p style="width: 92px">
<input type="button" value = "show/hide" onclick = "toggle('image')" />
<input type="button" value = "show/hide" onclick = "toggle('image')" />
<input type="button" value = "show/hide" onclick = "toggle('image')" /><input type="button" value = "show/hide" onclick = "toggle('image')" />
</p>
</div>
<div id = "link" >
<p style="height: 14px; width: 180px">
<a href = "http://nova.umuc.edu/~ct386a28/lovej2ee/index.html">Home Page</a>
</p>
</div>
/*********************************CSS*******************************************/
#image {
background-image:url('http://nova.umuc.edu/~ct386a28/lovej2ee/exercise4/images /kito.jpg');
background-repeat: no-repeat;
position: absolute;
top: 199px;
left: 513px;
color: inherit;
width: 133px;
height: 107px;
filter:alpha(opacity=60);
opacity:0.6;
}
#para {
text-align: left;
font-family: Arial;
position: relative;
top: 73px;
left: 504px;
color: inherit;
width: 132px;
height: 341px;
}
To have two images, you need two img elements. Either start by having two of them in the document (not very flexible), or take a look at document.createElement('img') in JavaScript docs.
EDIT: sorry, you said background images. Same thing applies, just create more DIVs. You will have to change your CSS selector to something that is not ID (since IDs should be unique), so... make it a class.
.image { /* instead of #image */
/* all that stuff */
}
and <div class="image"> in HTML. In JS, you can do:
var newDiv = document.createElement('div');
newDiv.className = 'image';
加载中,请稍侯......
精彩评论