Float image code on the side of website?

Question

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 1

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

EDIT2: Here's the code I'm using (HTML)

<script>
<!-- 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>
<body>
<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>
  <div class="content">
  </div>
  </body>

Then CSS

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

 .content { 
  width: 200px;
  margin: auto;
  background-color: white;
  }

Here is an image of what it's doing to my site...

IMAGE

I'm not sure what you mean.... I just want it on the right side of my website. @Case — Dove Man, Oct 09 '16 at 17:42
It doesn't really matter, I would like it to scroll with the page. @Case — Dove Man, Oct 09 '16 at 17:46

score 1 · Answer 1 · edited May 23 '17 at 12:33

1

Is this what you are looking for? jsfiddle.net/u9s4rh57/2/ (UPDATED)

.HTML

<img src="//i.imgur.com/JrrRHqr.jpg"
data-alt-src="//i.imgur.com/Mu27x47.jpg" class="myImage"/>

.CSS

.myImage{
  position: fixed;
  bottom: 0px;
  right: 0px;
  width:100px;
  height:100px;
}

and JS for "swapping" images from this post from @Cᴏʀʏ

var sourceSwap = function () {
  var $this = $(this);
  var newSource = $this.data('alt-src');
  $this.data('alt-src', $this.attr('src'));
  $this.attr('src', newSource);
}

$(function () {
  $('img.myImage').hover(sourceSwap, sourceSwap);
});

edited May 23 '17 at 12:33

Community

1
1

answered Oct 09 '16 at 18:03

Canilho

944
5
11

I updated with the function from [this post](http://stackoverflow.com/questions/17507870/jquery-image-changing-on-hover) and created a new [jsfiddle](https://jsfiddle.net/u9s4rh57/2/) with the images changing and the image right next to the scrollbar. – Canilho Oct 09 '16 at 18:22

Edmar Miyake · Accepted Answer · 2016-10-09T20:15:48.687

1

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/5/ CSS:

#image1{ 
  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;

edited Oct 09 '16 at 20:15

answered Oct 09 '16 at 18:11

Edmar Miyake

12,047
3
37
38

Now this is what I want.... But when I add the codes, it makes a huge hole in the center of my website? Plus the image switching doesn't work like it does on jsfiggle. – Dove Man Oct 09 '16 at 18:23
I don't understand. I would need to have either a visual of what is going on or your code. – Edmar Miyake Oct 09 '16 at 18:26
@JonDanker change `img {` to `#image1 { ` in your CSS. And your `` id should be `id='image1' ` rather than `id='#image1' ` – Edmar Miyake Oct 09 '16 at 18:36
Sooo, I got the CSS to work, it goes in the corner now like it should, only thing is there's like a grey overlay now, and I can't hover over the image/it's not working. – Dove Man Oct 09 '16 at 18:55
So I found that the problem is this code here........ can you fix it?

– Dove Man Oct 09 '16 at 19:58
`` might fix it. – Edmar Miyake Oct 09 '16 at 20:16
Thanks so much, I was able to fix it by removing a line of code, I posted the fix in my question. Thanks again and God bless. – Dove Man Oct 09 '16 at 20:43

Case · Answer 3 · 2016-10-09T18:12:01.263

0

If i am understanding you right you can do something like this.

https://jsfiddle.net/u6kd4vqc/9/

.myclass {
    position: absolute;
    right: 10px;
    top: 20px;
}

edited Oct 09 '16 at 18:12

answered Oct 09 '16 at 17:49

Case

281
4
26

I edited my question... I want my code, to be planted on the side of the website, like the image I posted in my question. – Dove Man Oct 09 '16 at 17:58

score 0 · Answer 4 · answered Oct 19 '16 at 20:26

(Posted on behalf of the OP).

I got it to work! Thanks Edmar Miyake and everyone! I had to edit Edmar's code a little to get it to work. Here's what I did. I removed <div class="content"> in the HTML.

Here's the finished code!

HTML

<script>
<!-- Begin
loadImage1 = new Image();
loadImage1.src="SECOND IMAGE";
staticImage1 = new Image();
staticImage1.src="FIRST IMAGE";
// End -->
</script>
<body>
<a href="http://www.allaboutgod.com/how-to-be-saved.htm" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;" target="_blank">

  <img name="image1" src="FIRST IMAGE" id="image1">
  </div>
  </body>

CSS

#image1{ 
  position: absolute; 
  top:2500px; 
  left: 0; 
  width: 125px; 
  height:332px;
}

.content { 
  width: 100%;
  margin: auto;
  background-color: white;
}

Float image code on the side of website?

4 Answers4