ansaurus

Question

Answer 1

A:

Hi buddy, you can do this using javascript..

This will create a square that follows your mouse on div or element hover.

Create a .js file with those contents here:

 

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

Then in your html do the following:

Include the .js file <script type="text/javascript" src="myfile.js"></script>
Put in your web page:

 

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

Here is a full implementation in a 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>

bye bye!

José Leal 2008-11-14 02:09:23

i think he wanted an image to display on the page, not underneath the mouse cursor.

nickf 2008-11-14 02:16:15

Answer 2

+3 A:

That depends on where you need to display the image. If you are looking for something along the lines of an icon next to or behind the link, you could accomplish this through CSS using a background image on the hover state of the link:

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*/
}

I did this off the top of my head, so you may need to make some minor adjustments.

If you wanted to show an image somewhere else on the page, you could accomplish that using javascript to hide/show the image on the link's mouseover event.

If this doesn't solve your problem, maybe you could supply some additional information to help guide everybody to the right answer.

Andrew Van Slaars 2008-11-14 02:10:31

+1 - this is by far the simplest way to do hovers. I've seen *far* too many convoluted and over-the-top javascript approaches to this task when CSS will do what most people want much easier.

nickf 2008-11-14 02:18:04

the only thing i'd add is that if you set the background-image on a:link but give it background-position: -1000px -1000px; then the browser will load it straight away, but you won't see it since it's off-screen. I hope that makes sense.

nickf 2008-11-14 02:19:38

Answer 3

A:

You can do this easily with jquery:

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

Some more comprehensive examples which are actually tested: http://docs.jquery.com/Events/hover

Mischa Kroon 2008-11-14 02:14:12

ansaurus

tags:

views:

answers:

HTML hyperlink with mouse over image

related questions