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
– Dove Man, Commented Oct 9, 2016 at 17:42
It doesn't really matter, I would like it to scroll with the page. @Case — Dove Man
– Dove Man, Commented Oct 9, 2016 at 17:46

Edmar Miyake · Accepted Answer · 2016-10-09 20:15:48Z

0

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 9, 2016 at 20:15

answered Oct 9, 2016 at 18:11

Edmar Miyake

12.4k3 gold badges40 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Dove Man Over a year ago

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.

Edmar Miyake Over a year ago

I don't understand. I would need to have either a visual of what is going on or your code.

Edmar Miyake Over a year ago

@JonDanker change img { to #image1 { in your CSS. And your <img> id should be id='image1' rather than id='#image1'

Dove Man Over a year ago

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 Over a year ago

So I found that the problem is this code here........ can you fix it? <img name="image1" src="IMAGE"></a> <div class="content"> </div> </body>

|

score 0 · Accepted Answer · 2016-10-09 18:12:01Z

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 9, 2016 at 18:12

answered Oct 9, 2016 at 17:49

user6879622

1 Comment

Dove Man Over a year ago

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.

Community · Accepted Answer · 2017-05-23 12:33:29Z

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); });

I updated with the function from this post and created a new jsfiddle with the images changing and the image right next to the scrollbar.

halfer · Accepted Answer · 2016-10-19 20:26:58Z

(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; }

Collectives™ on Stack Overflow

Float image code on the side of website?

4 Answers 4

7 Comments

1 Comment

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

1 Comment

1 Comment

Comments

Linked

Related