IT Support, IT Maintenance, CCTV, Web Design, Intallasi Jaringan LAN / FO / Wireless, PTP, Networking, Wifi, Router Mikrotik.

Sirami

Kembali lagi, Tunick Service mengerjakan project web perushaan Sirami Group, sejauh ini project berjalan dengan lancar.

berikut adalah rancangan dari web sirami source code yang di pergunakan dalam membuat web sirami group ini,

http://demo.putunik.com/sirami/

Berikut JS yang di Gunakan

<script type=’text/javascript’>
//<![CDATA[
if (!document.myGetElementsByClassName) {
document.myGetElementsByClassName = function(className) {
var children = document.getElementsByTagName(‘*’) || document.all;
var elements = new Array();

for (var i = 0; i < children.length; i++) {
var child = children[i];
var classNames = child.className.split(‘ ‘);
for (var j = 0; j < classNames.length; j++) {
if (classNames[j] == className) {
elements.push(child);
break;
}
}
}
return elements;
}
}
var Reflection = {
defaultHeight : 0.5,
defaultOpacity: 0.5,

add: function(image, options) {
Reflection.remove(image);

doptions = { “height” : Reflection.defaultHeight, “opacity” : Reflection.defaultOpacity }
if (options) {
for (var i in doptions) {
if (!options[i]) {
options[i] = doptions[i];
}
}
} else {
options = doptions;
}

try {
var d = document.createElement(‘div’);
var p = image;

var classes = p.className.split(‘ ‘);
var newClasses = ”;
for (j=0;j<classes.length;j++) {
if (classes[j] != “reflect”) {
if (newClasses) {
newClasses += ‘ ‘
}

newClasses += classes[j];
}
}

var reflectionHeight = Math.floor(p.height*options[‘height’]);
var divHeight = Math.floor(p.height*(1+options[‘height’]));

var reflectionWidth = p.width;

if (document.all && !window.opera) {
/* Fix hyperlinks */
if(p.parentElement.tagName == ‘A’) {
var d = document.createElement(‘a’);
d.href = p.parentElement.href;
}

/* Copy original image’s classes & styles to div */
d.className = newClasses;
p.className = ‘reflected’;

d.style.cssText = p.style.cssText;
p.style.cssText = ‘vertical-align: bottom’;

var reflection = document.createElement(‘img’);
reflection.src = p.src;
reflection.style.width = reflectionWidth+’px’;
reflection.style.display = ‘block’;
reflection.style.height = p.height+”px”;

reflection.style.marginBottom = “-“+(p.height-reflectionHeight)+’px’;
reflection.style.filter = ‘flipv progid:DXImageTransform.Microsoft.Alpha(opacity=’+(options[‘opacity’]*100)+’, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=’+(options[‘height’]*100)+’)’;

d.style.width = reflectionWidth+’px’;
d.style.height = divHeight+’px’;
p.parentNode.replaceChild(d, p);

d.appendChild(p);
d.appendChild(reflection);
} else {
var canvas = document.createElement(‘canvas’);
if (canvas.getContext) {
/* Copy original image’s classes & styles to div */
d.className = newClasses;
p.className = ‘reflected’;

d.style.cssText = p.style.cssText;
p.style.cssText = ‘vertical-align: bottom’;

var context = canvas.getContext(“2d”);

canvas.style.height = reflectionHeight+’px’;
canvas.style.width = reflectionWidth+’px’;
canvas.height = reflectionHeight;
canvas.width = reflectionWidth;

d.style.width = reflectionWidth+’px’;
d.style.height = divHeight+’px’;
p.parentNode.replaceChild(d, p);

d.appendChild(p);
d.appendChild(canvas);

context.save();

context.translate(0,image.height-1);
context.scale(1,-1);

context.drawImage(image, 0, 0, reflectionWidth, image.height);

context.restore();

context.globalCompositeOperation = “destination-out”;
var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);

gradient.addColorStop(1, “rgba(255, 255, 255, 1.0)”);
gradient.addColorStop(0, “rgba(255, 255, 255, “+(1-options[‘opacity’])+”)”);

context.fillStyle = gradient;
context.rect(0, 0, reflectionWidth, reflectionHeight*2);
context.fill();
}
}
} catch (e) {
}
},

remove : function(image) {
if (image.className == “reflected”) {
image.className = image.parentNode.className;
image.parentNode.parentNode.replaceChild(image, image.parentNode);
}
}
}

function addReflections() {
var rimages = document.myGetElementsByClassName(‘reflect’);
for (i=0;i<rimages.length;i++) {
var rheight = null;
var ropacity = null;

var classes = rimages[i].className.split(‘ ‘);
for (j=0;j<classes.length;j++) {
if (classes[j].indexOf(“rheight”) == 0) {
var rheight = classes[j].substring(7)/100;
} else if (classes[j].indexOf(“ropacity”) == 0) {
var ropacity = classes[j].substring(8)/100;
}
}

Reflection.add(rimages[i], { height: rheight, opacity : ropacity});
}
}

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != ‘function’) {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
addReflections();
});
//]]>
</script>

 

 

Pada bagian Body

 

<!– bagian fungsi Pop Up –>
<div id=”modalalertdiv” style=”display:none;”>
<div style=”background: #F3F3F3; height: 100%; padding: 5px”>
<b>Diskripsi Company</b><br />
More diskripsi (Isi disini diskripi yang panjang sesuai keperlua)<br /><br />
<div align=”right”>Product Demo By Tunick Service | <a href=”http://www.putunik.com”>www.putunik.com</a></div>
<div style=”vertical-align:bottom” align=”right” >
<form id=”agecheck”>
<input type=”button” value=”Go To Site” style=”margin-right: 20px” onClick=”process_age(‘yes’)” />
</form>
</div>
</div>
</div>

<script type=”text/javascript”>
function ageprompt(){
agewindow=dhtmlmodal.open(‘agebox’, ‘div’, ‘modalalertdiv’, ‘Event Pop UP’, ‘width=900px,height=250px,left=150px,top=100px,resize=0,scrolling=0’)}
function process_age(whichbutton){
agewindow.hide()}
</script>
<!– End bagian fungsi Pop Up –>
<div align=”center” >
<img src=”img/sirami-logo.png” alt=”” width=”400px” />
</div>
<div id=”countent”>
<?php
require_once(‘function.php’);
//GetHeader();
for($i = 1; $i<=4; $i++)
{
isian();
}
footer() ?>

 

Bagian Function

<?php function isian(){
global $i;
echo “<div class=\”dalam\”>
<div id=\”image-hover\”>
<div id=’figure’>
<img src=\”img/gambar-$i.jpg\” alt=\”\” width=\”210px\” class=\”reflect\” />
<span class=’caption’>
<a onClick=\”ageprompt(); return false\” href=\”#\”/><center><img src=\”img/sirami-$i.png\” alt=\”\” height=\”45px\” /></center></a>
</span>
</div></div></div>”;
}
function footer(){
echo “<div id=\”footer\”>
&copy; Design By <a href=\”http://www.putunik.com\”>Tunick Service</a>
</div></body></html>”;}
function GetHeader(){
echo”<html>
<head>
<title>Home</title>
<link rel=\”stylesheet\” type=\”text/css\” href=\”style.css\”/>
<script type=\”text/javascript\” src=\”js.js\”></script>
</head>
<body>
<div align=\”center\”>
<img src=\”img/sirami-logo.png\” alt=\”\” width=\”300px\” />
</div>
<div id=\”countent\”>
“;} ?>

 

Style CSS

body{
background:#000000;
}
#countent {
width:900px;
height:300px;
margin: 40 auto;
vertical-align:middle;
}
#countent .dalam {
color:#ffffff;
width:210px;
float:left;
margin:5px;
}
#countent .dalam img {
/*border:1px solid #c0dcc0;*/
}

#image-hover {
}
#image-hover img{width:200px;height:200px}
#figure {
position:relative;
float:left;
margin:10px;
overflow:hidden;
padding: 0;
}
#figure:hover {
-moz-box-shadow:0 0 20px rgba(0,0,0,0.75);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.75);
box-shadow:0 0 20px rgba(0,0,0,0.75);
}
#figure .caption {
position:absolute;
bottom:99;
left:0;
opacity: 0;
margin-bottom:-65px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
transition: margin-bottom;
transition-duration: 400ms;
transition-timing-function: ease-out;
}
#figure:hover .caption {
margin-bottom:0px;
opacity: 0.75;
}
#image-hover .caption {
height:50px;
padding-top:10;
background:#c0c0c0;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
width:200px;
}
#image-hover .caption img {
height:40px;
width:auto;
text-align:center;
}
#image-hover .caption b {
text-shadow: 0px 2px 0px #000;
}
#image-hover .caption {
color: #ddd;
line-height: 20px;
font-size: 11px;
text-shadow: 0px 2px 0px #000;
}
#image-hover a:link,#image-hover a:visited{font-size:11px;font-weight:bold;color:#fff;text-decoration:none}
#image-hover a:hover{color:#ff9900;}

#footer {
color:#c0c0c0;
font-size:11px;
position:fixed;
bottom:0;
width: 900px;
text-align:center;
margin:auto;

}

 

Kurang lebih seperti itu script sementara dari web sirami group, yang hasil sementaranya bisa di liat di » http://demo.putunik.com/sirami/

pada dasarnya web ini belum jadi, karena data yang di berikan oleh pihak sirami belumlah lengkap.

 

By Tunick Service

366 views

Related Post :


Follow at Facebook

Contact Us »

Email.
  info@putunik.com
  info@tunickservice.com
Hp.
  0819 1616 2221 /
  085 333 767671 /
  0815 1415 6669
Adddress.
  Jl. Batu Intan III no 108, BatuBulan

Our Services »

IT Maintenance
IT Konsultan
Service Computer/Laptop
Hardware/Software
Virus/Error/Blank dll
Data Recovery
Networking
Server Internet
Mikrotik
Access Point | PTP
Web Design
Web Development

ADS