0

最初のボタンと同じことをしなければならないボタンの列がありますが、独自の個々の写真があります。エラーが発生しないように ID を設定するにはどうすればよいですか? これが私がこれまでに持っているものですhttp://ultimatefinishdetailing.com/Services.html

HTML: (画像ボタンの前に HTML を投稿)

<STYLE MEDIA="screen" TYPE="text/css">
.pop-up {
    height: 100px;
    width: 100px;
    margin-right: -100px;
    margin-top: -100px;
    position:absolute;
right:-50px;
top:75px;
}
.button {
      width:300px;
      height:21px;
      display:block; background-image:url(images/button_ufad4.jpg);
      position:absolute;
}
</style>
<a href="" class="button" onmouseover="javascript:ShowImage('images/InteriorandExteriorDetailing.jpg')" onmouseout="javascript:HideImage()"></a>

<div id="popup" class="pop-up">
   <img id="popupImage" alt="Popup image" /> 
</div>

Javascript:

 <script type="text/javascript">
    function ShowImage(src)
    {
        var img = document.getElementById('popupImage');
        var div = document.getElementById('popup');
        img.src = src;
        div.style.display = "block";
    }
    function HideImage()
    {
        document.getElementById('popup').style.display = "none";
    }
</script>
4

3 に答える 3

2

ニシャントはマウスアウトに適しています。最初の一重引用符が欠けているだけです。

スタイルについては、おそらくこのようなものが必要です

<style media="screen" type="text/css">
.pop-up {
    height: 200px;
    width: 100px;
    margin-right: 100px;
    margin-top: -10px;
    position:absolute;
right:50px;
top:50px;
}
</style>

位置: 絶対; ブラウザに、必要な場所に正確に配置するように指示します。この例では、上から 50 ピクセル、右から 50 ピクセルの位置に配置するように指示しました。キーワード「下」と「左」も使用できます。

于 2013-05-15T19:02:13.767 に答える
1

ここでこれを試してみてください...

CSS

<style>
  .pop-up {
     height: 200px;
     width: 100px;
     margin-right: 100px;
     margin-top: 10px;
     float: right;
 display:none;
  }

 .button {
      /*change the width and height to match button.jpg's*/
      width:50px;
      height:50px;
      display:block;
  background-image:url(image/button.jpg);
  }
</style>

HTML

<a href="" class="button" onmouseover="javascript:ShowImage('images/eco.jpg')" onmouseout="javascript:HideImage()"></a>

<div id="popup" class="pop-up">
   <img id="popupImage" alt="Popup image" /> 
</div>

JavaScript

<script type="text/javascript">
    function ShowImage(src)
    {
        var img = document.getElementById('popupImage');
        var div = document.getElementById('popup');
        img.src = src;
        div.style.display = "block";
    }
    function HideImage()
    {
        document.getElementById('popup').style.display = "none";
    }
</script>

お役に立てれば。

于 2013-05-15T19:02:15.560 に答える
0

popupimage が発生する位置を修正するには、#popupImage のスタイルを作成し、表示したい場所に配置する必要があります。

「onmouseout」が機能しない問題について...まず、HTMLに一重引用符がなく、開いているアンカータグを閉じています...

<a href="" onmouseover="ShowImage('images/eco.jpg')" onmouseout="HideImage('images/button_ufad4.jpg')"></a>

最初の一重引用符がないことに注意してください。

第二に、関数では、画像「images/button_ufad4.jpg」をまったく使用していないため、画像名の先頭に引用符を追加するだけで、onmouseout の問題が修正されます。

于 2013-05-15T18:57:16.423 に答える