Меню за карти

[Lorm3x]

Използвах този урок зада си направя меню за карти.

Въпроса ми е мога ли от зад на сивo белия фон да сложа картинката на карта?И когато дам примерно както съм дал в момента Zombi Infection да не е синьо а пак да е Img на картата

Ще ви дам кода ако може да ми кажете каде да вмъкна Img-то
Благодаря предварително

 

[shterev]

предлагам ти да не е имг таг а да е бекграунд.Та тък трябва тези размери да са фиксирани, една и съща височина и ширина.Картинките ги обединяваш в една и тази едната я задаваш като бекграунд.След това правиш при посочване да се мести бекграунда

пример с а таг

a {

display:block
width:300px;
height:300px;
backgraound-image: url(all_img.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;

}

a:hover {
background-position: 0px -100px;
}

Нещо такова изглежда, вече ако трябва да се вижда ако е направил нешо дриго или да не се вижда правиш отделен клас , който ще се вижда ако е направил нешо.На този клас задаваш друга позициа на бекграиунда

 

[Lorm3x]

Нещо не успях можеш ли да сложиш поизволна картинка и да ми дадеш целия код?

 

[SuCcEsS]

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
body {padding: 0px; margin: 200px 0px 0px 0px;}

ul.main {
width: 543px; height: 150px;
border: 0px solid #C1C1C1; padding: 1px;
list-style-type: none;
}

ul.main li {float: left;}

a.btn {
display: block; width: 105px; height: 50px;
background-image: url(images/de_aztec.jpg); width:180px; padding-top: 70px;
font-size: 12px; font-family: Verdana, Arial, serif;
text-decoration: none; color: #000000;
}
a.btn2 {
display: block; width: 105px; height: 50px;
background-image: url(images/de_dust2.jpg); width:180px; padding-top: 70px;
font-size: 12px; font-family: Verdana, Arial, serif;
text-decoration: none; color: #000000;
}
a.btn3 {
display: block; width: 105px; height: 50px;
background-image: url(images/de_inferno.jpg); width:180px; padding-top: 70px;
font-size: 12px; font-family: Verdana, Arial, serif;
text-decoration: none; color: #000000;
}
a.btn4 {
display: block; width: 105px; height: 50px;
background-image: url(images/de_nuke.jpg); width:180px; padding-top: 70px;
font-size: 12px; font-family: Verdana, Arial, serif;
text-decoration: none; color: #000000;
}

a.btn:hover {background-image: url(images/cs_assault.jpg); width:180px; color: white;}
a.btn2:hover {background-image: url(images/cs_militia.jpg); width:180px; color: white;}
a.btn3:hover {background-image: url(images/cs_office.jpg); width:180px; color: white;}
a.btn4:hover {background-image: url(images/de_train.jpg); width:180px; color: white;}
</style>
<script type="text/javascript">
function changeWidth(param1, param2, param3, param4) {
document.getElementById('btn1').style.width=param1+"px";
document.getElementById('btn2').style.width=param2+"px";
document.getElementById('btn3').style.width=param3+"px";
document.getElementById('btn4').style.width=param4+"px";
}

function normalWidth() {
document.getElementById('btn1').style.width=135+"px";
document.getElementById('btn2').style.width=135+"px";
document.getElementById('btn3').style.width=135+"px";
document.getElementById('btn4').style.width=135+"px";
}
</script>

</head>

<body>
<center>
<ul class="main">
<li style="margin-right: 1px;" >
<a href="#" class="btn" id="btn1" onmouseover="changeWidth(180, 120, 120, 120);" onmouseout="normalWidth();"><b>НАЧАЛО</a>
</li>
<li style="margin-right: 1px;">

<a href="#" class="btn2" id="btn2" onmouseover="changeWidth(120, 180, 120, 120);" onmouseout="normalWidth();">ЗА МЕН</a>
</li>
<li style="margin-right: 1px;">
<a href="#" class="btn3" id="btn3" onmouseover="changeWidth(120, 120, 180, 120);" onmouseout="normalWidth();">ПОРТФОЛИО</a>
</li>
<li style="margin-right: 0px;">
<a href="#" class="btn4" id="btn4" onmouseover="changeWidth(120, 120, 120, 180);" onmouseout="normalWidth();">КОНТАКТИ</a>

</li>
</ul>
</center>
</body>

</html>

 

[Lorm3x]

Мерси +1 ако нещо има объркване ще пиша в тази тема :?:

 

[SuCcEsS]

Мисля, че няма проблеми поне при мене няма никакви проблеми!

 

[Lorm3x]

Moже ли да ми дадеш линк на сайта ти да видя как ти е на теб ?

 

[SuCcEsS]

Не съм го слагал в сайта ми понеже не ми върши работа!