Foorumi logo

Rollover
jyri1234 - 19.6.2009 14:32

Nii... Ma olen vaadanud lehtede source koode, aga ikkagi ei ole päris täpselt aru saanud, kuidas teha piltidega rolloverit.
Kui keegi oskab (niikuinii oskab), palun aidake!


simmo - 19.6.2009 15:00

http://w3schools.com/js/tryit.asp?filename=tryjs_animation


jyri1234 - 19.6.2009 15:32

Ok, tänud!


jyri1234 - 19.6.2009 18:46

Või siis mitte... Ma vaatasin seda asja ja proovisin midagi seal leiutada, aga välja tuli mittetöötav vahedega menüü.
Kood:

Kood:

<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src ="http://jmangud.pri.ee/pic/menuu__01.gif";
}
function mouseOut()
{
document.getElementById("b1").src ="http://jmangud.pri.ee/pic/menuu_01.gif";
}
</script>
</head>

<body>
<a href="http://jmangud.pri.ee/" target="_blank">
<img border="0" src="http://jmangud.pri.ee/pic/menuu_01.gif" id="b1" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
</body>
</html>

Palun aidake seda koodi õigesti kirjutada (nii et rollover töötaks ja oleks kõrvuti need nupud) või siis html'is mingi lihtsam kood anda.


jnt - 19.6.2009 19:21

pane lihtsalt nupud üksteise kõrvale ja tee iga nupu jaoks omaette 2 funktsiooni js'is. :P copy-paste technology. :D

Aga tegelt, kui ma teeks sellist menüüd, siis ma teeks seda mitte javascriptiga, vaid html+css'iga. ;) Teksti paneks üldse tekstina (SEO*) ja tekitaks "lahtrid", millel taustaks siis vajalik taust. Lahtrit tekitaks samas <ul><li>asd</li><li>asd</li></ul> tag'idega. Alguses tegelt oleks see vist natuke raskem, kuid üks päev, kui tahad raha eest korralikke veebilehti tegema hakata, pead sa ikka css'i selgeks saama. ;) Lihtsalt selline tuleviku muusika, kuhu poole rühkida. ;)

Võid vaadata nt minu kodukat, kus on küll menüü palju lihtsam ja ülevalt alla, kuid idee poolest siiski sama asi. (rolloverid jms jura) Et javascripti pole mul kodukal pmst üldse. (ainult mingi pisike jupp popup'ide jaoks galeriile) CSS'i hea omadus on ka see, et javascript'i annab vabalt brauseritel välja lülitada (ja mitmed seda ka teevad... omaette lahendus bänneritest jms vabaneda), kuid siis ei tööta ka enam sinu menüü rolloverid. CSS'i aga välja lülitada ei saa. Kui saaks, siis võiks juba võimalus olla html'i ka välja lükata. XD

SEO - Search engine optimization.


jyri1234 - 19.6.2009 19:28

No jah, eks ma proovin siis seda lahtrit täita, aga ei usu et midagi välja tuleb.


simmo - 19.6.2009 19:29

CSS'iga oleks vist isegi targem teha, aga teadsin et w3schools'is on midagi sellist olemas ja leidsin javascript näite. Kui CSS'iga teha siis siit saab lugeda selle kohta : http://www.edginet.org/techie/website/cssimg.html


jnt - 19.6.2009 20:26

ul-li tyypi menyy kohta siin juttu: http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml

;)


jyri1234 - 7.7.2009 19:28

Ma tegin nüüd ise kah mingi list-menüü, aga see ei muuda :hover'iga teksti värvi.
Milles viga?
Kood siin:

Kood:

#menu {
list-style: none;
width: 135px;
}

#menu li {
margin-left: 0px;
width: 135px;
height: 20px;

background: #DCDCDC url(menu.PNG);
}

#menu li a {
padding-top: 2px;
padding-left: 4px;
font-weight: bold;
margin-top: 5px;
display: block;
color: #32CD32;
text-decoration: none;
}

#menu li:hover {
color: #FFF;
background: #000 url(menu_hover.PNG);


#menu li:hover a {
color: #FFFFFF;
}

Palun aidake!


jnt - 8.7.2009 01:40

proovi viimasel mitte "#menu li:hover a" vaid "#menu li a:hover" ;) vaata, kas toimib. ;)


jyri1234 - 8.7.2009 10:35

See "#menu li a:hover {
color: #FFFFFF;
}" ei tööta!

edit: Ja menüül alumised umbes 2 px ei tööta (ei ole link), kuigi height on menüül sama mis pildid. Mis sellel viga võiks olla?


jnt - 8.7.2009 10:40

Ma praegu ei oska öelda, miks hover ei tööta... vaata, ega kuskil mingit typo't ple...

pane a'le ka width ja height siis. ;) ja vajadusel lisa ka a'le rida "display: block;", mis siis teeb linki reaalselt kastiks, mitte ei jäta teda lingitekstiks nagu. :P Võid natuke uurida-puurida ka mu koduka menüü css'i. ;)


jyri1234 - 8.7.2009 10:53

Olen vaadanud (ja mul on koguaeg ju "menu li a" blokis olnud ), aga ma mõtlesin et ei hakka päris maha copyma ja tegin ise mingisuguse listiga menüü.

Mis asi see typo on?? (ja tegelt tahaks ikka et muudaks värvi see tekst)


jnt - 8.7.2009 10:57

typo nagu mingi koma kuskilt puudu, täht valesti... niuke pisike märgiviga nagu. :P


jyri1234 - 8.7.2009 11:02

Seda vist annab otsida:s


jyri1234 - 9.7.2009 10:54

Leidsin selle typo üles ja sain valideeruvaks ka lehe (pidin <ul>'i ka sisse panema ikkagi), aga nüüd menüü nihkus edasi!
Ma annan pildi ka.
Kuidas seda korda teha?? Enne ma muidu <ul>'i maha võtsingi, et menüü oleks ilusti keskel.

Kood kah:

Kood:

#menu {
list-style : none;
width : 135px;
}

#menu ul {
list-style : none;
width : 135px;
}

#menu li {
margin-left : 0;
width : 135px;
height : 18px;
background : #dcdcdc url(menu.PNG);
}

#menu li a {
padding-top : 2px;
padding-left : 4px;
font-weight : bold;
margin-top : 5px;
display : block;
color : #32cd32;
text-decoration : none;
}


#menu li:hover {
color: #FFF;
background: #000 url(menu_hover.PNG);
}

#menu li a:hover {
color: #FFFFFF;
}


jnt - 9.7.2009 11:07

mine mu lehele ja vaata sealt maha, et marginid oleks samamoodi sätitud #menu'l ja vast ka #menu li'l... btw, #menu ul'i pole vist olemas sul tegelt, kuna ul on ise #menu. ;) #menu ul oleks see, kui ul'il id'ga "menu" sees oleks veel üks ul. ;)


jyri1234 - 9.7.2009 11:25

#menu lihtsalt ei töötanud, pidin #menu ul tegema et töötaks. Aga ma siis vaatan sinu lehelt maha =D

Muide, ma sain mingi vea validaatori abil korda!


jyri1234 - 9.7.2009 11:37

Menüü ise töötab täpselt nagu peab, aga vot ei ole 5 px kaugusel äärest vaid ikka nagu pildid!

Kood nüüd selline:

Kood:

.menu {
margin-left: 0px;
font-weight : bold;
list-style-type: none;
width : 135px;
}



.menu li {
margin-top : 5px;
width : 135px;
height : 18px;
background : #dcdcdc url(menu.PNG);
}

.menu li a {
padding-top : 2px;
padding-left : 4px;
height: 17px;
font-weight : bold;
display : block;
color : #32cd32;
text-decoration : none;
}


.menu li:hover {
background: #000 url(menu_hover.PNG);
}

.menu li a:hover {
color: #000;
}


Mis viga võiks olla??


jnt - 9.7.2009 11:47

eem, proovi paddinguid ka maha teha mu lehelt. :P kui marginites asi ei ole, siis paddingutes peab asi olema... :P

Tegid menu classiks? (enne oli id)


jyri1234 - 9.7.2009 12:08

<ul class="menu">
<li><a href="?id=1">Kodu</a></li>
<li><a href="?id=2">Minust</a></li>
<li><a href="?id=3">Tehtud tööd</a></li>
<li><a href="?id=4">Kontakt</a></li>
</ul>


Aa ja kontaktivormiga ka probleeme mul: Miks "silte" (labeleid) näha ple??
Kood

Kood:

<form method="post" action="<?php $PHP_SELF ?>">
<table style="color: black; font-family:Verdana, arial; font-size: 12px;">
<tr>
<td colspan="2">
<div align="center" style="color: #FFF; font-weight: bold; font-size: 20px; text-transform: uppercase;">
Kontakteeru minuga!
</div
</td></tr>
<tr><td width="35%" valign="top">
<div align="center">
<label>Sinu nimi:</label><br>
<input type="text" style="background: #696969;"name="nimi" size="25" tabindex="1" maxlength="256"><br>
<label>Sinu e-post:</label><br>
<input type="text" name="email" size="25" tabindex="2" maxlength="256"><br>
<label>Teema:</label><br>
<input type="text" name="subject" size="25" tabindex="3" maxlength="256"><br>
</td><td class="65%">
<label>Sõnum:</label><br>
<textarea rows="5" cols="40" name="message"></textarea><p>
<input type="submit" style="font-size: 14px; background: #696969;" value="Saada"></div>
</td>
</tr>
</table>
</form>



Ja proovisin kõiki paddinguid maha võtta, aga panin tagasi sest siis nihkus lihtsalt 5px (padding oligi 5px) tagasi.



Tegelt ma copysin selle kontakti vormi tabeli osa php.ee'st, aga praegu ma mõtlen et ma teen ta natuke lihtsamaks ise (ja see copytud ei valideeri ka...)


jnt - 9.7.2009 12:27

sul pole ju siiski paddinguid määratud kuskil! Vaata mu kodukalt maha, mul enamus kohtades padding 0px pandud ja mõnes kohas mingi 10px.


jyri1234 - 9.7.2009 12:41

Ok ma vaatan, aga jnt, saad sa saata enda kontaktivormi, just selle php'ga saatmise osa koodi? Mul endal jookseb see kokku kuidagi.


jyri1234 - 9.7.2009 12:50

Oi tänan! Nüüd menüü korras, aga äkki saadad PM'iga enda kontaktivormi selle koha, kus kontrollib kas on tühi sõnum või mitte (tegelt tahaks üldse seda PHP'ga saatmise süsteemi)
Sry et topeltpost!


jnt - 9.7.2009 12:53

ma arvan, et sellest poleks kasu, kui ma enda kontaktivormi sulle saadaks, kuna tegemist on mu cms'ile mõeldud mooduliga ja praktiliselt pead sa ikka ise kõik kribama... Lihtsalt if'iga kontrollid kõik lahtrid üle ja kui "erroreid" ei tule, siis saada lõpuks meili välja. ;)


jyri1234 - 9.7.2009 13:29

Aga mul exit; unktsioon paneb segast, kui seda poleks oleks mu leht valideeruv :( Ma ei oska enam midagi välja mõelda!


simmo - 9.7.2009 17:28

Miks pead siis exit kasutama ?


jyri1234 - 10.7.2009 07:56

Mida veel võib siis?