Nie jesteś zalogowany na forum.
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