Pomoč pri izdelavi spletne strani @ Slo-Tech

Forum » Programiranje »
Pomoč pri izdelavi spletne strani

Pomoč pri izdelavi spletne strani

Štrubsi :: 4. sep 2013, 15:14

Imam eno vprašanje oz. prošnjo za pomoč. In sicer že kar nekaj časa se spravljam delat spletno stran, kot nek projekt na faksu. Ker pa sem totalen nesposobnež, kar se tiče programiranja in mi manjka osnov, oz sem jih pozabil, sem kar hitro naletel na problem.

Dizajn spletne strani bi rad imel sestavljen iz petih slik. In sicer glavnega ozadja, ki bi se spreminjal na ostale štiri glede na to, na katerem izmed štirih linkov v meniju bi imel miško. Pač za vsak link drugo ozadje. Meni imam že narejen z java scriptom. Ne vem pa, kako bi vanj vkorporiral ta mouseover in mouseout effect z enakim časovnim zamikom kot je sam meni. Verjamem da je rešitev preprosta, ampak si z njo že dva dni razbijam glavo in sem se odločil, da raje vprašam še tukaj. Koda je lahko css, java script ali jquerry. Če pa je še kaka druga rešitev, pa jo lahko tudi omenite.

Imena slik so:
Osnova.png
Prvi_predal.png
Drugi_predal.png
Tretji_predal.png
Cetrti_predal.png

CSS:

body
{
background-image:url('Osnova.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-size: cover;
background-size:contain;}

#ddm
{ margin: 0;
padding: 0;
z-index: 30}
#ddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 14px arial}
#ddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 120px;
background: green;
color: #FFF;
text-align: center;
text-decoration: none;}
#ddm li a:hover
{ background: transparent;
color: #392865}
#ddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 30px;
background: transparent}
#ddm div a
{ position: static;
  display: block;
  margin: 0;
  padding: 5px 10px;
  width: auto;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  background: yellow;
  color: #000;
  font: 12px arial}
#ddm div a:hover
{ background: transparent;
  color: #392865}

HTML:

<html>
<head>
<title>Drop-Down Menu</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-16">
<link rel="stylesheet" type="text/css" href="css/default.css">
<!-- dd menu -->
<script type="text/javascript">
<!--
var timeout              = 500;
var closetimer  = 0;
var ddmenuitem    = 0;
// odpre se skrita površina
function mopen(id)
{
// časovnik zaprtja menuja
mcancelclosetime();
// zaprtje prejšnje površine
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// prikaz naslednje površine
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// zapri prikazano površino
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// začetek zapiralnega časovnika
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// ustavitev zapiralnega časovnika
function mcancelclosetime()
{
if(closetimer)
{
  window.clearTimeout(closetimer);
  closetimer = null;
}
}
// zapri površino s klikom
document.onclick = mclose;
// -->
</script>
</head>
<body>
<ul id="ddm">
<li><a class="prvi" href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Obdelava lesa</a>
  <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
  <a href="#">Izdelki iz iverala</a>
  <a href="#">Izdelki iz masivnega lesa</a>
  <a href="#">Obnova pohištva</a>
  </div>
</li>
<li><a class="drugi" href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Talne obloge</a>
  <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
  <a href="#">Laminat</a>
  <a href="#">Parket</a>
  </div>
</li>
<li><a class="tretji" href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Ostale storitve</a>
  <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
  <a href="#">Uporaba mavčnih plošč</a>
  <a href="#">Lažja zidarska dela</a>
  <a href="#">Fotografiranje dogodkov</a>
  <a href="#">Video zajem dogodkov</a>
  </div>
</li>
<li><a class="cetrti" href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Informacije</a>
  <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
  <a href="#">O podjetju</a>
  <a href="#">Kontakt</a>
  <a href="#">Kje se nahajamo</a>
  <a href="#">Galerija</a>
  </div>
</li>

</ul>
<div style="clear:both"></div>
<div style="clear:both"></div>

</body>
</html>

Se vam pa že v naprej zahvaljujem in lp,
Žiga

nuclear :: 5. sep 2013, 23:23

http://jsfiddle.net/Nyek6/4/

Če je mišljeno drugače, povej pa popraviva.

Asus G14 2023 - Ryzen 7940HS - 32GB DDR5 - GeForce RTX 4080 - 990 PRO 4TB

Zgodovina sprememb…

spremenil: nuclear (5. sep 2013 ob 23:29)

Vredno ogleda ...

	Tema	Sporočila	Ogledi	Zadnje sporočilo
	Tema	Sporočila	Ogledi	Zadnje sporočilo
!	Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 4 … 23 24 25 26 ) Tody Oddelek: Izdelava spletišč	1298	347986 (7123)	sunniegoldie 11. sep 2024 05:12:48
»	Prikaz strani na različni resoluciji-Joomla jugostyle Oddelek: Izdelava spletišč	15	1954 (1682)	kr?en 26. jun 2014 18:57:18
»	meni razporejen po celotni dolžini XzupanX Oddelek: Izdelava spletišč	7	2261 (2129)	XzupanX 5. nov 2013 18:04:06
»	poravnava li elementov boss-tech Oddelek: Izdelava spletišč	8	2167 (2032)	boss-tech 1. okt 2012 08:19:03
»	CSS problemi (strani: 1 2 ) Tody Oddelek: Izdelava spletišč	51	9906 (7705)	nuuush 20. mar 2010 18:15:37

Več podobnih tem

Zadnje novice

Zadnji članki

Išči:

Forum » Programiranje »
Pomoč pri izdelavi spletne strani

Pomoč pri izdelavi spletne strani