?
Solved

Dynamic javascript image

Posted on 2005-03-01
15
Medium Priority
?
572 Views
Last Modified: 2007-12-19
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
Comment
Question by:bukko
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
  • 2
  • +1
15 Comments
 
LVL 16

Expert Comment

by:ellandrd
ID: 13430959
<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
 
LVL 16

Expert Comment

by:ellandrd
ID: 13431073
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
 
LVL 13

Expert Comment

by:davidlars99
ID: 13434687
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
Industry Leaders: 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!

 
LVL 8

Author Comment

by:bukko
ID: 13439565
I don't want the image to cover the whole document.
This will be a small image that I can position as required.
0
 
LVL 8

Author Comment

by:bukko
ID: 13440411
...also, the object has to be created dynamically.
I know Javascript is required, but how is it done?
0
 
LVL 8

Author Comment

by:bukko
ID: 13441465
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
 
LVL 32

Expert Comment

by:Batalf
ID: 13448116
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
 
LVL 32

Expert Comment

by:Batalf
ID: 13448124
Possible values for background-repeat are

* no-repeat
* repeat-x
* repeat-y
* repeat
0
 
LVL 8

Author Comment

by:bukko
ID: 13448135
I know that.
What will cause the image to stretch to fill the dimensions of the DIV element?
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13448145
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
 
LVL 32

Expert Comment

by:Batalf
ID: 13448150
In the second code, the img is within the div as an ordinary image which is stretched to the size of the div.
0
 
LVL 8

Author Comment

by:bukko
ID: 13448236
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
 
LVL 32

Accepted Solution

by:
Batalf earned 2000 total points
ID: 13448251
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
 
LVL 8

Author Comment

by:bukko
ID: 13448350
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
 
LVL 32

Expert Comment

by:Batalf
ID: 13448358
Great!!

Glad I could help!

Thanks for the "A"

Batalf
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question