Oficjalne forum pomocy serwisu PUN.pl

Niestety, nikt nie powie Ci czym jest FluxBB - musisz go poznać sam!

Nie jesteś zalogowany na forum.

#1 2013-03-29 16:21:55

Bartekst222
Użytkownik
Dołączył: 2013-03-29
Liczba postów: 2

Bardzo ważna informacja w prawym dolnym rogu:)

Efekt mojej pracy można podziwiać na forum:
http://www.czep.pun.pl/index.php

Jak takie coś zrobić?To bardzo proste:

Dodatkowy kod CSS:

.tutorial {
	position:absolute;
	z-index:100;
}

#tutorial_tooltip {
	position:fixed;
	z-index:800;
	width:306px;
}

#tutorial_tooltip_village_text {
	background:url('http://cdn2.tribalwars.net/graphic/tutorial_65/village_goal.png') no-repeat;
	height:114px;
	padding:12px 105px 10px 14px;
	text-align:justify;
}

#tutorial_tooltip_top {
	background:url('http://cdn2.tribalwars.net/graphic/tutorial_65/proceed_window_01.png?53528') no-repeat;
	height:60px;
	min-height:60px;
}

#tutorial_tooltip_body {
	margin:0;
	min-height: 40px;
	background-position: 0px 42px;
	background-repeat: no-repeat;
	background-image:url('http://cdn2.tribalwars.net/graphic/tutorial_65/proceed_window_04.png?97b02');
}

#tutorial_tooltip_bottom {
	background:url('http://cdn2.tribalwars.net/graphic/tutorial_65/proceed_window_03.png?4b151') no-repeat;
	height:21px;
}

#tutorial_tooltip_text {
	margin: -42px 35px 0px 12px;
	text-align:justify;
}

#tutorial_box {
	z-index:101;
}

#tut_box_title {
	font-weight: bold;
	position: absolute;
}

#tut_box_text {
	position: absolute;
	text-align:justify;
}

#tut_box_button {
	position:absolute;
	font-size:18px;
	text-align:center;
	vertical-align:middle;
}

#tutorial_head {
	position:fixed;
	width:160px;
}

.tutorial_arrow {
	display:none;
}

.server_info {
	display:block;
	float:right;
	width:100%;
}





#tutorial_box {

	width:461px;
	height:212px;
	background:url(http://cdn2.tribalwars.net/graphic/tutorial_65/reward.png?46fc9) no-repeat;

}

#tut_box_title {

	left: 169px;
	top: 24px;

}

#tut_box_text {

	left: 162px;
	top: 47px;
	width: 280px;

}

#tut_box_button {

	left: 182px;
	top: 165px;
	width: 239px;
	height: 28px;
	line-height: 28px;

}




.tutorial {
	position:absolute;
	z-index:100;
}

#tutorial_tooltip {
	position:fixed;
	z-index:101;
	width:306px;
}

#tutorial_tooltip_village_text {
	background:url('http://cdn2.tribalwars.net/graphic/tutorial_65/village_goal.png?7c421') no-repeat;
	height:500px;
	padding:12px 105px 10px 14px;
	text-align:justify;
}

#tutorial_tooltip_top {
	background:url('http://cdn2.tribalwars.net/graphic/tutorial_65/proceed_window_01.png?53528') no-repeat;
	height:60px;
	min-height:60px;
}

#tutorial_tooltip_body {
	margin:0;
	min-height: 40px;
	background-position: 0px 42px;
	background-repeat: no-repeat;
	background-image:url('http://cdn2.tribalwars.net/graphic/tutorial_65/proceed_window_04.png?97b02');
}

#tutorial_tooltip_bottom {
	background:url('http://cdn2.tribalwars.net/graphic/tutorial_65/proceed_window_03.png?4b151') no-repeat;
	height:21px;
}

#tutorial_tooltip_text {
	margin: -42px 35px 0px 12px;
	text-align:justify;
}

#tutorial_box {
	z-index:5;
}

#tut_box_title {
	font-weight: bold;
	position: absolute;
}

#tut_box_text {
	position: absolute;
	text-align:justify;
}

#tut_box_button {
	position:absolute;
	font-size:18px;
	text-align:center;
	vertical-align:middle;
}

#tutorial_head {
	position:fixed;
	width:160px;
}

.tutorial_arrow {
	display:none;
}

.server_info {
	display:block;
	float:right;
	width:100%;
}





#tutorial_box {

	width:468px;
	height:250px;
        background:url(/ds_graphic/tutorial_65/start.png) no-repeat;	

}

#tut_box_title {

	left: 175px;
	top: 22px;

}

#tut_box_text {

	left: 170px;
	top: 42px;
	width: 280px;

}

#tut_box_button {

	left: 187px;
	top: 175px;
	width: 239px;
	height: 28px;
	line-height: 28px;

}

Następnie wklejamy ten kod do stopki,:


<div style="left: 902px; top: 800px;" id="tutorial_tooltip" class="tutorial">



<div id="tutorial_tooltip_top"></div>
<div id="tutorial_tooltip_body">
TREŚĆ OKIENKA!

<br>
</div>

<div id="tutorial_tooltip_bottom"></div>
</div>

</div>

<div style="left: 1120px; top: 800px;" id="tutorial_head" class="tutorial">
	<a href="#" onclick="return tutorial.head_clicked()"><img style="float: right;" src="[b]http://cdn2.tribalwars.net/graphic/tutorial_65/head.png[/b]" alt=""></a><br>
	
</div>

<script type="text/javascript">
//<![CDATA[

var rtl = false;

var tutorial = {
	place: function() {
				var top = $('#content_value').position().top + $('#content_value').height() / 2;
		var left = $('#content_value').position().left + $('#content_value').width() / 2;

		$('#tutorial_box')[0].style.top = (top - $('#tutorial_box').height() / 2) + 'px';
		$('#tutorial_box')[0].style.left = (left - $('#tutorial_box').width() / 2) + 'px';

		
		
		
		

		setTimeout('tutorial.place()', 500);
	},


	init: function() {
		this.place();
	},

	head_clicked: function() {
		if( $('#tutorial_head')[0].has_clicked == 1 ) {
			$('#tutorial_tooltip').fadeIn(200);
			$('#tutorial_head')[0].has_clicked = 0;
			$('#tutorial_head').unbind('mouseenter mouseleave');
			return false;
		}
		$('#tutorial_tooltip').fadeOut(200);
		$('#tutorial_head').hover(function(){$('#tutorial_tooltip').fadeIn(200);}, function(){$('#tutorial_tooltip').fadeOut(200);});
		$('#tutorial_head')[0].has_clicked = 1;
		return false;
	},

	arrow: {
		type: '',
		cur: null,

		focus: function(x, y, type) {
			if( this.cur != null ) {
				if( type == this.type && x == parseInt(this.cur[0].style.left) && y == parseInt(this.cur[0].style.top) && this._ie_sucks == 1)
					return; // no change
				this._ie_sucks = 1;

				this.cur.hide();
				this.cur = null;
			}
			var el = $('#tutorial_arrow_'+type);
			if( !el.length )
				return;

			if( type == 'down' ) {
				x -= el.outerWidth() / 2;
				y -= el.outerHeight();
			} else if( type == 'down_small' ) {
				x -= el.outerWidth() / 2;
				y -= el.outerHeight() - 8;
			} else if( type == 'left' ) {
				y -= el.outerHeight() / 2;
				if (jQuery.browser.mozilla)
					x -= 15;
			}


			el[0].style.top = y + 'px';
			el[0].style.left = x + 'px';
			el.show();
			this.cur = el;
			this.type = type;
			this._grab_attention(2);
		},

		focus_el: function(el, type) {
			el = $(el);
			if( !el || !el.length )
				return;

			var x = el.offset().left;
			var y = el.offset().top;

			if( type == 'down' ) {
				x += el.outerWidth() / 2;
				y -= 2;
			} else if( type == 'left' ) {
				x += el.outerWidth() + 10;
				y += el.outerHeight() / 2;
			}

			return this.focus(x, y, type);
		},

		focus_building: function(building, type) {
			var el = $('#map_'+building);
			if( !el.length )
				return;
			var coords = el[0].coords.split(',');
			var min_x = 1000, max_x = 0, min_y = 1000, max_y = 0;
			for( var i = 0; i < coords.length; i += 2) {
				var x = parseInt(coords[i]), y = parseInt(coords[i+1]);
				if( x < min_x ) min_x = x;
				if( x > max_x ) max_x = x;
				if( y < min_y ) min_y = y;
				if( y > max_y ) max_y = y;
			}
			var use_x = (min_x + max_x) / 2, use_y = (min_y + max_y) / 2;

			if( type == 'down' ) {
				use_y -= 20;
			} else if( type == 'left' ) {
				use_x += 15;
			}
			use_x += $('#buildings_visual').position().left;
			use_y += $('#buildings_visual').position().top;

			return this.focus(use_x,use_y, type);
		},

		focus_village: function(village_id, type) {
			var el = $('#map_village_'+village_id).parent().find('img:last');
			if( !el || !el.length )
				return;

			var arrow_el = $('#tutorial_arrow_'+type);
			if( !arrow_el.length )
				return;

			arrow_el.show();
			arrow_el = arrow_el[0];

			if( arrow_el.parentNode.id != 'map_container' ) {
				arrow_el.parentNode.removeChild(arrow_el);
				document.getElementById('map_container').appendChild(arrow_el);
			}

			var village_el = document.getElementById('map_village_'+village_id);
			if( !village_el )
				return;
			arrow_el.style.left = (parseInt(village_el.style.left)+$(village_el).width()/2-$(arrow_el).width()/2-5) + 'px';
			arrow_el.style.top = (parseInt(village_el.style.top)-$(arrow_el).height()) + 'px';
		},

		_grab_attention: function(flag) {
			if( !jQuery.browser.mozilla )
				return; // STFU

			if( this._last_attention_object && flag == 2 ) {
				this._last_attention_object.stop(true, true);
			}
			this._last_attention_object = this.cur;

			var v;
			var el = this.cur;
			if( el[0].id == 'tutorial_arrow_down' || el[0].id == 'tutorial_arrow_down_small' )
				v = flag ? {top:'-=5'} : {top:'+=5'};
			else if( el[0].id == 'tutorial_arrow_left' )
				v = flag ? {left:'-=5'} : {left:'+=5'};
			el.animate(v, 1000, function(){tutorial.arrow._grab_attention(!flag)});
		}
	}
};

tutorial.init();




//]]>
</script>

Po kliknięciu w rycerza okienko znika/pojawia się.


Uwaga!http://cdn2.tribalwars.net/graphic/tutorial_65/head.png - to jest link do grafiki rycerza, po jego zmianie zmienicie teksturę rycerza!

Ostatnio edytowany przez Bartekst222 (2013-03-29 16:25:56)

Offline

Użytkowników czytających ten temat: 0, gości: 1
[Bot] claudebot

Stopka

Forum oparte na FluxBB

Darmowe Forum
neverbackdown - forum-xytheria2 - nowydom - forumdream - roleplayz