1

ボタン画像 マウスオーバー 別の場所のポップアップ画像 (html ボックス)

特定の場所のポップアップ画像になるように、マウスオーバーでリンクする必要があるボタン(画像)があります。別の HTML 要素ボックスでポップアップが表示される場所を変更するにはどうすればよいですか? ここに私がこれまでに持っているものがありますが、html に埋め込まれた css を使用して移動するためのリンクでした....これが役立つかどうかはわかりません。見栄えが良いのでボタンにしました。これは私が編集しようとしている私のウェブサイトです。左側の特定のボタン画像にカーソルを合わせると、画面の右側にあるボタンに関連するポップアップ画像が表示されますhttp://ultimatefinishdetailing.com/Services. html

HTML:

<style media="screen" type="text/css">
 .pop-up {
  height : 50px;
  width : 50px;
  top : 10px;
  left : 0px;
  right : 800px;
  float : right;
}

</style>

<a href="" onmouseover="ShowImage('enter filename')" onmouseout="HideImage()">Ultimate Finish Auto Detailing</a>

<div class="pop-up">

   <img id="popupImage" src="" alt="Popup image" style="display: none"/> 
</div>

Javascript:

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

リンク Ultimate Finish Detailing にカーソルを合わせると、私のサイトで画像ボックス (指定しなかったため) が画面の右側に表示されることがわかります...それが上記のコードの動作です。しかし、特定のウィンドウでこれを行うにはボタンが必要です

4

0 に答える 0