Question

所以我在这里有这个代码，我想将它漂浮在屏幕的右侧，就像在滚动条旁边一样。

<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>

我希望保持它的功能。另外，如果可能的话，请在回答中加入我的问题。

谢谢！

编辑：我希望它像这样

图片1

但是当我将鼠标悬停在它上面时，我的图像代码就会变形......

EDIT2：这是我正在使用的代码（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>

然后是CSS

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

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

以下是我对网站所做些什么的图片......

IMAGE

Answer 1

这是你在找什么？ jsfiddle.net/u9s4rh57/2/（更新）

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

和JS用于“交换”this post中来自@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);
});

Answer 2

我认为你希望它是固定的，而不是绝对的。因此，当您滚动页面时，您的图像将无法移动。如果是这样，试试这个：

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>

如果您希望图片随页面滚动，只需将position: fixed;更改为position: absolute;

Answer 3

如果我理解你，你可以做这样的事情。

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

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

Answer 4

（代表OP发布）。

我得到了它的工作！谢谢Edmar Miyake和大家！我不得不编辑Edmar的代码以使其工作。这就是我做的。我在HTML中删除了<div class="content">。

这是完成的代码！

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

在网站一侧浮动图像代码？

4 个答案: