full image on mouse over

Gurpreet Singh Randhawa
Gurpreet Singh Randhawa used Ask the Experts™
on
Hi experts, i want that when i move my moue over an image, it should automatically check where the width is more as on left side or right side and a thumbnail should get viewed.

and when i move my mouse out, it should it should valisn

just like monstertemplates.com, when u view templates

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Pawel WitkowskiSenior Javascript Developer
Top Expert 2008

Commented:
Check this
<img src="http://sarahentuur.files.wordpress.com/2009/04/image4.png?w=50&h=50" style="position:relative" onmouseover="this.width=this.width+30;this.style.margin=-15" onmouseout="this.width=this.width-30;this.style.margin=0">

Open in new window

how i accss it it doees not work, it says page not found

Pawel WitkowskiSenior Javascript Developer
Top Expert 2008

Commented:
put that into index.html   and run it
<html>
<body>
 
<img src="http://sarahentuur.files.wordpress.com/2009/04/image4.png?w=50&h=50" style="position:relative" onmouseover="this.width=this.width+30;this.style.margin=-15" onmouseout="this.width=this.width-30;this.style.margin=0">
 
</body>
</html>

Open in new window

no not like this.

image will appear on the page and onmouse a popup like window will show up to show the full image. it will not beactually a popup. but will look like a popup.
Senior Javascript Developer
Top Expert 2008
Commented:
Oh i get it... pretty simple:

Here is an idea of how to do it
<html>
<body>
 
<script type="text/javascript">
 
var Popup = new (function(){
var popupBool = false;
var width = 0;
var height = 0;
document.onmousemove = function(e)
{
 
  if (popupBool)
  {
        var popEl= document.getElementById('popup');
        popEl.style.left = e.clientX +  width + 10;
        popEl.style.top = e.clientY +  height+ 10;
 
  }
 
}
 
this.show = function (element)
{
     var popEl= document.getElementById('popup');
     popEl.src = element.src;
     popEl.style.display="block";
     width = popEl.width;
     height = popEl.height;
     popupBool=true;
     document.onmousemove();
}
 
this.hide = function()
{
     var popEl= document.getElementById('popup');
     popEl.src = "";
     popEl.style.display="none";
     popupBool=false;
}
});
 
</script>
 
<img style="position:absolute;display:none" id="popup">
 
<img src="http://sarahentuur.files.wordpress.com/2009/04/image4.png?w=50&h=50" onmouseover="Popup.show(this)" onmouseout="Popup.hide()">
</body>
</html>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial