Reposting this tutorial due to many requests... [url=http://profiles.friendster.com/azlov]PREVIEW1[/url] [url=http://profiles.friendster.com/renalvir]PREVIEW2[/url] ---------------------------------
You are viewing a post by ezil2007. View all 73 posts in Reposting this tutorial due to many requests... [url=http://profiles.friendster.com/azlov]PREVIEW1[/url] [url=http://profiles.friendster.com/renalvir]PREVIEW2[/url] ---------------------------------.
2007-11-09 17:11:30
- ezil2007
- » FTalkGeek
1426
0
1969-12-31
Reposting this tutorial due to many requests... [url=http://profiles.friendster.com/azlov]PREVIEW1[/url] [url=http://profiles.friendster.com/renalvir]PREVIEW2[/url] ---------------------------------
[quote=Shiseiten]
the previews is so great 
but where the trick? 
[/quote]
Note: If you are a newbie at javascript and css, i suggest you go and study the basics first
[quote]Insert this code to your main javascript file.
if (!attachOnLoadHandler(function(){loadBorders()})) window.onload = function(){loadBorders()};
function loadBorders() {
//Change those boxes please!
}
function changeBorder(targetdivid) {
var target = document.getElementById(targetdivid);
target.innerHTML = "<div class=\"roundbox-tr\">" + "<div class=\"roundbox-tl\">" + "<div class=\"roundbox-br\">" + "<div class=\"roundbox-bl\">" + "<div class=\"azlov\">" + target.innerHTML + "</div>" + "</div>" + "</div>" + "</div>" + "</div>";
}
<>
then insert these codes to your main CSS file.
/* Change Borders Start */
/* TOP RIGHT */
.roundbox-tr {
margin:0px 0px;
padding:0;
background:url("http://LINK_TO_YOUR/toprightpic") no-repeat right top;
width: 100%;
}
/* TOP LEFT */
.roundbox-tl {
margin:0;
padding:0;
background: url("http://LINK_TO_YOUR/topleftpic") no-repeat left top;
}
/* BOTTOM RIGHT */
.roundbox-br {
margin:0;
padding:0;
background: url("http://LINK_TO_YOUR/bottomrightpic") no-repeat right bottom;
}
/* BOTTOM LEFT */
.roundbox-bl {
margin:0;
padding:0;
background: url("http://LINK_TO_YOUR/bottomleftpic") no-repeat left bottom;
}
/* Change Borders End */
<>
Now we will be needing images for our borders. I have created samples, download blue theme or xp theme
upload them on your webhost.
Next step is to get the URL or links of those images. as you can see there, the files are named according to their corners, so put the links accordingly.
for example, we should put the top right image link to
/* TOP RIGHT */
.roundbox-tr {
margin:0px 0px;
padding:0;
background:url("http://LINK_TO_YOUR/tr.gif) no-repeat right top;
width: 100%;
}
<>
And everything is in place, now we will just use the function to change the boxs borders
to change the borders, just get the ID of the box you want to change, for example the friends box
the ID of the friends box is 2″, just call the function and add the ID. heres an example:
if (!attachOnLoadHandler(function(){loadBorders()})) window.onload = function(){loadBorders()};
function loadBorders() {
//Change those boxes please!
changeBorder(2″); //friends box
}
//by renalvir
function changeBorder(targetdivid) {
var target = document.getElementById(targetdivid);
target.innerHTML = "<div class=\"roundbox-tr\">" + "<div class=\"roundbox-tl\">" + "<div class=\"roundbox-br\">" + "<div class=\"roundbox-bl\">" + "<div class=\"azlov\">" + target.innerHTML + "</div>" + "</div>" + "</div>" + "</div>" + "</div>";
}
thats it! i hope you enjoyed this tutorial, and please lets share images
hehe
please register to my blog so we can share ideas
Thanks![/quote]
[color=blue] thanks for the share [/color]
the previews is so great
but where the trick? [/quote]
Note: If you are a newbie at javascript and css, i suggest you go and study the basics first
[quote]Insert this code to your main javascript file.
if (!attachOnLoadHandler(function(){loadBorders()})) window.onload = function(){loadBorders()};
function loadBorders() {
//Change those boxes please!
}
function changeBorder(targetdivid) {
var target = document.getElementById(targetdivid);
target.innerHTML = "<div class=\"roundbox-tr\">" + "<div class=\"roundbox-tl\">" + "<div class=\"roundbox-br\">" + "<div class=\"roundbox-bl\">" + "<div class=\"azlov\">" + target.innerHTML + "</div>" + "</div>" + "</div>" + "</div>" + "</div>";
}
<>
then insert these codes to your main CSS file.
/* Change Borders Start */
/* TOP RIGHT */
.roundbox-tr {
margin:0px 0px;
padding:0;
background:url("http://LINK_TO_YOUR/toprightpic") no-repeat right top;
width: 100%;
}
/* TOP LEFT */
.roundbox-tl {
margin:0;
padding:0;
background: url("http://LINK_TO_YOUR/topleftpic") no-repeat left top;
}
/* BOTTOM RIGHT */
.roundbox-br {
margin:0;
padding:0;
background: url("http://LINK_TO_YOUR/bottomrightpic") no-repeat right bottom;
}
/* BOTTOM LEFT */
.roundbox-bl {
margin:0;
padding:0;
background: url("http://LINK_TO_YOUR/bottomleftpic") no-repeat left bottom;
}
/* Change Borders End */
<>
Now we will be needing images for our borders. I have created samples, download blue theme or xp theme
upload them on your webhost.
Next step is to get the URL or links of those images. as you can see there, the files are named according to their corners, so put the links accordingly.
for example, we should put the top right image link to
/* TOP RIGHT */
.roundbox-tr {
margin:0px 0px;
padding:0;
background:url("http://LINK_TO_YOUR/tr.gif) no-repeat right top;
width: 100%;
}
<>
And everything is in place, now we will just use the function to change the boxs borders
to change the borders, just get the ID of the box you want to change, for example the friends box
the ID of the friends box is 2″, just call the function and add the ID. heres an example:
if (!attachOnLoadHandler(function(){loadBorders()})) window.onload = function(){loadBorders()};
function loadBorders() {
//Change those boxes please!
changeBorder(2″); //friends box
}
//by renalvir
function changeBorder(targetdivid) {
var target = document.getElementById(targetdivid);
target.innerHTML = "<div class=\"roundbox-tr\">" + "<div class=\"roundbox-tl\">" + "<div class=\"roundbox-br\">" + "<div class=\"roundbox-bl\">" + "<div class=\"azlov\">" + target.innerHTML + "</div>" + "</div>" + "</div>" + "</div>" + "</div>";
}
thats it! i hope you enjoyed this tutorial, and please lets share images
hehe
please register to my blog so we can share ideas
Thanks![/quote]
[color=blue] thanks for the share [/color]
Last edited by ezil2007 (2007-11-09 17:12:29)
 |