Novruz bir İndex yapıyım dedim ve hover filan iyi oldu bence tamamen elle kodladım kendim..
Denemek için tıkla:
Normal Hali:

Üzerine Gelince:

Kod:
Denemek için tıkla:
Normal Hali:

Üzerine Gelince:

Kod:
Kod:
<html>
<head>
<style type="text/css">
div#container
{
width: 500px;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
body
{
text-align: center;
margin: 0;
background-color: #FFFFFF;
background-image: url(http://i.hizliresim.com/x0qE0W.png);
color: #000000;
}
</style>
<style type="text/css">
a
{
color: #C8D7EB;
text-decoration: underline;
}
a:visited
{
color: #C8D7EB;
}
a:active
{
color: #C8D7EB;
}
a:hover
{
color: #376BAD;
text-decoration: underline;
}
</style>
<style type="text/css">
#RollOver1 a
{
display: block;
position: relative;
}
#Hover1 a img
{
position: absolute;
z-index: 1;
border-width: 0px;
}
#Hover1 span
{
display: block;
height: 30px;
width: 100px;
position: absolute;
z-index: 2;
}
#Hover1 a .hover
{
visibility: hidden;
}
#Hover1 a:hover .hover
{
visibility: visible;
}
#Hover1 a:hover span
{
visibility: hidden;
}
#Hover2 a
{
display: block;
position: relative;
}
#Hover2 a img
{
position: absolute;
z-index: 1;
border-width: 0px;
}
#Hover2 span
{
display: block;
height: 30px;
width: 100px;
position: absolute;
z-index: 2;
}
#Hover2 a .hover
{
visibility: hidden;
}
#Hover2 a:hover .hover
{
visibility: visible;
}
#Hover2 a:hover span
{
visibility: hidden;
}
#Hover3 a
{
display: block;
position: relative;
}
#Hover3 a img
{
position: absolute;
z-index: 1;
border-width: 0px;
}
#Hover3 span
{
display: block;
height: 30px;
width: 100px;
position: absolute;
z-index: 2;
}
#Hover3 a .hover
{
visibility: hidden;
}
#Hover3 a:hover .hover
{
visibility: visible;
}
#Hover3 a:hover span
{
visibility: hidden;
}
#Hover4 a
{
display: block;
position: relative;
}
#Hover4 a img
{
position: absolute;
z-index: 1;
border-width: 0px;
}
#Hover4 span
{
display: block;
height: 30px;
width: 100px;
position: absolute;
z-index: 2;
}
#Hover4 a .hover
{
visibility: hidden;
}
#Hover4 a:hover .hover
{
visibility: visible;
}
#Hover4 a:hover span
{
visibility: hidden;
}
#Yazı
{
background-color: transparent;
border: 0px #000000 solid;
padding: 0;
}
#Yazı div
{
text-align: left;
}
</style>
</head>
<body>
<div id="container">
<div id="Hover1" style="position:absolute;overflow:hidden;left:257px;top:52px;width:100px;height:30px;z-index:0">
<a href="http://facebook.com">
<img class="hover" alt="" src="http://i.hizliresim.com/xEYPW8.png" style="left:0px;top:0px;width:100px;height:30px;">
<span><img alt="" src="http://i.hizliresim.com/xVVr8n.png" style="left:0px;top:0px;width:100px;height:30px"></span>
</a>
</div>
<div id="Hover2" style="position:absolute;overflow:hidden;left:257px;top:121px;width:100px;height:30px;z-index:1">
<a href="http://twitter.com">
<img class="hover" alt="" src="http://i.hizliresim.com/e5dDXR.png" style="left:0px;top:0px;width:100px;height:30px;">
<span><img alt="" src="http://i.hizliresim.com/xEYPNA.png" style="left:0px;top:0px;width:100px;height:30px"></span>
</a>
</div>
<div id="Hover3" style="position:absolute;overflow:hidden;left:257px;top:190px;width:100px;height:30px;z-index:2">
<a href="http://youtube.com">
<img class="hover" alt="" src="http://i.hizliresim.com/x94mAk.png" style="left:0px;top:0px;width:100px;height:30px;">
<span><img alt="" src="http://i.hizliresim.com/xYBgR6.png" style="left:0px;top:0px;width:100px;height:30px"></span>
</a>
</div>
<div id="Hover4" style="position:absolute;overflow:hidden;left:257px;top:257px;width:100px;height:30px;z-index:3">
<a href="http://forumblazer.10tl.net">
<img class="hover" alt="" src="http://i.hizliresim.com/KrQOv7.png" style="left:0px;top:0px;width:100px;height:30px;">
<span><img alt="" src="http://i.hizliresim.com/KqYGaR.png" style="left:0px;top:0px;width:100px;height:30px"></span>
</a>
</div>
<div id="Yazı" style="position:absolute;left:204px;top:13px;width:259px;height:16px;z-index:4;">
<span style="color:#000000;font-family:Arial;font-size:13px;"><strong>Batuhann Tarafindan Kodlanmistir....</strong></span></div>
</div>
</body>
</html>