Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 575
  • Last Modified:

Dynamic javascript image

Hi,

How do I do the following in Javascript?

1 - Dynamically create a DIV object
2 - Assign a background image to the object which can stretch to fill the enter DIV
3 - Display the DIV anywhere on a web-page UNDERNEATH the existing text (so as not to obscure existing items)

If this can be done with another object other than a DIV (e.g. an IMG) that will also be fine.

Thanks for your help

bukko
0
bukko
Asked:
bukko
  • 6
  • 6
  • 2
  • +1
1 Solution
 
ellandrdCommented:
<script language="JavaScript1.2">

if (document.all||document.getElementById)
document.body.style.background="url('notebook.jpg') white center no-repeat fixed"

</script>

this creates a Watermark Backgound Image for the body...

so instead of having

document.body.style.background="url('notebook.jpg') white center no-repeat fixed"

try using

document.YOUR_DIV_NAME_HERE.style.background="url('notebook.jpg') white center no-repeat fixed"
0
 
ellandrdCommented:
try using layers:

<div id="back" style="position:absolute; left:0; top:0; width:100%; height:100%; z-index:1">
   <img src="image.gif" width="100%" height="100%">
</div>
<div id="page" style="position:absolute; left:0; top:0; width:100%; height:100%; z-index:2">
   rest of html
</div>
0
 
davidlars99Commented:
I'm not sure what exactly you are looking for, but to achieve this kind of functionality you have to make some javascript to work for you check this site and if you'll have somequestion about how that particular thing is done just ask

www.frozendev.com
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
bukkoAuthor Commented:
I don't want the image to cover the whole document.
This will be a small image that I can position as required.
0
 
bukkoAuthor Commented:
...also, the object has to be created dynamically.
I know Javascript is required, but how is it done?
0
 
bukkoAuthor Commented:
ok, this is the sort of thing I want:

function createImage()
     {
     var myDiv = document.createElement("DIV");
     with(myDiv.style)
          {
          position=absolute;
          z-index=-1;
          background:url(img/image.bmp);
          background-repeat:stretch;
          top:100px;
          left:100px;
          height:150px;
          width:150px;
          }
     }

...except of course my background-repeat:stretch bit won't work.

Is there a way to do it?
0
 
BatalfCommented:
I don't think stretch is a valid repeat attribute. Example which will throw an error:

<body>


<script type="text/javascript">
var obj = document.createElement('DIV');
document.body.appendChild(obj);
obj.style.width='500px';
obj.style.height='500px';
obj.style.backgroundImage='url(\'img/image.bmp\')';
obj.style.backgroundRepeat='stretch';
</script>
</body>
0
 
BatalfCommented:
Possible values for background-repeat are

* no-repeat
* repeat-x
* repeat-y
* repeat
0
 
bukkoAuthor Commented:
I know that.
What will cause the image to stretch to fill the dimensions of the DIV element?
0
 
BatalfCommented:
But you could create an image object instead of div

<body>


<script type="text/javascript">
var img = document.createElement('IMG');
img.src='menu.gif';
img.width='500';
img.height=500;
document.body.appendChild(img);
</script>
</body>


OR
<body>


<script type="text/javascript">
var obj = document.createElement('DIV');
document.body.appendChild(obj);
obj.style.width='500px';
obj.style.height='500px';
var img = document.createElement('IMG');
img.src='menu.gif';
img.width='500';
img.height=500;
obj.appendChild(img);
</script>
</body>
0
 
BatalfCommented:
In the second code, the img is within the div as an ordinary image which is stretched to the size of the div.
0
 
bukkoAuthor Commented:
That looks like exactly what I need!
But, when I tried it the image is not displayed.
The entire HTML is as follows:

<html>
 <head>
  <script type="text/javascript">
   var obj = document.createElement('DIV');
   document.body.appendChild(obj);
   obj.style.width='500px';
   obj.style.height='500px';
   obj.style.top='200px';
   obj.style.left='200px';
   var img = document.createElement('IMG');
   img.src='img/tl-br.bmp';
   img.width='500';
   img.height=500;
   obj.appendChild(img);
  </script>
 </head>
 <body>
  <img src='img/tl-br.bmp'
  </img>
 </body>
</html>

When I use this HTML, all that is displayed is the IMG in the body section (proving that the SRC attribute is correct), but not the dynamic IMG defined by the script.
Any ideas?
0
 
BatalfCommented:
You can't add elements to the body object before the body object exists. Try this code:


<html>
 <head>
  <script type="text/javascript">
  function addElement(){
   var obj = document.createElement('DIV');
   document.body.appendChild(obj);
   obj.style.width='500px';
   obj.style.height='500px';
   obj.style.top='200px';
   obj.style.left='200px';
   var img = document.createElement('IMG');
   img.src='img/tl-br.bmp';
   img.width='500';
   img.height=500;
   obj.appendChild(img);
  }
  </script>
 </head>
 <body>
  <img src='img/tl-br.bmp'
  </img>
  <script type="text/javascript">
  addElement();
  </script>
 </body>
</html>
0
 
bukkoAuthor Commented:
FANTASTIC.

Thanks - that works great.
This helps me solve an age-old problem, i.e.: how to draw diagonal lines anywhere on the page in JavaScript.
0
 
BatalfCommented:
Great!!

Glad I could help!

Thanks for the "A"

Batalf
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 6
  • 6
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now