Привязка объекта

Kadaje · December 12, 2007

Здравствуйте

У меня несколько вопросов для более сведущих людей чем я...

1. (наверное слишком глупый... но все же): в опера с альфа слоями работает... а в IE нет... что можно сделать чтобы это дело заработало?

2. Я хочу сделать чтобы при наведении на картинку происходило движение до нужного мне момента, после того как она доезжает должна происходить другая анимация кнопок на этой картинке... но я не знаю как мне их связать чтобы они вместе двигались, но при этом чтобы к кнопкам не привязывался скрипт первого движения... очень надеюсь на вашу помощь!

(очень надеюсь на то, что вы поймете что я имел ввиду.. т.к. сам с трудом понимаю что написал.. )

для наглядности ссылка и код:

http://aionfantasy.com/

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TesseracT TEAM</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<script type="text/javascript" src="js/interfac.js"></script>
<script type="text/javascript" src="js/jquery00.js"></script>
<style type="text/css" media="all">
<!--
body {
	background-color: #FFFFFF;
	background-image: url(img/bg.jpg);
	background-repeat: no-repeat;
	background-position: top;
	margin: 0;
	padding: 0;
}
.ifxElement1
{
}
.tabContent
{
}
.test
{	
}

-->
</style>

</head>
<body>

<div align="center">
	<img src="img/btn_top.png" />
</div>

<div align="center">
		<span style='position:relative;z-index:5;right:0px;top:80px;'>
			<img src="img/C_I_form.png" />
		</span>
</div>

<div align="center">
	<div id="easing" class="tabContent">
		<a href="#" onmouseover="animateEl4(); return false;">
			<div id="ifxElement4" class="ifxElement" style='position:absolute;z-index:2;right:540px;top:360px;'> 
				<img src="img/smal_C_form.png"/>
			</div> 
		</a>
	</div> 

	<div  id="easing" class="tabContent">
		<a href="#"  onmouseover="animateEl2(); return false;">
			<div id="ifxElement2" class="ifxElement" style='position:absolute;z-index:1;right:540px;top:120px;'>
				<img src="img/smal_C_form.png" />
			</div> 
		</a>
	</div> 

	<div  id="easing" class="tabContent">
		<a href="#"  onmouseover="animateEl(); return false;">
			<div id="ifxElement" class="ifxElement" style='position:absolute;z-index:4;left:540px;top:120px;'>
				<img src="img/smal_C_form.png" />
			</div> 
		</a>
	</div> 

	<div  id="easing" class="tabContent">
		<a href="#"  onmouseover="animateEl3(); return false;">
			<div id="ifxElement3" class="ifxElement" style='position:absolute;z-index:3;left:540px;top:360px;'>
				<img src="img/smal_C_form.png" />
			</div> 
		</a>
	</div> 
</div>

<script type="text/javascript">
var currentTab = null;
var inSlide = false;
$(document).ready(
	function()
	{
		var url, tab = 0, tabIteration = 0;
		$('#scroll').ScrollToAnchors(500);

		url = window.location.href.split("#");
		if (url.length == 2 && url[1].indexOf('-fx') > 0) {
			currentTab = $('#' + url[1].substr(0, url[1].length-3));
			if (currentTab.size() == 1) {
				$('#fx div').each(
					function(iteration)
					{
						if(this === currentTab.get(0)) {
							tabIteration = iteration;
						}	
					}
				);
			}
		}

		if(!currentTab) {
			currentTab = $('#fx div:first');
		}
		currentTab.SlideToggleUp(4000);
		$('#tabs a')
			.eq(tabIteration).addClass('active')
			.end()
			.bind('click', switchTab);

	}
);
var switchTab = function()
{
	var tabName = this.href.split('#')[1];
	this.blur();
	if (inSlide == false && currentTab.get(0) != $('#' + tabName.substr(0, tabName.length-3)).get(0)) {
		$('#tabs a').removeClass('active');
		$(this).addClass('active');
		inSlide = true;
		currentTab.SlideToggleUp(
			400,
			function()
			{
				currentTab = $('#' + tabName.substr(0, tabName.length-3)).SlideToggleUp(400, function(){inSlide=false;});
			}
		);
	} else {
		return false;
	}
};
var animateEl = function()
{
	var el = $('#ifxElement');
	if(parseInt(el.css('left')) > 350) {
		el.animate({left: 350}, 2000, $('input[@checked]').val());
	} else {
		el.animate({left: 540}, 2000, $('input[@checked]').val());
	}
	return false;
};
var animateEl2 = function()
{
	var el = $('#ifxElement2');
	if(parseInt(el.css('right')) > 350) {
		el.animate({right: 350}, 2000, $('input[@checked]').val());
	} else {
		el.animate({right: 540}, 2000, $('input[@checked]').val());
	}
	return false;
};
var animateEl3 = function()
{
	var el = $('#ifxElement3');
	if(parseInt(el.css('left')) > 350) 
	{
		el.animate({left: 350}, 2000, $('input[@checked]').val());
	} 
	else 
	{
		el.animate({left: 540}, 2000, $('input[@checked]').val());
	}
	return false;
};
var animateEl4 = function()
{
	var el = $('#ifxElement4');
	if(parseInt(el.css('right')) > 350) {
		el.animate({right: 350}, 2000, $('input[@checked]').val());
	} 
	else 
	{
		el.animate({right: 540}, 2000, $('input[@checked]').val());
	}
	return false;
}


</script>



</body>
</html>

Также хотел бы услышать где и что я сделал не так или можно сделать по другому и лучше...

klierik · December 12, 2007

1. по поводу прозрачности - http://www.tigir.com/opacity.htm

2. не проще ли это реализовать на flash

Kadaje · December 12, 2007

1. проблема в том что там описанно как сделать весь объект прозрачным... это я знаю.. но мне надо чтобы только границы картинки были прозрачными... (если Вы зайдете на aionfantasy.com) в опере и в IE то увидите что я имею ввиду...

2. если бы хотел сделать во флеше то так бы и сделал... но я хочу сделать все без флеша... и очень надеюсь на вашу помощь!

Неужели вопросы настолько глупые, что на них не хотят ответить и помочь? вроде и тему создал в соответствующем разделе... Вы скажите что не так.. может как то вопрос задал неправильно...

Sign In

Привязка объекта

Question

Kadaje

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

Kadaje

Link to comment

Share on other sites

Обсуждения

Forums

Important Information