Ошибка в скрипте Javascript

Discussion in 'PHP' started by ZneP, 13 Aug 2008.

  1. ZneP

    ZneP Elder - Старейшина

    Joined:
    7 Nov 2006
    Messages:
    55
    Likes Received:
    5
    Reputations:
    0
    Добрый день!


    Написал яваскрипт, который делает отображение картинки с Fade эффектом.

    В осле и лисе работает замечательно, в опере же появляется картинка (без эффекта) и сразу же исчезает.

    Из-за чего это все? Помогите разобраться...

    Вот исходники
    файл index.html

    Code:
    <html>
<head><title></title></head>

<script type="text/javascript">
var interval_id;
var interval_id1;
var browserdetect;
var mozopacity = 0;
var opacity_step = 10;
var mozopacity_step = 0.101;

function Show_Pointer(text, x, y, l)
{ 
mozopacity = 0; 
if(pointer.style.visibility == 'visible')
{ 
clearInterval(interval_id); 
clearInterval(interval_id1); 
pointer.style.visibility == 'hidden'; 
} 

browserdetect=pointer.filters? "ie" : typeof(pointer.style.MozOpacity) == "string" ? "mz" : ""; 

if (browserdetect == "ie")
{ 
pointer.filters.alpha.opacity = "0"; 
pointer.style.pixelLeft=x; 
pointer.style.pixelTop=y; 
pointer_text.style.pixelLeft=l; 
pointer_text.style.pixelTop=7; 
//pointer_table.background = "none"; 
pointer_table.style.filter = "progidXImageTransform.Microsoft.AlphaImageLoader (src='1.jpg', sizingMethod='scale')";
pointer_text.innerText = text; 
} 
else 
{ 
pointer.style.MozOpacity = 0; 
pointer.style.left=x + "px"; 
pointer.style.top=y + "px"; 
pointer_text.style.left=l + "px"; 
pointer_text.style.top="7px"; 
pointer_text.textContent = text; 
} 

pointer.style.visibility = 'visible'; 
interval_id=setInterval("FadeShowLevel()",50); 
} 

function FadeShowLevel() 
{ 
if (browserdetect == "ie") 
pointer.filters.alpha.opacity+=opacity_step; 
else if (browserdetect == "mz") 
mozopacity+=mozopacity_step; 
else pointer.style.visibility = 'hidden'; 

pointer.style.MozOpacity=mozopacity; 

if ((pointer.style.MozOpacity >= 1) || (pointer.filters.alpha.opacity >= 100)) 
{ 
clearInterval(interval_id); 
} 
} 

function Hide_Pointer() 
{ 
clearInterval(interval_id); 
pointer.style.visibility = 'hidden'; 
} 
</script> 

<body bgcolor="#000000"> 
<table border=2 width="1000" align="center"> 
<tr> 
<td class="td_map"> 
<input type="button" onmouseout="Hide_Pointer()" onmouseover="Show_Pointer('', 600, 100, 50)" value="111111" /> 
</td> 
</tr> 
</table> 

<div id="pointer" style="position:absolute;left:0px;top:0px;bottom:0px;righ t:0px;visibility:hidden;filter:alpha(opacity=0);-moz-opacity:0"> 
<font id="pointer_text" align="center" style="position:absolute;colorrange;font-family:Verdana;font-size:13;font-weight:bold;filter:alpha(opacity=100)"></font> 
<table id="pointer_table" width="173" height="138" background="1.jpg"> 
<tr> 
<td align="center" valign="top"></td> 
</tr> 
</table> 
</div> 

</body> 

</html>
    В качестве всплывающей картинки возмите jpg изображение и переименуйте в 1.jpg
     
    #1 ZneP, 13 Aug 2008
    Last edited: 13 Aug 2008
  2. m0nsieur

    m0nsieur Elder - Старейшина

    Joined:
    8 Apr 2008
    Messages:
    223
    Likes Received:
    69
    Reputations:
    10
    У меня только в ФФ заработал скрипт и то через ошибки, спотыкается тут

    if ((pointer.style.MozOpacity >= 1) || (pointer.filters.alpha.opacity >= 100))
    {
    clearInterval(interval_id);
    }
    в ФФ желательно писать не pointer.filters.alpha.opacity, а document.getElementById(pointer).filters.alpha.opacity т.е. получать элемент через document.getElementById() как по стандарту.

    В ИЕ и Опера не заработало =(
     
    #2 m0nsieur, 13 Aug 2008
    Last edited: 13 Aug 2008
  3. Chaak

    Chaak Elder - Старейшина

    Joined:
    1 Jun 2008
    Messages:
    1,059
    Likes Received:
    1,067
    Reputations:
    80
    В опере яваскрипт урезанный, многие функции не поддерживаются.
     
    #3 Chaak, 13 Aug 2008
  4. ZneP

    ZneP Elder - Старейшина

    Joined:
    7 Nov 2006
    Messages:
    55
    Likes Received:
    5
    Reputations:
    0
    Opacity в опере должно работать. есть у нее такая функция


    вот новый код, чтобы и в ИЕ работал (лишняя строчка была):


    Code:
    <html>
<head><title></title></head>

<script type="text/javascript">
var interval_id;
var interval_id1;
var browserdetect;
var mozopacity = 0;
var opacity_step = 10;
var mozopacity_step = 0.101;

function Show_Pointer(text, x, y, l)
{ 
mozopacity = 0; 
if(pointer.style.visibility == 'visible')
{ 
clearInterval(interval_id); 
clearInterval(interval_id1); 
pointer.style.visibility == 'hidden'; 
} 

browserdetect=pointer.filters? "ie" : typeof(pointer.style.MozOpacity) == "string" ? "mz" : ""; 

if (browserdetect == "ie")
{ 
pointer.filters.alpha.opacity = "0"; 
pointer.style.pixelLeft=x; 
pointer.style.pixelTop=y; 
pointer_text.style.pixelLeft=l; 
pointer_text.style.pixelTop=7; 
pointer_table.style.filter.progidX = "ImageTransform.Microsoft.AlphaImageLoader (src='1.jpg', 

sizingMethod='scale')";
pointer_text.innerText = text; 
} 
else 
{ 
pointer.style.MozOpacity = 0; 
pointer.style.left=x + "px"; 
pointer.style.top=y + "px"; 
pointer_text.style.left=l + "px"; 
pointer_text.style.top="7px"; 
pointer_text.textContent = text; 
} 

pointer.style.visibility = 'visible'; 
interval_id=setInterval("FadeShowLevel()",50); 
} 

function FadeShowLevel() 
{ 
if (browserdetect == "ie") 
pointer.filters.alpha.opacity+=opacity_step; 
else if (browserdetect == "mz") 
mozopacity+=mozopacity_step; 
else pointer.style.visibility = 'hidden'; 

pointer.style.MozOpacity=mozopacity; 

if ((pointer.style.MozOpacity >= 1) || (pointer.filters.alpha.opacity >= 100)) 
{ 
clearInterval(interval_id); 
} 
} 

function Hide_Pointer() 
{ 
clearInterval(interval_id); 
pointer.style.visibility = 'hidden'; 
} 
</script> 

<body bgcolor="#000000"> 
<table border=2 width="1000" align="center"> 
<tr> 
<td class="td_map"> 
<input type="button" onmouseout="Hide_Pointer()" onmouseover="Show_Pointer('', 600, 100, 50)" value="111111" /> 
</td> 
</tr> 
</table> 

<div id="pointer" style="position:absolute;left:0px;top:0px;bottom:0px;righ   

t:0px;visibility:hidden;filter:alpha(opacity=0);-moz-opacity:0"> 
<font id="pointer_text" align="center" 

style="position:absolute;colorrange;font-family:Verdana;font-size:13;font-weight:bold;filter:alpha(opacity=100)"></f

ont> 
<table id="pointer_table" width="173" height="138" background="1.jpg"> 
<tr> 
<td align="center" valign="top"></td> 
</tr> 
</table> 
</div> 

</body> 

</html>
     
    #4 ZneP, 13 Aug 2008
    Last edited: 13 Aug 2008
  5. m0nsieur

    m0nsieur Elder - Старейшина

    Joined:
    8 Apr 2008
    Messages:
    223
    Likes Received:
    69
    Reputations:
    10
    Opacity в опере работает точно, вот пример тому - http://www.tigir.com/opacity.htm

    А новый код в ИЕ все равно не заработал.
     
    #5 m0nsieur, 13 Aug 2008
  6. ZneP

    ZneP Elder - Старейшина

    Joined:
    7 Nov 2006
    Messages:
    55
    Likes Received:
    5
    Reputations:
    0
    Тэги CODE на форуме разрезали строки и делали отступы.


    <html>
    <head><title></title></head>

    <script type="text/javascript">
    var interval_id;
    var interval_id1;
    var browserdetect;
    var mozopacity = 0;
    var opacity_step = 10;
    var mozopacity_step = 0.101;

    function Show_Pointer(text, x, y, l)
    {
    mozopacity = 0;
    if(pointer.style.visibility == 'visible')
    {
    clearInterval(interval_id);
    clearInterval(interval_id1);
    pointer.style.visibility == 'hidden';
    }

    browserdetect=pointer.filters? "ie" : typeof(pointer.style.MozOpacity) == "string" ? "mz" : "";

    if (browserdetect == "ie")
    {
    pointer.filters.alpha.opacity = "0";
    pointer.style.pixelLeft=x;
    pointer.style.pixelTop=y;
    pointer_table.style.filter = "progidX:ImageTransform.Microsoft.AlphaImageLoader(src='1.jpg',sizingMethod='scale')";
    pointer_text.innerText = text;
    }
    else
    {
    pointer.style.MozOpacity = 0;
    pointer.style.left=x + "px";
    pointer.style.top=y + "px";
    pointer_text.textContent = text;
    }

    pointer.style.visibility = 'visible';
    interval_id=setInterval("FadeShowLevel()",50);
    }

    function FadeShowLevel()
    {
    if (browserdetect == "ie")
    pointer.filters.alpha.opacity+=opacity_step;
    else if (browserdetect == "mz")
    mozopacity+=mozopacity_step;
    else pointer.style.visibility = 'hidden';

    pointer.style.MozOpacity=mozopacity;

    if ((pointer.style.MozOpacity >= 1) || (pointer.filters.alpha.opacity >= 100))
    {
    clearInterval(interval_id);
    }
    }

    function Hide_Pointer()
    {
    clearInterval(interval_id);
    pointer.style.visibility = 'hidden';
    }
    </script>

    <body bgcolor="#000000">
    <table border=2 width="1000" align="center">
    <tr>
    <td class="td_map">
    <input type="button" onmouseout="Hide_Pointer()" onmouseover="Show_Pointer('', 600, 100, 50)" value="111111" />
    </td>
    </tr>
    </table>

    <div id="pointer" style="position:absolute;left:0px;top:0px;bottom:0px;right:0px;visibility:hidden;filter:alpha(opacity=0);-moz-opacity:0">
    <font id="pointer_text" align="center"
    style="position:absolute;colorrange;font-family:Verdana;font-size:13;font-weight:bold;filter:alpha(opacity=100)"></font>
    <table id="pointer_table" width="173" height="138" background="1.jpg">
    <tr>
    <td align="center" valign="top"></td>
    </tr>
    </table>
    </div>

    </body>

    </html>
     
    #6 ZneP, 13 Aug 2008
  7. ZneP

    ZneP Elder - Старейшина

    Joined:
    7 Nov 2006
    Messages:
    55
    Likes Received:
    5
    Reputations:
    0
    Все заработало

    я взял пример готового скрипта (opacity.js) по ссылке http://www.tigir.com/opacity.htm, которую выложил m0nsieur, и приспособил к своему коду

    Спасибо всем! ))))
     
    #7 ZneP, 13 Aug 2008
(You must log in or sign up to post here.)