Next Prev

TjpZoom Magnifier

Read more and download "TjpZoom Magnifier"

As you may have realized, this is an image magnifier. It's a completely rewritten version of my script tjpzoom, but still is in JavaScript / DOM :). If you move your mouse over the picture, you can see a little zoom window with a magnified version of a part of the picture in it. Read more on the developer website.

Visit PhpDaddy.com

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<base href="http://www.ajaxdaddy.com/web20/tjpzoom/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>valid.tjp.hu - TJPzoom 3 - JavaScript / CSS / DOM image magnifier - Tutorial</title>
<style type="text/css">
code {background-color: #cccccc;}
.long {display:block;margin:1em;padding: 1em;}
</style>
<script type="text/javascript" src="javascript/tjpzoom.js"></script>
</head>
<body>


<div>
<img src="images/test.jpg" style="width: 580px; height: 580px;"  onmouseover="TJPzoom(this, 'images/test2.jpg');">
</div>

</body>
</html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Khoa

2008-03-27 01:53:49

So nice

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

TjpZoom Magnifier

Comment on this example