Tekst laten verschijnen bij hover image
Ik gebruik onderstaande code om mijn image standaard monochrome te maken en bij 'hover' zie je de originele kleurfoto. Onderstaande code werkt goed voor dit.
HTML gedeelte:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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>
<title></title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="js/colorup_min.js" type="text/javascript"></script>
<img src="img/sample1.jpg" class="colorup" effect="mono" inverse="true"/>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="js/colorup_min.js" type="text/javascript"></script>
<img src="img/sample1.jpg" class="colorup" effect="mono" inverse="true"/>
</body>
</html>
JS gedeelte (colorup.min.js file):
Code (php)
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
75
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
75
jQuery.fn.colorUp = function () {
$(window).load(function () {
$('.colorup').each(function () {
var curImg = $(this).wrap('<span />');
var newImg = curImg.clone().css({ "position": "absolute", "z-index": "98", "opacity": "0" }).insertBefore(curImg);
newImg.attr("src", grayImage(this, curImg.attr("effect")));
newImg.addClass('colorUpped').animate({ opacity: getInv(curImg) ? 1 : 0 }, getSpeed(curImg));
});
$('.colorUpped').mouseover(function () {
$(this).stop().animate({ opacity: getInv($(this)) ? 0 : 1 }, getSpeed($(this)));
})
$('.colorUpped').mouseout(function () {
$(this).stop().animate({ opacity: getInv($(this)) ? 1 : 0 }, getSpeed($(this)));
});
});
function getSpeed(elem) {
return (elem.attr("speed")) ? parseInt(elem.attr("speed")) : 1000;
}
function getInv(elem) {
return (elem.attr("inverse") && (elem.attr("inverse") === "true")) ? true : false;
}
function grayImage(image, effect) {
var myCnv = document.createElement("canvas");
var myCtx = myCnv.getContext("2d");
myCnv.width = image.width;
myCnv.height = image.height;
myCtx.drawImage(image, 0, 0);
var imgData = myCtx.getImageData(0, 0, myCnv.width, myCnv.height);
for (var y = 0; y < imgData.height; y++) {
for (var x = 0; x < imgData.width; x++) {
var pos = (y * 4) * imgData.width + (x * 4);
switch (effect) {
case ("sepia"):
var mono = imgData.data[pos] * 0.32 + imgData.data[pos + 1] * 0.5 + imgData.data[pos + 2] * 0.18;
imgData.data[pos] = mono + 50;
imgData.data[pos + 1] = mono;
imgData.data[pos + 2] = mono - 50;
break;
case ("negative"):
imgData.data[pos] = 255 - imgData.data[pos];
imgData.data[pos + 1] = 255 - imgData.data[pos + 1];
imgData.data[pos + 2] = 255 - imgData.data[pos + 2];
break;
case ("light"):
imgData.data[pos] = imgData.data[pos] + 80;
imgData.data[pos + 1] = imgData.data[pos + 1] + 80;
imgData.data[pos + 2] = imgData.data[pos + 2] + 80;
break;
case ("dark"):
imgData.data[pos] = imgData.data[pos] - 80;
imgData.data[pos + 1] = imgData.data[pos + 1] - 80;
imgData.data[pos + 2] = imgData.data[pos + 2] - 80;
break;
case ("noise"):
var noise = (0.5 - Math.random()) * 160;
imgData.data[pos] = imgData.data[pos] + noise;
imgData.data[pos + 1] = imgData.data[pos + 1] + noise;
imgData.data[pos + 2] = imgData.data[pos + 2] + noise;
break;
default:
imgData.data[pos] = imgData.data[pos + 1] = imgData.data[pos + 2] = imgData.data[pos] * 0.32 + imgData.data[pos + 1] * 0.5 + imgData.data[pos + 2] * 0.18
}
}
}
myCtx.putImageData(imgData, 0, 0, 0, 0, imgData.width, imgData.height);
return myCnv.toDataURL();
}
};
$.fn.colorUp();
$(window).load(function () {
$('.colorup').each(function () {
var curImg = $(this).wrap('<span />');
var newImg = curImg.clone().css({ "position": "absolute", "z-index": "98", "opacity": "0" }).insertBefore(curImg);
newImg.attr("src", grayImage(this, curImg.attr("effect")));
newImg.addClass('colorUpped').animate({ opacity: getInv(curImg) ? 1 : 0 }, getSpeed(curImg));
});
$('.colorUpped').mouseover(function () {
$(this).stop().animate({ opacity: getInv($(this)) ? 0 : 1 }, getSpeed($(this)));
})
$('.colorUpped').mouseout(function () {
$(this).stop().animate({ opacity: getInv($(this)) ? 1 : 0 }, getSpeed($(this)));
});
});
function getSpeed(elem) {
return (elem.attr("speed")) ? parseInt(elem.attr("speed")) : 1000;
}
function getInv(elem) {
return (elem.attr("inverse") && (elem.attr("inverse") === "true")) ? true : false;
}
function grayImage(image, effect) {
var myCnv = document.createElement("canvas");
var myCtx = myCnv.getContext("2d");
myCnv.width = image.width;
myCnv.height = image.height;
myCtx.drawImage(image, 0, 0);
var imgData = myCtx.getImageData(0, 0, myCnv.width, myCnv.height);
for (var y = 0; y < imgData.height; y++) {
for (var x = 0; x < imgData.width; x++) {
var pos = (y * 4) * imgData.width + (x * 4);
switch (effect) {
case ("sepia"):
var mono = imgData.data[pos] * 0.32 + imgData.data[pos + 1] * 0.5 + imgData.data[pos + 2] * 0.18;
imgData.data[pos] = mono + 50;
imgData.data[pos + 1] = mono;
imgData.data[pos + 2] = mono - 50;
break;
case ("negative"):
imgData.data[pos] = 255 - imgData.data[pos];
imgData.data[pos + 1] = 255 - imgData.data[pos + 1];
imgData.data[pos + 2] = 255 - imgData.data[pos + 2];
break;
case ("light"):
imgData.data[pos] = imgData.data[pos] + 80;
imgData.data[pos + 1] = imgData.data[pos + 1] + 80;
imgData.data[pos + 2] = imgData.data[pos + 2] + 80;
break;
case ("dark"):
imgData.data[pos] = imgData.data[pos] - 80;
imgData.data[pos + 1] = imgData.data[pos + 1] - 80;
imgData.data[pos + 2] = imgData.data[pos + 2] - 80;
break;
case ("noise"):
var noise = (0.5 - Math.random()) * 160;
imgData.data[pos] = imgData.data[pos] + noise;
imgData.data[pos + 1] = imgData.data[pos + 1] + noise;
imgData.data[pos + 2] = imgData.data[pos + 2] + noise;
break;
default:
imgData.data[pos] = imgData.data[pos + 1] = imgData.data[pos + 2] = imgData.data[pos] * 0.32 + imgData.data[pos + 1] * 0.5 + imgData.data[pos + 2] * 0.18
}
}
}
myCtx.putImageData(imgData, 0, 0, 0, 0, imgData.width, imgData.height);
return myCnv.toDataURL();
}
};
$.fn.colorUp();
Nu is de vraag of het mogelijk zou zijn als je over de foto gaat (hover) dat er bij het veranderen naar kleur ook een tekst over komt. Of er een tekst verschijnt aan de onderkant zoals bij volgende link: http://web.enavu.com/demos/caption/
Ik krijg beide zaken niet in elkaar.
Gewijzigd op 12/06/2014 21:16:42 door Brecht S
Een alternatief is een onzichtbare (hidden) div te maken die over het canvas overlapt welke je zichtbaar laat maken bij een mouseover.
Ik heb hier wel een voorbeeld gevonden van een HTML5 canvas script die hetzelfde zou moeten doen: http://permadi.com/tutorial/jsCanvasGrayscale/index.html maar aangezien mijn colorup js script ook werkt voor dit kan ik het dan niet gebruiken?
Gewijzigd op 12/06/2014 22:41:53 door Brecht S
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$('.colorUpped').mouseover(function () {
$(this).stop().animate({ opacity: getInv($(this)) ? 0 : 1 }, getSpeed($(this)));
})
$('.colorUpped').mouseout(function () {
$(this).stop().animate({ opacity: getInv($(this)) ? 1 : 0 }, getSpeed($(this)));
});
$(this).stop().animate({ opacity: getInv($(this)) ? 0 : 1 }, getSpeed($(this)));
})
$('.colorUpped').mouseout(function () {
$(this).stop().animate({ opacity: getInv($(this)) ? 1 : 0 }, getSpeed($(this)));
});
Dat zijn twee functies die gekoppeld worden aan een event van een alle HTML elementen die de class="colorUpped" hebben. De bovenste functie wordt aangeroepen zodra je met de muis over het HTML element heen beweegt. De onderste functie wordt aangeroepen zodra je het gebied van het HTML element weer verlaat.
$(this) is de sleutel die naar het element wijst waar je op dat moment overheen beweegt.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
$('.colorUpped').mouseover(function () {
// extra acties vr de animatie
$(this).stop().animate({ opacity: getInv($(this)) ? 0 : 1 }, getSpeed($(this)));
// extra acties na de animatie
})
$('.colorUpped').mouseout(function () {
// extra acties vr de animatie
$(this).stop().animate({ opacity: getInv($(this)) ? 1 : 0 }, getSpeed($(this)));
// extra acties na de animatie
});
// extra acties vr de animatie
$(this).stop().animate({ opacity: getInv($(this)) ? 0 : 1 }, getSpeed($(this)));
// extra acties na de animatie
})
$('.colorUpped').mouseout(function () {
// extra acties vr de animatie
$(this).stop().animate({ opacity: getInv($(this)) ? 1 : 0 }, getSpeed($(this)));
// extra acties na de animatie
});
Maar zit terug een beetje vast. Ik had hier iets gevonden maar dat werkt dus niet. Even de volledige code hieronder:
Code (php)
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!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>
<title></title>
<style>
.figcaption {
display:block;
width:380px;
height:40px;
padding:10px;
position:absolute;
top:540px;
left:0;
color:#FFFFFF;
font:13px/20px Arial, sans-serif;
background:#000000;
background:rgba(0,0,0,.5);
}
</style>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<img src="http://www.contentu.be/zekerwonen/images/latem1.jpg" class="colorup" effect="mono" inverse="true"/>
<div id="figcaption">Write your image caption here!</div>
<script>
jQuery.fn.colorUp = function () {
$(window).load(function () {
$('.colorup').each(function () {
var curImg = $(this).wrap('<span />');
var newImg = curImg.clone().css({ "position": "absolute", "z-index": "98", "opacity": "0" }).insertBefore(curImg);
newImg.attr("src", grayImage(this, curImg.attr("effect")));
newImg.addClass('colorUpped').animate({ opacity: getInv(curImg) ? 1 : 0 }, getSpeed(curImg));
});
$('.colorUpped').mouseover(function () {
$(this).find('#figcaption').stop().animate({'top':'540px'}, 200, function(){});
},function(){
$(this).find('#figcaption').stop().animate({'top':'600px'}, 200, function(){});
$(this).stop().animate({ opacity: getInv($(this)) ? 0 : 1 }, getSpeed($(this)));
})
$('.colorUpped').mouseout(function () {
$(this).stop().animate({ opacity: getInv($(this)) ? 1 : 0 }, getSpeed($(this)));
});
});
function getSpeed(elem) {
return (elem.attr("speed")) ? parseInt(elem.attr("speed")) : 1000;
}
function getInv(elem) {
return (elem.attr("inverse") && (elem.attr("inverse") === "true")) ? true : false;
}
function grayImage(image, effect) {
var myCnv = document.createElement("canvas");
var myCtx = myCnv.getContext("2d");
myCnv.width = image.width;
myCnv.height = image.height;
myCtx.drawImage(image, 0, 0);
var imgData = myCtx.getImageData(0, 0, myCnv.width, myCnv.height);
for (var y = 0; y < imgData.height; y++) {
for (var x = 0; x < imgData.width; x++) {
var pos = (y * 4) * imgData.width + (x * 4);
switch (effect) {
case ("sepia"):
var mono = imgData.data[pos] * 0.32 + imgData.data[pos + 1] * 0.5 + imgData.data[pos + 2] * 0.18;
imgData.data[pos] = mono + 50;
imgData.data[pos + 1] = mono;
imgData.data[pos + 2] = mono - 50;
break;
case ("negative"):
imgData.data[pos] = 255 - imgData.data[pos];
imgData.data[pos + 1] = 255 - imgData.data[pos + 1];
imgData.data[pos + 2] = 255 - imgData.data[pos + 2];
break;
case ("light"):
imgData.data[pos] = imgData.data[pos] + 80;
imgData.data[pos + 1] = imgData.data[pos + 1] + 80;
imgData.data[pos + 2] = imgData.data[pos + 2] + 80;
break;
case ("dark"):
imgData.data[pos] = imgData.data[pos] - 80;
imgData.data[pos + 1] = imgData.data[pos + 1] - 80;
imgData.data[pos + 2] = imgData.data[pos + 2] - 80;
break;
case ("noise"):
var noise = (0.5 - Math.random()) * 160;
imgData.data[pos] = imgData.data[pos] + noise;
imgData.data[pos + 1] = imgData.data[pos + 1] + noise;
imgData.data[pos + 2] = imgData.data[pos + 2] + noise;
break;
default:
imgData.data[pos] = imgData.data[pos + 1] = imgData.data[pos + 2] = imgData.data[pos] * 0.32 + imgData.data[pos + 1] * 0.5 + imgData.data[pos + 2] * 0.18
}
}
}
myCtx.putImageData(imgData, 0, 0, 0, 0, imgData.width, imgData.height);
return myCnv.toDataURL();
}
};
$.fn.colorUp();
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.figcaption {
display:block;
width:380px;
height:40px;
padding:10px;
position:absolute;
top:540px;
left:0;
color:#FFFFFF;
font:13px/20px Arial, sans-serif;
background:#000000;
background:rgba(0,0,0,.5);
}
</style>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<img src="http://www.contentu.be/zekerwonen/images/latem1.jpg" class="colorup" effect="mono" inverse="true"/>
<div id="figcaption">Write your image caption here!</div>
<script>
jQuery.fn.colorUp = function () {
$(window).load(function () {
$('.colorup').each(function () {
var curImg = $(this).wrap('<span />');
var newImg = curImg.clone().css({ "position": "absolute", "z-index": "98", "opacity": "0" }).insertBefore(curImg);
newImg.attr("src", grayImage(this, curImg.attr("effect")));
newImg.addClass('colorUpped').animate({ opacity: getInv(curImg) ? 1 : 0 }, getSpeed(curImg));
});
$('.colorUpped').mouseover(function () {
$(this).find('#figcaption').stop().animate({'top':'540px'}, 200, function(){});
},function(){
$(this).find('#figcaption').stop().animate({'top':'600px'}, 200, function(){});
$(this).stop().animate({ opacity: getInv($(this)) ? 0 : 1 }, getSpeed($(this)));
})
$('.colorUpped').mouseout(function () {
$(this).stop().animate({ opacity: getInv($(this)) ? 1 : 0 }, getSpeed($(this)));
});
});
function getSpeed(elem) {
return (elem.attr("speed")) ? parseInt(elem.attr("speed")) : 1000;
}
function getInv(elem) {
return (elem.attr("inverse") && (elem.attr("inverse") === "true")) ? true : false;
}
function grayImage(image, effect) {
var myCnv = document.createElement("canvas");
var myCtx = myCnv.getContext("2d");
myCnv.width = image.width;
myCnv.height = image.height;
myCtx.drawImage(image, 0, 0);
var imgData = myCtx.getImageData(0, 0, myCnv.width, myCnv.height);
for (var y = 0; y < imgData.height; y++) {
for (var x = 0; x < imgData.width; x++) {
var pos = (y * 4) * imgData.width + (x * 4);
switch (effect) {
case ("sepia"):
var mono = imgData.data[pos] * 0.32 + imgData.data[pos + 1] * 0.5 + imgData.data[pos + 2] * 0.18;
imgData.data[pos] = mono + 50;
imgData.data[pos + 1] = mono;
imgData.data[pos + 2] = mono - 50;
break;
case ("negative"):
imgData.data[pos] = 255 - imgData.data[pos];
imgData.data[pos + 1] = 255 - imgData.data[pos + 1];
imgData.data[pos + 2] = 255 - imgData.data[pos + 2];
break;
case ("light"):
imgData.data[pos] = imgData.data[pos] + 80;
imgData.data[pos + 1] = imgData.data[pos + 1] + 80;
imgData.data[pos + 2] = imgData.data[pos + 2] + 80;
break;
case ("dark"):
imgData.data[pos] = imgData.data[pos] - 80;
imgData.data[pos + 1] = imgData.data[pos + 1] - 80;
imgData.data[pos + 2] = imgData.data[pos + 2] - 80;
break;
case ("noise"):
var noise = (0.5 - Math.random()) * 160;
imgData.data[pos] = imgData.data[pos] + noise;
imgData.data[pos + 1] = imgData.data[pos + 1] + noise;
imgData.data[pos + 2] = imgData.data[pos + 2] + noise;
break;
default:
imgData.data[pos] = imgData.data[pos + 1] = imgData.data[pos + 2] = imgData.data[pos] * 0.32 + imgData.data[pos + 1] * 0.5 + imgData.data[pos + 2] * 0.18
}
}
}
myCtx.putImageData(imgData, 0, 0, 0, 0, imgData.width, imgData.height);
return myCnv.toDataURL();
}
};
$.fn.colorUp();
</script>
</body>
</html>
Ik heb de javascript even toegevoegd aan de HTML. Lijkt me gemakkelijker.
Lijn 46-48 heb ik toegevoegd. En de code gebruikt die te vinden is op http://www.coalmarch.com/blog/cross-browser-animated-captions-using-html5-figcaption
Gewijzigd op 13/06/2014 11:54:21 door Brecht S