help to add an image over the webpage!

[snjflame]

hi, I want add an PNG image using .js and it should appear like this twitter badge,
link: http://www.go2web20.net/twitterFollowBadge/

- it should not move while scrolling like this twitter badge,
- can anybody make me a javascript and html code for that!

[larztheloser]

Quite easy. Use HTML to code your image and put it in a div layer. Make the CSS position attribute of the layer "absolute" and make the height and width of the layer the same as the image. Also set the top attribute so that it is the desired distance down from the top. Now, use javascript to find the width of the client's screen. See this website for details on getting a client's width/height: http://www.howtocreate.co.uk/tutoria.../browserwindow

Finally get access to the layer using document.getElementById or something, then set the left attribute of the layer's style property to the width of the screen minus the width of your layer. You might also want to create a function called onResize which updates the position of the layer so it is still right-aligned.

[snjflame]

thx, for the reply, but don't know javascript?

[larztheloser]

Put this inside javascript script tags. It's only a very basic solution and won't yet update on page resize.

  var myWidth = 0;
  if( typeof( window.innerWidth ) == 'number' ) myWidth = window.innerWidth;
  else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) myWidth = document.documentElement.clientWidth;
  else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) myWidth = document.body.clientWidth;
  document.getElementById("PUT YOUR ID HERE").style.left = parseInt(myWidth - 25)+"px"; //replace the 25 with the width of your graphic