Smooth Images
PHP versie: n.v.t
Javascript: MooTools Framework
Beweeg met je muis over een plaatje om een grotere versie te bekijken
Broncode
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 100
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 106
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 112
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 119
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 120
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 121
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 199
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 287
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 288
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 289
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 290
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 291
Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<?php
ini_set('display_errors', 'On');
error_reporting(E_ALL);
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHPtuts.nl - PHP Snippets - Smooth Images</title>
<link rel="stylesheet" href="../../styles/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../../styles/ubb.css" type="text/css" media="screen" />
<style type="text/css">
#images {
margin: 10px;
height: 300px;
}
</style>
<script type="text/javascript" src="../../inc/mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function ()
{
$$('#images img').each( function (element)
{
var widthChange = new Fx.Style(element, 'width', {wait: false, duration: 400});
widthChange.set(100);
element.addEvent('mouseenter', function ()
{
widthChange.start(element.getStyle('width').toInt(), 400);
});
element.addEvent('mouseleave', function ()
{
widthChange.start(element.getStyle('width').toInt(), 100);
});
});
});
</script>
</head>
<body>
<div id="wrap">
<p class="none small align-right"><a href="/codeSnippets/"><-- Terug naar Snippets</a></p>
<h1>Smooth Images</h1>
<div id="info">
<p>PHP versie: n.v.t</p>
<p>Javascript: <a href="http://www.mootools.net" target="_blank">MooTools Framework</a></p>
</div>
<p>Beweeg met je muis over een plaatje om een grotere versie te bekijken</p>
<div id="images">
<img src="images/sprinkhaan.jpg" />
<img src="images/landscape.jpg" />
<img src="images/sunset.jpg" />
<img src="images/vlinder.jpg" />
</div>
<?php
// Weergeven broncode
define('FILE', __FILE__);
require_once('../broncode.php');
?>
</div>
<!-- Google analytics (geen onderdeel van script) -->
<script type="text/javascript" src="/inc/ga1.js"></script>
<script type="text/javascript" src="/inc/ga2.js"></script>
</body>
</html>
ini_set('display_errors', 'On');
error_reporting(E_ALL);
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHPtuts.nl - PHP Snippets - Smooth Images</title>
<link rel="stylesheet" href="../../styles/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../../styles/ubb.css" type="text/css" media="screen" />
<style type="text/css">
#images {
margin: 10px;
height: 300px;
}
</style>
<script type="text/javascript" src="../../inc/mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function ()
{
$$('#images img').each( function (element)
{
var widthChange = new Fx.Style(element, 'width', {wait: false, duration: 400});
widthChange.set(100);
element.addEvent('mouseenter', function ()
{
widthChange.start(element.getStyle('width').toInt(), 400);
});
element.addEvent('mouseleave', function ()
{
widthChange.start(element.getStyle('width').toInt(), 100);
});
});
});
</script>
</head>
<body>
<div id="wrap">
<p class="none small align-right"><a href="/codeSnippets/"><-- Terug naar Snippets</a></p>
<h1>Smooth Images</h1>
<div id="info">
<p>PHP versie: n.v.t</p>
<p>Javascript: <a href="http://www.mootools.net" target="_blank">MooTools Framework</a></p>
</div>
<p>Beweeg met je muis over een plaatje om een grotere versie te bekijken</p>
<div id="images">
<img src="images/sprinkhaan.jpg" />
<img src="images/landscape.jpg" />
<img src="images/sunset.jpg" />
<img src="images/vlinder.jpg" />
</div>
<?php
// Weergeven broncode
define('FILE', __FILE__);
require_once('../broncode.php');
?>
</div>
<!-- Google analytics (geen onderdeel van script) -->
<script type="text/javascript" src="/inc/ga1.js"></script>
<script type="text/javascript" src="/inc/ga2.js"></script>
</body>
</html>