Jon Danker Jon Danker - 1 month ago 10
CSS Question

Float image code on the side of website?

So I have this code here, and I want to float it on the right side of the screen, like next to the scroll bar.

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src="http://i.imgur.com/JrrRHqr.jpg";
staticImage1 = new Image();
staticImage1.src="http://i.imgur.com/Mu27x47.jpg";
// End -->
</script>
<a href="URL HERE" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;" target="_blank">
<img name="image1" src="http://my_button_image" border=0></a>


I would like it to keep it's functionality. Also, if possible, please incorporate my question in your answer.

Thanks!

EDIT: I want it to be like this

IMAGE

But with my image code that chaged when you hover over it....

Answer

You want it to be fixed, rather than absolute, I assume. So when you scroll your page, your image won't move. If so, try this:

https://jsfiddle.net/4959aeg2/

CSS:

img{ 
  position: fixed; 
  top:50px; 
  left: 0; 
  width: 50px; 
  height:50px
}

HTML:

<a href="URL HERE" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;" target="_blank">

  <img name="image1" src="http://i.imgur.com/Mu27x47.jpg" id="#image1"></a>

If you want the image to scroll with your page, just change position: fixed; to position: absolute;

Comments