Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.10.2008, 01:07
Интересующийся
Отправить личное сообщение для BackOrifice Посмотреть профиль Найти все сообщения от BackOrifice
 
Регистрация: 23.10.2008
Сообщений: 10

Корекция скрипта для работы в Opera
привет всем !!!
Я недавно начал интересоваться джава скриптами , и ещо не всё могу сделать сам.Нужна ваша помощь.

Значит есть у меня скрипт на сайте, благодаря которому направив курсор на картинку она меняется на другую, когда убираю курсор то картинка становется прежней.

ЭТОТ СКРИПТ РАБОТАЕТ ВЕЗДЕ КРОМЕ ОПЕРЫ !!!
Пожалусто помогите его подправить !!!

вот скрипт !!!

/****** User may alter these to change the fade effect ********/
var FadeInStep 	= 20;
var FadeOutStep 	= 20;
/****** Don't alter anything else **************/
document.write('<STYLE TYPE="text/css">.imgFader{ position:relative; filter:alpha(opacity=0); -moz-opacity:0.0 }</STYLE>');

if(!window.JSFX)
	JSFX=new Object();

JSFX.RolloverObjects=new Array();

JSFX.Rollover = function(name, img)
{
	JSFX.RolloverObjects[name]=new Image();
	JSFX.RolloverObjects[name].img_src = img;	
	if(!JSFX.Rollover.postLoad)
		JSFX.RolloverObjects[name].src = img;
}
JSFX.Rollover.postLoad = false;
JSFX.Rollover.loadImages = function()
{
	var i;
	for(i in JSFX.RolloverObjects)
	{
		r=JSFX.RolloverObjects[i];
		r.src=r.img_src;
	}
}
JSFX.Rollover.error = function(n)
{
		alert("JSFX.Rollover - An Error has been detected\n"
			+ "----------------------------------\n"
			+ "You must define a JSFX.Rollover in your document\n"
			+ "JSFX.Rollover(\""+n+"\",\"your_on_img.gif\")\n"
			+ "(check the spelling of your JSFX.Rollovers)");
}
/*******************************************************************
*
* Function    : getImg
*
* Description : In Netscape 4 images could be in layers so we might
*		    have to recurse the layers to find the image
*
*****************************************************************/
JSFX.getImg = function(n, d) 
{
	var img = d.images[n];
	if(!img && d.layers)  
		for(var i=0 ; !img && i<d.layers.length ; i++)
			img=JSFX.getImg(n,d.layers[i].document);
	return img;
}
/*******************************************************************
*
* Function    : findImg
*
* Description : gets the image from the document and reports an
*		    error if it cannot find it.
*
*****************************************************************/
JSFX.findImg = function(n, d) 
{
	var img = JSFX.getImg(n, d);

	/*** Stop emails because the image was named incorrectly ***/
	if(!img)
	{
		alert("JSFX.findImg - An Error has been detected\n"
			+ "----------------------------------\n"
			+ "You must define an image in your document\n"
			+ "<IMG SRC=\"your_image.ext\" NAME=\""+n+"\">\n"
			+ "(check the NAME= attribute of your images)");

		return(new Image());
	}
	return img;
}

JSFX.ImageFadeRunning=false;
JSFX.ImageFadeInterval=30;

/*******************************************************************
*
* Function    : imgFadeIn
*
* Description : This function is based on the turn_on() function
*		      of animate2.js (animated rollovers from [url]www.roy.whittle.com[/url]).
*		      Each image object is given a state. 
*			OnMouseOver the state is switched depending on the current state.
*			Current state -> Switch to
*			===========================
*			null		->	OFF.
*			OFF		->	FADE_IN
*			FADE_OUT	->	FADE_IN
*			FADE_OUT	->	FADE_OUT_IN (if the new image is different)
*			FADE_IN_OUT->	FADE_IN (if the image is the same)
*****************************************************************/
JSFX.imgFadeIn = function(img, imgSrc)
{
	if(img) 
	{
		if(img.state == null) 
		{
			img.state = "OFF";
			img.index = 0;
			img.next_on    = null;
		}

		if(img.state == "OFF")
		{
			/*** Vers 1.7 only load the ON image once ever ***/
			if(img.src.indexOf(imgSrc) == -1)
				img.src=imgSrc;

			img.currSrc = imgSrc;
			img.state = "FADE_IN";
			JSFX.startFading();
		}
		else if( img.state == "FADE_IN_OUT"
			|| img.state == "FADE_OUT_IN"
			|| img.state == "FADE_OUT")
		{
			if(img.currSrc == imgSrc)
				img.state = "FADE_IN";
			else
			{

				img.next_on = imgSrc;
				img.state="FADE_OUT_IN";
			}
		}
	}
}
/*******************************************************************
*
* Function    : imgFadeOut
*
* Description : This function is based on the turn_off function
*		      of animate2.js (animated rollovers from [url]www.roy.whittle.com[/url]).
*		      Each image object is given a state. 
*			OnMouseOut the state is switched depending on the current state.
*			Current state -> Switch to
*			===========================
*			ON		->	FADE_OUT.
*			FADE_IN	->	FADE_IN_OUT.
*			FADE_OUT_IN	->	FADE_IN. (after swapping to the next image)
*****************************************************************/
JSFX.imgFadeOut = function(img)
{
	if(img)
	{
		if(img.state=="ON")
		{
			img.state="FADE_OUT";
			JSFX.startFading();
		}
		else if(img.state == "FADE_IN")
		{
			img.state="FADE_IN_OUT";
		}
		else if(img.state=="FADE_OUT_IN")
		{
			img.next_on == null;
			img.state = "FADE_OUT";
		}
	}
}
/*******************************************************************
*
* Function    : startFading
*
* Description : This function is based on the start_animating() function
*	        	of animate2.js (animated rollovers from [url]www.roy.whittle.com[/url]).
*			If the timer is not currently running, it is started.
*			Only 1 timer is used for all objects
*****************************************************************/
JSFX.startFading = function()
{
	if(!JSFX.ImageFadeRunning)
		JSFX.ImageFadeAnimation();
}

/*******************************************************************
*
* Function    : ImageFadeAnimation
*
* Description : This function is based on the Animate function
*		    of animate2.js (animated rollovers from [url]www.roy.whittle.com[/url]).
*		    Each image object has a state. This function
*		    modifies each object and (possibly) changes its state.
*****************************************************************/
JSFX.ImageFadeAnimation = function()
{
	JSFX.ImageFadeRunning = false;
	for(i=0 ; i<document.images.length ; i++)
	{
		var img = document.images[i];
		if(img.state)
		{
			if(img.state == "FADE_IN")
			{
				img.index+=FadeInStep;

				if(img.index > 100)
					img.index = 100;

				if(img.filters)
					img.filters.alpha.opacity = img.index;
				else
					img.style.MozOpacity = img.index/101;

				if(img.index == 100)
					img.state="ON";
				else
					JSFX.ImageFadeRunning = true;
			}
			else if(img.state == "FADE_IN_OUT")
			{
				img.index+=FadeInStep;
				if(img.index > 100)
					img.index = 100;

				if(img.filters)
					img.filters.alpha.opacity = img.index;
				else 
					img.style.MozOpacity = img.index/101;

	
				if(img.index == 100)
					img.state="FADE_OUT";

				JSFX.ImageFadeRunning = true;
			}
			else if(img.state == "FADE_OUT")
			{
				img.index-=FadeOutStep;
				if(img.index < 0)
					img.index = 0;

				if(img.filters)
					img.filters.alpha.opacity = img.index;
				else
					img.style.MozOpacity = img.index/101;


				if(img.index == 0)
					img.state="OFF";
				else
					JSFX.ImageFadeRunning = true;
			}
			else if(img.state == "FADE_OUT_IN")
			{
				img.index-=FadeOutStep;
				if(img.index < 0)
					img.index = 0;

				if(img.filters)
					img.filters.alpha.opacity = img.index;
				else
					img.style.MozOpacity = img.index/101;

				if(img.index == 0)
				{
					img.src = img.next_on;
					img.currSrc = img.next_on;
					img.state="FADE_IN";
				}
				JSFX.ImageFadeRunning = true;
			}
		}
	}
	/*** Check to see if we need to animate any more frames. ***/
	if(JSFX.ImageFadeRunning)
		setTimeout("JSFX.ImageFadeAnimation()", JSFX.ImageFadeInterval);
}
/*******************************************************************


очень расчитываю на ваши богатые знания !!!

Последний раз редактировалось Андрей Параничев, 23.10.2008 в 02:03. Причина: Пользуйтесь bb-кодами [js] и [html] для оформления листингов кода в теле сообщения
Ответить с цитированием
  #2 (permalink)  
Старый 23.10.2008, 01:07
Интересующийся
Отправить личное сообщение для BackOrifice Посмотреть профиль Найти все сообщения от BackOrifice
 
Регистрация: 23.10.2008
Сообщений: 10

ВОТ ВТОРАЯ ЧАСТЬ СКРИПТА !!!

* Function    : hasOpacity
*
* Description : Tests if the browser allows Opacity
*
*****************************************************************/
JSFX.hasOpacity = function(obj)
{
	if(document.layers)
		return false;

	if(window.opera)
		return false;

	if(navigator.userAgent.toLowerCase().indexOf("mac") != -1)
		return false;

	return true;
}
/*******************************************************************
*
* Function    : fadeIn /fadeOut
*
* Description : Detects browser that can do opacity and fades the images
*		    For browsers that do not support opacity it just does an image swap.
*		    (I only know about NS4 but maybe IE on a Mac also ?)
*		    For these functions to work you need to name the image
*			e.g. for an image named "home" you need
*			<IMG .... NAME="home">
*		    and you need 2 images, the on and the off image
*****************************************************************/
JSFX.fadeIn = function(imgName, rollName)
{
	if(rollName == null)
		rollName=imgName;

	/*** Stop emails because the rollover was named incorrectly ***/
	if(!JSFX.RolloverObjects[rollName])
	{
		JSFX.Rollover.error(rollName);
		return;
	}

	var img = JSFX.findImg(imgName, document);
	if(JSFX.hasOpacity(img))
		JSFX.imgFadeIn(img, JSFX.RolloverObjects[rollName].img_src);
	else
	{
		if(img.offSrc==null)
			img.offSrc=img.src;
		img.src=JSFX.RolloverObjects[rollName].img_src;
	}
}
JSFX.fadeOut = function(imgName)
{
	var img = JSFX.findImg(imgName, document);
	if(JSFX.hasOpacity(img))
		JSFX.imgFadeOut(img);
	else
		img.src=img.offSrc;
}
/*******************************************************************
*
* Function    : imgOn /imgOff
*
* Description : Included these functions so you can mix simple and
*		    fading rollovers without having to include 2 ".js" files
*
*****************************************************************/
JSFX.imgOn = function(imgName, rollName)
{
	if(rollName == null)
		rollName=imgName;

	/*** Stop emails because the rollover was named incorrectly ***/
	if(!JSFX.RolloverObjects[rollName])
	{
		JSFX.Rollover.error(rollName);
		return;
	}
	var img = JSFX.findImg(imgName,document);
	if(img.offSrc==null)
		img.offSrc=img.src;
	img.src=JSFX.RolloverObjects[rollName].img_src;
}
JSFX.imgOff = function(imgName)
{
	var img = JSFX.findImg(imgName,document);
	img.src=img.offSrc;
}


/*************************************************************************/
/* Sort out bandwidth stealers */
/*************************************************************************/

Последний раз редактировалось Андрей Параничев, 23.10.2008 в 02:04. Причина: Пользуйтесь bb-кодами [js] и [html] для оформления листингов кода в теле сообщения
Ответить с цитированием
  #3 (permalink)  
Старый 23.10.2008, 01:28
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,246

Нет, блин, ну вы издеваетесь!
370 строк морально устаревшего кода,и это еще разбирать?!
хоть бы выложили в нормальном виде.
для кодов такого следует выкладывать архив с ХТМЛ-страницей, и набором рисунков.
а уже если выложили в виде поста, то хотя бы в бебе-кот оформили бы!
дайте мне банхаммер чтоли?
ЗЫ так как из-за растройства мне даже туполень разобратся как он подключается к своему скрипту,я решил накатать ЭТО
<img onmousemove="this.src='img_2.jpg'" onmouseout="this.src='img_1.jpg'" src="img_1.jpg"  />

никто вам такое ... старье разгребать не станет
Ответить с цитированием
  #4 (permalink)  
Старый 23.10.2008, 03:28
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Мдаа скрипт 2001 года :-) хотя даже document.write всего один раз используется
Что хоть не работает? Прозрачность наверное?
Вместо
img.style.MozOpacity

напишите
img.style.opacity

Если не поможет, лучше выкиньте этот скрипт сосем.
Пример скрипта, плавно изменяющего прозрачность, есть здесь, осталось только дописать смену изображения. Пробуйте, если не получится, задавайте вопросы…
Ответить с цитированием
  #5 (permalink)  
Старый 23.10.2008, 08:45
Интересующийся
Отправить личное сообщение для BackOrifice Посмотреть профиль Найти все сообщения от BackOrifice
 
Регистрация: 23.10.2008
Сообщений: 10

ПОЖАЛУСТО ИЗВИНИТЕ МЕНЯ ЗА ТО ЧТО Я ТАК ПОХАБНО ОФОРМИЛ ВОПРОС !!!!
ОШИБКА СКРИПТА : В ОПЕРЕ КОГДА Я НАВАЖУ КУРСОР НА ФОТКУ ОНА НЕ МЕНЯЕТСЯ. В ФАЕРФОКСЕ И В ИЕ ВСЁ НОРМ.
ЕСЛЕ ВАМ ТЯЖЕЛО КОЛУПАТЬСЯ В ЭТОМ СТАРОМСКРИПТЕ ТО МОЖЕТ ДАДИТЕ КТОТО АНАЛОГИЧНЫЙ СКРИПТ ТОЛЬКО НОВЫЙ-РАБОЧИЙ СКРИПТ.
Ответить с цитированием
  #6 (permalink)  
Старый 23.10.2008, 13:44
Кандидат Javascript-наук
Отправить личное сообщение для SunnyDay Посмотреть профиль Найти все сообщения от SunnyDay
 
Регистрация: 22.09.2008
Сообщений: 111

BackOrifice,
тебе уже дал Gvozd, рабочий скрипт)
Ответить с цитированием
  #7 (permalink)  
Старый 23.10.2008, 15:13
Интересующийся
Отправить личное сообщение для BackOrifice Посмотреть профиль Найти все сообщения от BackOrifice
 
Регистрация: 23.10.2008
Сообщений: 10

Я полный ноль ((((
Значит сверху я вылаживал код джава скрипта fading.js

А вот сам код index.php может ктото обьяснит что там нетак !!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.backorifice.skynet.kherson.ua">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Lineage Gracia Server Kill-Zone</title>
<link href="skins/index/lineagelive.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://backorifice/mw/skins/index/js/menuFX.js"></script>
<script type="text/javascript" src="http://backorifice/mw/skins/index/js/fading.js"></script>
<script type="text/javascript">
FadeInStep=20;
FadeOutStep=20;
	JSFX.Rollover("home",     "skins/index/images/menu_home_on.gif");
	JSFX.Rollover("news",     "skins/index/images/menu_news_on.gif");
	JSFX.Rollover("rules",    "skins/index/images/menu_rules_on.gif");
	JSFX.Rollover("forum",   "skins/index/images/menu_forum_on.gif");
	JSFX.Rollover("files",  "skins/index/images/menu_files_on.gif");
	JSFX.Rollover("db",  "skins/index/images/menu_db_on.gif");
	JSFX.Rollover("donate",   "skins/index/images/menu_donate_on.gif");
	JSFX.Rollover("top10",  "skins/index/images/menu_top10_on.gif");
	JSFX.Rollover("register",  "skins/index/images/menu_register_on.gif");
	JSFX.Rollover("tourn",  "skins/index/images/smenu-tourn-on.gif");
	JSFX.Rollover("event",  "skins/index/images/smenu-event-on.gif");
	JSFX.Rollover("update",  "skins/index/images/smenu-update-on.gif");
	JSFX.Rollover("articles",  "skins/index/images/smenu-articles-on.gif");
	JSFX.Rollover("media",  "skins/index/images/smenu-media-on.gif");
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" width="100%">

<!-- Header -->
<tr>
<td colspan="3" valign="top" align="center">
<div class="head-m"><div class="head-l"><div class="head-r">
</div></div></div>
</td>
</tr>
<!-- Header end -->


<!-- main table -->
<tr>
<td style="background: #152733; border-right: 1px solid #45525d; width: 194px;" align="left" valign="top">

<!-- menu -->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="background: url(skins/index/images/menu_home.gif)"><a sp_eventwasset="on" href="index.php?id=start" onmouseover="JSFX.fadeIn('home')" onmouseout="JSFX.fadeOut('home')"><img style="opacity: 0;" src="skins/index/images/menu_home_on.gif" alt="Главная" name="home" class="imgFader" border="0" height="36" width="193" /></a></td>
</tr>
<tr>
<td style="background: url(skins/index/images/menu_news.gif)"><a sp_eventwasset="on" href="index.php?id=news" onmouseover="JSFX.fadeIn('news')" onmouseout="JSFX.fadeOut('news')"><img style="opacity: 0;" src="skins/index/images/menu_news_on.gif" alt="Новости" name="news" class="imgFader" border="0" height="36" width="193" /></a></td>
</tr>
<tr>
<td style="background: url(skins/index/images/menu_rules.gif)"><a sp_eventwasset="on" href="index.php?id=prav" onmouseover="JSFX.fadeIn('rules')" onmouseout="JSFX.fadeOut('rules')"><img style="opacity: 0;" src="skins/index/images/menu_rules_on.gif" alt="Правила" name="rules" class="imgFader" border="0" height="36" width="193" /></a></td>
</tr>
<tr>
<td style="background: url(skins/index/images/menu_forum.gif)"><a sp_eventwasset="on" href="forum.Lineage ][ Server/default.htm" onmouseover="JSFX.fadeIn('forum')" onmouseout="JSFX.fadeOut('forum')"><img style="opacity: 0;" src="skins/index/images/menu_forum_on.gif" alt="Форум" name="forum" class="imgFader" border="0" height="36" width="193" /></a></td>
</tr>
<tr>
<td style="background: url(skins/index/images/menu_files.gif)"><a sp_eventwasset="on" href="index.php?id=dovnload" onmouseover="JSFX.fadeIn('files')" onmouseout="JSFX.fadeOut('files')"><img style="opacity: 0;" src="skins/index/images/menu_files_on.gif" alt="Файлы" name="files" class="imgFader" border="0" height="36" width="193" /></a></td>
</tr>
<tr>
<td style="background: url(skins/index/images/menu_top10.gif)"><a sp_eventwasset="on" href="index.php?id=stat" onmouseover="JSFX.fadeIn('top10')" onmouseout="JSFX.fadeOut('top10')"><img style="opacity: 0;" src="skins/index/images/menu_top10_on.gif" alt="Топ 10" name="top10" class="imgFader" border="0" height="36" width="193" /></a></td>
</tr>
<tr>
<td style="background: url(skins/index/images/menu_register.gif)"><a sp_eventwasset="on" href="index.php?id=register" onmouseover="JSFX.fadeIn('register')" onmouseout="JSFX.fadeOut('register')"><img style="opacity: 0;" src="skins/index/images/menu_register_on.gif" alt="Регистрация" name="register" class="imgFader" border="0" height="36" width="193" /></a></td>
</tr>
</table>
<!-- menu end -->
<br />


пожалусто сделайте так чтобы этот ужас заработал 8"(

Последний раз редактировалось BackOrifice, 23.10.2008 в 15:21.
Ответить с цитированием
  #8 (permalink)  
Старый 23.10.2008, 18:26
Интересующийся
Отправить личное сообщение для BackOrifice Посмотреть профиль Найти все сообщения от BackOrifice
 
Регистрация: 23.10.2008
Сообщений: 10

Я прописал скрипт от Gvozd !!! Он рабочий всё ок. Но мне нужно привести в порядок свой скрипт.Мой будет поприкольней.В моём скрипте при наводе курсора на картинку она меняется плавно.Есле быстро провести курсором по картинкам то получается какбы флеш.А так как я исползую этот скрипт для картинок в меню , то получается очень красиво.
Ответить с цитированием
  #9 (permalink)  
Старый 23.10.2008, 21:36
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

Попробуйте убрать строчку
if(window.opera)
        return false;


Последние версии opera поддерживают filter: opacity.
Ответить с цитированием
  #10 (permalink)  
Старый 23.10.2008, 22:32
Интересующийся
Отправить личное сообщение для BackOrifice Посмотреть профиль Найти все сообщения от BackOrifice
 
Регистрация: 23.10.2008
Сообщений: 10

(((

Убрал непомогло
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вызов скрипта для Opera Andrew_S Общие вопросы Javascript 8 25.09.2008 12:23