Mouse over zoom.

  • 1
  • Question
  • Updated 9 years ago
  • Answered
Hi every one, need help with mouse rollover zoom for images. have a mouse over zoom already but need a roll over. Some thing that doesnt move the whole page.
cheers!
Photo of sagar

sagar

  • 171 Posts
  • 1 Reply Like

Posted 9 years ago

  • 1
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
where is the code?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Photo of sagar

sagar

  • 171 Posts
  • 1 Reply Like
Hey Littleus, i have the code from the same site but that moves the whole page, i want something to roll over....

Alex : gimmie a sec ill paste the code here
Photo of sagar

sagar

  • 171 Posts
  • 1 Reply Like
<!--
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src = "http://www.3rdace.com/resources/slide...;
staticImage1 = new Image();
staticImage1.src = "http://www.3rdace.com/resources/websi...;
// End</script>

<a href="http://www.3rdace.com/" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="http://www.3rdace.com/resources/websi..." border=0></a>
---->
Photo of sagar

sagar

  • 171 Posts
  • 1 Reply Like
im thinking of wrapping each image in a cell....
<!-----<tr>
<td align="center" width="160" height="48">
<img src="images/home.gif" border="0"
</a>
</td>
</tr>

---->
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Try this one:

http://javascript.internet.com/miscel...

You could probably substitute the text for img src tags.
Photo of sagar

sagar

  • 171 Posts
  • 1 Reply Like
okay let me try... will let you know!
Cheers!
Photo of sagar

sagar

  • 171 Posts
  • 1 Reply Like
hey littleus the script says to upload the js file. yola's file uploader doesn's accept .js files...??
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
oops.. so sorry sagar... didn't read it carefully enough.

I'll scrounge around and see if I can come up with something else.
Photo of sagar

sagar

  • 171 Posts
  • 1 Reply Like
thanks littleus,
this is another smooth zoom but changes the page too

<!---<html><head><title>Proximity Zoom</title></head><body bgcolor="#000000" text="#FFFFFF"><tr><td valign="center" align="left" width="200" height="300"><a href="#"><img src="http://www.3rdace.com/resources/slide..." class="proximityZoom"/></a><br></td></tr><script type="text/javascript">//Proximity Zoom with Opacity Script from www.javascript-fx.comJSFX_ProximityZoom = {maxWidth:200, minWidth:100, getPageX:function(el){ return (el==null)?0:el.offsetLeft+this.getPageX(el.offsetParent);},getPageY:function(el){ return (el==null)?0:el.offsetTop+this.getPageY(el.offsetParent);},animate:function(mx,my){for(var i=0;i<document.images.length;i++){var img=document.images[i];if(img.className=="proximityZoom"){var dx=mx-this.getPageX(img)-img.width/2;var dy=my-this.getPageY(img)-img.height/2;var d=this.maxWidth-Math.sqrt(dx*dx+dy*dy);img.style.width=d<this.minWidth?this.minWidth:d;this.setOpacity(img, 100*d/this.minWidth);}}},setOpacity:function(el, op){if(op>100)op=100;if(op<50)op=50;el.style.filter="alpha(opacity:"+op+")";el.style.MozOpacity=op/100;},writeStyle:function(){document.write('<style>.proximityZoom {width:'+this.minWidth+';border:0;alpha(opacity:50);-moz-opacity:0.5;}</style>');}}JSFX_ProximityZoom.writeStyle();document.onmousemove = function(ev){if(document.all)JSFX_ProximityZoom.animate(event.clientX,event.clientY);elseJSFX_ProximityZoom.animate(ev.pageX,ev.pageY);}</script></body></html> -->
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi sagar

Before I go scrounging around.. I'm not really sure what problem you are having or what you're trying to accomplish.

Do you mind clarifying for me what your intentions are? I copied the code you gave, and I don't see any change to the page. When you talk about page, do you mean the webpage changes size? Sorry for my confusion. If you want to see my test page with your code, here it is: http://littleustestsite.yolasite.com/...
Photo of sagar

sagar

  • 171 Posts
  • 1 Reply Like
hey littleus , take a look here ,

http://www.3rdace.com/trial

see how the page changes size? if there was text and other stuff on the page it will just push it away,??
Photo of sagar

sagar

  • 171 Posts
  • 1 Reply Like
i want it to just open on top of other content.
Photo of sagar

sagar

  • 171 Posts
  • 1 Reply Like
Photo of sagar

sagar

  • 171 Posts
  • 1 Reply Like
found something like what i wanted, will do for now, check the trial page again, thnks anyways littleus!

http://www.3rdace.com/trial
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I finally took a look at this - it's a very cool concept.

However, it seems to be a bit buggy?

In Firefox - when you click on the zooming options, it doesn't seem to match up with the options. If I click on zoom in, it's really small. If I click on zoom out, it sometimes go to the "normal" setting. Sometimes, if I click on "normal", nothing happens after clicking on the other options.

In IE - At first glance, it seems to be working great. When I re-enter the site, then it gets all wonky again. I'm gonna post some screenshots so that you can see what I mean.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes


Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
The 1st screen shot - can you see how the page seems to split a bit?

2nd screenshot - it's all elongated - I don't think it's supposed to look like that.
Photo of sagar

sagar

  • 171 Posts
  • 1 Reply Like
yeah i dropped the idea untill i workout the right code.

cs2 was the only way out.. lol.



Image © sagar sethi 2009
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
very cool!! =)