Ошибка в скрипте Javascript [Архив]

Просмотр полной версии : Ошибка в скрипте Javascript

ZneP

13.08.2008, 12:50

Добрый день!

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

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

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

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

<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

m0nsieur

13.08.2008, 13:15

У меня только в ФФ заработал скрипт и то через ошибки, спотыкается тут

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

В ИЕ и Опера не заработало =(

Chaak

13.08.2008, 13:20

В опере яваскрипт урезанный, многие функции не поддерживаются.

ZneP

13.08.2008, 13:59

Opacity в опере должно работать. есть у нее такая функция

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

<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>

m0nsieur

13.08.2008, 14:16

Opacity в опере работает точно, вот пример тому - http://www.tigir.com/opacity.htm

А новый код в ИЕ все равно не заработал.

ZneP

13.08.2008, 14:24

Тэги 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;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>

ZneP

13.08.2008, 15:52

Все заработало

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

Спасибо всем! ))))