0
지혜를 찾고 :롤오버 이미지 버튼 팬시 박스 iFrame?
저는 롤오버 이미지 버튼을 만들기 위해 html, javascript 및 jquery를 사용해 보았습니다. href fancybox iframe 팝업 링크를 추가 할 때 롤오버 단추를 만드는 방법과 상관없이 팝업 창을 만드는 대신 링크 전체 웹 페이지가 열립니다.
롤오버가없는 이미지 버튼 만 있으면 팝업 창이 잘 작동합니다. fancybox javascript에 추가 할 필요가 있거나 롤오버와 호환되지 않는 fancybox입니까?
<!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>TESTING</title>
<!-- rollover images using javascript -->
<script language="javascript" type="text/javascript">
normal_image = new Image();
normal_image.src = "images/contact_us_red.png";
mouseover_image = new Image();
mouseover_image.src = "images/contact_us_black.png";
<!-- repeat the 4 lines above for any subsequent images. -->
function swap(){
if (document.images){
for (var x=0;
x<swap.arguments.length;
x+=2) {
document[swap.arguments[x]].src = eval(swap.arguments[x+1] + ".src");
}
}
}
</script>
<!-- JAVASCRIPT FOR FANCYBOX -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="popup/jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="popup/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="popup/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="popup/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function() {
$("img.rollover").hover(
function() { this.src = this.src.replace("_off", "_on");
},
function() { this.src = this.src.replace("_on", "_off");
});
});
$(document).ready(function() {
/*
* Examples - images
*/
$("a#example1").fancybox();
$("a#example2").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
$("a#example3").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none'
});
$("a#example4").fancybox({
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'none'
});
$("a#example5").fancybox();
$("a#example6").fancybox({
'titlePosition' : 'outside',
'overlayColor' : '#000',
'overlayOpacity' : 0.9
});
$("a#example7").fancybox({
'titlePosition' : 'inside'
});
$("a#example8").fancybox({
'titlePosition' : 'over'
});
$("a[rel=example_group]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + '/' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
/*
* Examples - various
*/
$("#various1").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});
$("#various2").fancybox();
$("#various3").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
$("#various4").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onload="MM_preloadImages('images/contact_us_red.png')">
<!-- THIS LINK WORKS. -->
<p><a id="various3" href="Contact/templates/form.tpl.html"><img src="images/contact_us_red.png" width="108" height="36" /></a>
</p>
<p> </p>
<!-- HERE IS THE JAVA LINK THAT WONT WORK -->
<a id="various3" href="Contact/templates/form.tpl.html" onMouseOver="swap('name_of_img','normal_image')" onMouseOut="swap('name_of_img','mouseover_image')"><img name="name_of_img" src="images/contact_us_black.png" border="0"></a>
<p> </p>
<!-- HERE IS THE HTML LINK THAT WONT WORK -->
<a id="various3" href="Contact/templates/form.tpl.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/contact_us_red.png',1)"><img src="images/contact_us_black.png" name="Image3" width="108" height="36" border="0" id="Image3" /></a>
</body>
</html>
예, 코드, html 및 자바 스크립트를 입력하십시오. –
마지막으로 코드가 게시되었습니다. 도와 주셔서 감사합니다!! –
나는 자바 스크립트를 좋아하지만 롤오버는 CSS의 작업이어야한다고 생각합니다.) – JFK