HTML гиперссылка с мышью над изображением - PullRequest
Новая
       11

HTML гиперссылка с мышью над изображением

0 голосов
/ 14 ноября 2008

У меня есть гиперссылка Html. Мне нужно привязать эту гиперссылку к другой странице. Это должно показать изображение. как это сделать

Ответы [ 3 ]

3 голосов
/ 14 ноября 2008

Это зависит от того, где вам нужно отобразить изображение. Если вы ищете что-то по линии значка рядом или позади ссылки, вы можете сделать это с помощью CSS, используя фоновое изображение в состоянии наведения ссылки: 

a:link
{
   background-image:none;
}

a:hover
{
   background-image:url('images/icon.png');
   background-repeat:no-repeat;
   background-position:right;
   padding-right:10px /*adjust based on icon size*/
}

Я сделал это с макушки головы, поэтому вам, возможно, придется внести некоторые незначительные изменения.

Если вы хотите показать изображение где-то еще на странице, вы можете сделать это с помощью javascript, чтобы скрыть / отобразить изображение при наведении курсора на ссылку.

Если это не решит вашу проблему, возможно, вы могли бы предоставить дополнительную информацию, которая поможет всем найти правильный ответ.

0 голосов
/ 14 ноября 2008

Вы можете сделать это легко с помощью jquery: 

$("li").hover(
  function () {
    $(this).append($("<img src="myimage.jpg"/>"));
  }, 
  function () {
    $(this).find("img:last").remove();
  }
);

Несколько более полных примеров, которые на самом деле тестируются: http://docs.jquery.com/Events/hover

0 голосов
/ 14 ноября 2008

Вы можете сделать это, используя JavaScript ..

Это создаст квадрат, который следует за вашей мышью при наведении на div или элемент.

Создайте файл .js с таким содержимым здесь: 

 

var WindowVisible = null;
function WindowShow() { 
    this.bind = function(obj,url,height,width) {
        obj.url = url;
        obj.mheight = height;
        obj.mwidth = width;
        obj.onmouseover = function(e) {
            if (WindowVisible == null) {
                if (!e) e = window.event;
                var tmp = document.createElement("div");
                tmp.style.position = 'absolute';
                tmp.style.top = parseInt(e.clientY + 15) + 'px';
                tmp.style.left = parseInt(e.clientX + 15) + 'px';
                    var iframe = document.createElement('iframe');
                    iframe.src = this.url;
                    iframe.style.border = '0px';
                    iframe.style.height = parseInt(this.mheight)+'px';
                    iframe.style.width = parseInt(this.mwidth)+'px';
                    iframe.style.position = 'absolute';
                    iframe.style.top = '0px';
                    iframe.style.left = '0px';
                tmp.appendChild(iframe);
                tmp.style.display = 'none';
                WindowVisible = tmp;
                document.body.appendChild(tmp);
                tmp.style.height = parseInt(this.mheight) + 'px';
                tmp.style.width = parseInt(this.mwidth) + 'px';
                tmp.style.display = 'block';
            }
        }
        obj.onmouseout = function() {
            if (WindowVisible != null) {
                document.body.removeChild(WindowVisible);
                WindowVisible = null;
            }
        }
        obj.onmousemove = function(e) {
            if (!e) e = window.event;
            WindowVisible.style.top = parseInt(e.clientY + 15) + 'px';
            WindowVisible.style.left = parseInt(e.clientX + 15) + 'px';
        }
    }
}

Затем в вашем html сделайте следующее:

  1. Включить файл .js <script type="text/javascript" src="myfile.js"></script>

  2. Введите на своей веб-странице: 

 

<script type="text/javascript">
            var asd = new WindowShow();
            asd.bind(document.getElementById('go1'),'IMAGE URL HERE!',400,480);
</script>

Вот полная реализация в HTML: 

<html>
<head>
    <title>test page</title>
    <style>
        div.block { width: 300px; height: 300px; background-color: red; }
        iframe { border: 0px; padding: 0px; margin: 0px; }
    </style>
    <script type="text/javascript" src="window_show.js"></script>
</head>
<body>
    <div id="go1" style="background-color: red; width: 200px; height: 200px;"></div>

    <script type="text/javascript">
        var asd = new WindowShow();
        asd.bind(document.getElementById('go1'),'IMAGE URL HERE!',400,480);
    </script>
</body>

пока, пока!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...