Link to home
Start Free TrialLog in
Avatar of blacklord
blacklord

asked on

Displaying a small image at the right bottom of the screen

Hi Everyone,

I want to write a cross browser DHTML/CSS/Javascript code which will display a small icon at the right bottom of the screen. Could you please write me a small example code for this? Thanks!

Avatar of Batalf
Batalf
Flag of United States of America image

<div style="right:0px;bottom:0px;position:absolute"><img src="yourImage.gif" border="0"></div>
Avatar of Roonaan
Smallest example I could think off:

<body style="background: url(myimage.jpg) no-repeat 100% 100% white;">
</body>

-r-
Avatar of blacklord
blacklord

ASKER

Batalf, thanks for your answer it seems correct but whne there is a content which needs scrolling, image does not continue being at the right bottom of the page :(
Have you tried adding an image just in front of the </body> tag and right-align it?

-r-
You could use javascript to move the image when the page is scrolled.

<html>
      <head>
      <style type="text/css">
      #myImage{
            position:absolute;
            right:0px;
            bottom:0px;      
      }      
      </style>
      <script type="text/javascript">
      var imageHeight = 20; // Height of image
      function moveImage(){
            document.getElementById('myImage').style.top = (document.body.offsetHeight/1 + document.body.scrollTop/1) - imageHeight + "px";
      }
      </script>
      </head>
      <body onscroll="moveImage()">
      <div id="myImage"><img src="myImage.gif" border="0"></div>      
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      </body>
</html>
Thanks for your answer but is there any chance to perform this within a javascript or CSS? I am trying to develop a service for my clients and i will ask them to insert one line of code into their HTMLs. I can not describe them how to insert different codes into different locations such as body onscroll, etc.

Is there any chance to perform this within js or css?

Thanks!
If you put it as background image of your bod tag, then it should be possible with CSS:

<html>
      <head>
      <style type="text/css">
      #myImage{
            position:absolute;
            right:0px;
            bottom:0px;      
      }      
      body{
            background: url('yourImage.gif');
            background-position: bottom right;
            background-attachment:fixed;
            background-repeat:no-repeat;
      }
      </style>

      </head>
      <body>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      </body>
</html>
Forgot to remove the

#myImage{
          position:absolute;
          right:0px;
          bottom:0px;    
     }  

part of the code. It's from the previous example.
Batalf, you're correct this displays the image at the right bottom but i don't want this :)

There was a website which offers a service to website owners. It was generating a one line javascript code and you were inserting it into your website pages (in <head> tag). Then a small + icon was being displayed at the right bottom of each page on your website. When a visitor moves mouse icon to over it, numbers from 1 to 5 were being displayed and they were rating the website content. If they want, they were posting additional comments through this right-bottom div. I don't remember this website (if you know, please let me know). I want to build this kind of code.

I hope i explained my need detailed :)

Thanks!
JS File:

document.write('<style type="text/css">'+
'.nonTransparent { background-color:white }'+
'#fixme {'+
'     /* netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */'+
'     position: absolute; right: 20px; bottom: 10px;'+
'}'+
'body > div#fixme {'+
'     /* used by Netscape6+/Mozilla, Opera 5+, Konqueror, Safari, OmniWeb 4.5+, ICEbrowser */'+
'     position: fixed;'+
'}'+
'<\/style>'+
'<\!--[if gte IE 5.5]>'+
'<\![if lt IE 7]>'+
'<style type="text/css">'+
'div#fixme {'+
'     /* IE5.5+/Win - this is more specific than the NS4 version */'+
'     right: expression(  20 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) + "px" );'+
'     top: expression(  -40 + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) +"px" )'+
'}'+
'<\/style>'+
'<\![endif]>'+
'<\![endif]--><div id="fixme">Hello</div>')




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
      <title>Untitled</title>
 
</head>

<body>
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content

<script src="bottom.js"></script>
</html>
ASKER CERTIFIED SOLUTION
Avatar of Computer101
Computer101
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial