How to control image scaling
I used the scaling property to scale the image, but its size increases and decreases. Can't I change the scaling setting? I am using this code.
<img src="test.gif" id="test"alt="Online Test portal"
style="position:absolute;top:935.5px;left:300px"
title="online test portal"
onmouseover= "new Effect.Scale('test', 150,{scaleX: true, scaleY: true});
return false;" onmouseout="new Effect.Scale('test', 66.67,{scaleX: true,
scaleY: true}); return false;" />
+3
source to share
2 answers
If you want to increase the image size (width and height) by XX% on hover and then return to normal size, why not use a jQuery script like your tags say?
Something like:
myfile.htm
<div id="toto">
<img id="myPic" src="test.gif" id="test" alt="Online Test portal"
style="position:absolute;top:935.5px;left:300px"
title="online test portal" />
</div>
myscript.js
$(document).ready(function(){
var picWidth = $("img#myPic").width(); /* retrieve initial width */
var picHeight= $("img#myPic").height(); /* retrieve initial height*/
var picPercen= 1.40 /* if you want to add 40% in both width & height */
/* function when hovering in */
$("img#myPic").hover(function(){
$(this).width(picPercent*picWidth);
$(this).height(picPercent*picHeight);
/* function when hovering out */
}, function(){
$(this).width(picWidth);
$(this).height(picHeight);
});
});
Or if you want animation to avoid violent changes:
myscript_AnimateVersion.js
$(document).ready(function(){
var picWidth = $("img#myPic").width(); /* retrieve initial width */
var picHeight= $("img#myPic").height(); /* retrieve initial height*/
var picPercen= 1.40 /* if you want to add 40% in both width & height */
var changeTime= 300 /* animation time in milliseconds */
/* function when hovering in */
$("img#myPic").hover(function(){
$(this).animate({width: picPercent*picWidth, height: picPercent*picHeight}, changeTime);
/* function when hovering out */
}, function(){
$(this).animate({width: picWidth, height: picHeight}, changeTime);
});
});
I have not tested this code, but it at least gives you a hint.
0
source to share
You can try to organize your code in such a way that you have more control over events:
Html
<img src="test.jpg" id="test" alt="Online Test portal" style="position:absolute;top:100.5px;left:300px" title="online test portal" />
Js
function mouseoverHandler(){
new Effect.Scale('test',150,{scaleX: true, scaleY: true});
// This will remove the events bindings, if this is what you needed
this.removeEventListener('mouseover', mouseoverHandler, false);
this.removeEventListener('mouseout', mouseoutHandler, false);
}
function mouseoutHandler(){
new Effect.Scale('test', 66.67,{scaleX: true, scaleY: true});
}
document.getElementById('test').addEventListener('mouseover', mouseoverHandler, false);
document.getElementById('test').addEventListener('mouseout', mouseoutHandler, false);
0
source to share