Re: Mga Tanong tungkol sa PHP, CSS, jquery, HTML at MySQL pasok D2
sir paayos nga poh itong code gawin niyu poh , pagtinutok yung mouse sa image kusa na lang poh lalaki , .. pa-ayos poh ah ^^
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<base href="http://www.coothead.co.uk/images/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>zoom in, zoom out</title>
<style type="text/css">
body {
background-image:url(bodyBg.jpg);
}
#pic{
width:60px; /*initial image width*/
height:42px; /*initial image height*/
position:absolute;
top:50%;
left:50%;
margin-left:-33px;
margin-top:-24px;
border:3px double #fc9;
background-color:#009;
}
#but {
width:100px;
line-height:25px;
border:3px double #fc9;
background-color:#2e475d;
font-family:verdana,arial,helvetica,sans-serif;
font-size:1em;
color:#fee66a;
text-align:center;
cursor:pointer;
margin:30px 30px 0 0;
float:right;
}
</style>
<script type="text/javascript">
/******************************* these are the editable variables *******************************/
var w=400; /*actual image width*/
var h=400; /*actual image height*/
var c=150; /*this value is equal to the inital image width*/
var rat=h/w /*this value is equal to the height of image divided by the width of image*/
var speed=10; /*this value varies the rate of zoom in conjunction with var exp*/
var exp=10; /*this value varies the rate of zoom in conjunction with var speed*/
var bw=6; /*this value is equal to image border width times two*/
/***********************************************************************************************/
var shr=-exp;
var init=c;
var test=true;
var obj;
var obj1;
if(window.addEventListener){
window.addEventListener('load',setup,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',setup);
}
}
function setup(){
obj=document.getElementById('pic');
obj1=document.getElementById('but');
obj1.onclick=function() {
if(test==true) {
obj1.firstChild.nodeValue='zoom out';
test=false;
zoooom(exp);
}
else {
obj1.firstChild.nodeValue='zoom in';
test=true;
zoooom(shr);
}
}
}
function zoooom(inc) {
if(c<init) {
c=init;
test=true;
return;
}
if(c>w) {
c=w;
test=false;
return;
}
obj.style.marginLeft=-(c+bw)/2+'px';
obj.style.marginTop=-rat*(c+bw)/2+'px';
obj.style.width=c+'px';
obj.style.height=rat*c+'px';
c+=inc;
inc1=inc;
setTimeout('zoooom(inc1)',speed);
}
</script>
</head>
<body>
<div>
<img id="pic" src="buddha.jpg" alt="">
</div>
<div id="but">zoom in</div>
</body>
</html>
ayan poh yung code pa-ayos poh ah .. see niyu na lang poh yung image na-nakaattach , pwede poh alisin niyu yung zoom in ,
ang gusto ko lang po mangyari pag tinutok yung mouse sa image kusa na lang poh lalaki . ^^ salamat poh
Sana makatulong to.. Option No.: 1
Ito po try mo na, my binago lang ako jan para mag mouseover zoom na siya..
obj1.onclick=function() {
ginawa ko siyang -->
obj1.onmouseover=function(){
/*----------------------------------------------------*/
Binago ko din yung CSS...
#but {cursorointer;
}
ito yung html code:
<div id="but"><img id="pic" src="images/theloveofsiamphils_small.jpg" alt=""></div>
--->
Overall Code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>zoom in, zoom out</title>
<style type="text/css">
body {
background-image:url(bodyBg.jpg);
}
#pic{
width:60px; /*initial image width*/
height:42px; /*initial image height*/
position:absolute;
top:50%;
left:50%;
margin-left:-33px;
margin-top:-24px;
border:3px double #fc9;
background-color:#009;
}
#but {cursor
ointer;
}
</style>
<script type="text/javascript">
/******************************* these are the editable variables *******************************/
var w=400; /*actual image width*/
var h=400; /*actual image height*/
var c=150; /*this value is equal to the inital image width*/
var rat=h/w /*this value is equal to the height of image divided by the width of image*/
var speed=10; /*this value varies the rate of zoom in conjunction with var exp*/
var exp=10; /*this value varies the rate of zoom in conjunction with var speed*/
var bw=6; /*this value is equal to image border width times two*/
/***********************************************************************************************/
var shr=-exp;
var init=c;
var test=true;
var obj;
var obj1;
if(window.addEventListener){
window.addEventListener('load',setup,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',setup);
}
}
function setup(){
obj=document.getElementById('pic');
obj1=document.getElementById('but');
obj1.onmouseover=function() {
if(test==true) {
obj1.firstChild.nodeValue='zoom out';
test=false;
zoooom(exp);
}
else {
obj1.firstChild.nodeValue='zoom in';
test=true;
zoooom(shr);
}
}
}
function zoooom(inc) {
if(c<init) {
c=init;
test=true;
return;
}
if(c>w) {
c=w;
test=false;
return;
}
obj.style.marginLeft=-(c+bw)/2+'px';
obj.style.marginTop=-rat*(c+bw)/2+'px';
obj.style.width=c+'px';
obj.style.height=rat*c+'px';
c+=inc;
inc1=inc;
setTimeout('zoooom(inc1)',speed);
}
</script>
</head>
<div id="but"><img id="pic" src="images/theloveofsiamphils_small.jpg" alt=""></div>
</body>
</html>
<---
"ayan poh yung code pa-ayos poh ah .. see niyu na lang poh yung image na-nakaattach , pwede poh alisin niyu yung zoom in ,
ang gusto ko lang po mangyari pag tinutok yung mouse sa image kusa na lang poh lalaki . ^^ salamat poh"
ito yung Code sa Gusto mo ma achieve na pag tinutok mo sa image ay lalaki na siya without zoomin..
Option No.: 2
/*------------------------------------------*/
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="js/advanced-preview.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
this.imagePreview = function(){
xOffset = 10;
yOffset = 30;
imgDiv = 2;
$("a.preview").hover(function(e){
var img = new Image();
$("#preview-image").remove();
$("body").append('<div id="preview-image" style="display: none; position: absolute; z-index: 20000000;"></div>');
ptop = (e.pageY - xOffset);
pleft = (e.pageX + yOffset);
var iml = this.href
$("#preview-image").html('');
$("#preview-image")
.css("top", ptop + "px")
.css("left", pleft + "px")
.show();
$("#preview-image").addClass('loading');
$(img)
.load(function(){
$(this).hide();
$("#preview-image")
.removeClass('loading')
.html('')
.append(this);
if (img.width > $(window).width() && img.height > $(window).height()){
xDif = (img.width - $(window).width());
yDif = (img.width - $(window).height());
if (xDif > yDif) {
img.width = ($(window).width()-($(window).width()/2));
} else {
img.height = ($(window).height() - ($(window).height()/2))
}
} else if (img.width > $(window).width()){
img.width = ($(window).width() - ($(window).width()/2))
} else if (img.height > $(window).height()){
img.height = ($(window).height() - ($(window).height()/2))
}
// adjust the width and height attributes
$(this).fadeIn("fast");
if (((ptop + $("#preview-image").height())-$(window).scrollTop()) > $(window).height()){
// Find a placement where it won't fall below the window
ptop = ($(window).height()-($("#preview-image").height())) + $(window).scrollTop();
}
if (ptop < $(window).scrollTop()){
ptop = $(window).scrollTop();
}
if ((pleft + $("#preview-image").width()) > $(window).width()){
pleft = ($(window).width()-$("#preview-image").width());
//pleft = $(window).width()-img.width;
}
$("#preview-image")
.css("top",ptop + "px")
.css("left",pleft + "px");
})
.attr('src', iml);
}, function(){
$("#preview-image").hide();
$("#preview-image").remove();
});
$("a.preview").mousemove(function(e){
ptop = (e.pageY - xOffset);
pleft = (e.pageX + yOffset);
if (((ptop + $("#preview-image").height())-$(window).scrollTop()) > $(window).height()){
// Find a placement where it won't fall below the window
ptop = ($(window).height()-($("#preview-image").height())) + $(window).scrollTop();
}
if (ptop < $(window).scrollTop()){
ptop = $(window).scrollTop();
}
if ((pleft + $("#preview-image").width()) > $(window).width()){
pleft = ($(window).width() - $("#preview-image").width());
if ((e.pageX + xOffset) > pleft && (e.pageX + xOffset) < (pleft + $("#preview-image").width())){
ptop = e.pageY + yOffset;
}
//pleft = $(window).width()-img.width;
}
$("#preview-image")
.css("top",ptop + "px")
.css("left",pleft + "px");
});
};
// starting the script on page load
$(document).ready(function(){
imagePreview();
});
</script>
<style type="text/css">
.loading {
background: url(/images/loadingAnimation.gif);
width: 208px;
height: 13px;
}
</style>
</head>
<body>
<a class="preview" href="images/theloveofsiamphils.jpg"><img src="images/theloveofsiamphils_small.jpg" with="100" height="100"></a>
</body>
</html>
Note: May attachment yung sa Option 2, kelangan kc ng Jquery kaya nilagay q na sa files, pati yung Script sa taas na advance preview pde mu din ilagay sa Js files para ndi na mahaba ung HTML mo,
--->
<script src="js/advanced-preview.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<--
Naka Attach na din yung code for image zoom para madali mo ng gamitin..