Ongelmat.org

Moi
Mitenkähän sais ton vaihtuvan kuvan etusivulle, joko vaihtuis kun päivittää selaimen tai ajajoittamalla. Mikä vaan käy. en löytänyt koodia ja itse en kunnolla osaa.
Löytyiskö apua?
Sivut os. www.ilkkaronka.fi

PHP:llä se menisi yksinkertaisimmillaan näin

http://www.programmingtalk.com/showthread.php?t=19618 tuolta löytyi tuo koodi ja siellä on myös hieman monimutkaisempia esimerkkejä, joissa voidaan käyttää useita päätteitä yhden sijasta. Koodissa siis arvotaan muuttujaan $file luku väliltä 1-5 ja päätteeksi annetaan .jpg. Lopuksi käytetään echo-käskyä, jolla näytetään kuva. Kuvien nimet ovat siis tässä esimerkissä muotoa kuva1.jpg, kuva2.jpg jne. Toimiva esimerkki löytyy täältä (http://ongelmat.org/esimerkit/testi_rand.php).

Nyt toimii salasana palautus. Laitan emailitse käymämme keskustelun tähän, jois jollakuulla muullakin on kiinnostusta:

>Kys: Olisin kysynyt että pitääkö luoda erikseen kansio jossa noi kuvat  on? Kyse on siis siitä vaihtuva kuva jutusta. Minulla ei oikein  englanti ole hallussa.
Vas:Voit luoda halutessasi kansion noille kuville, lisäät vain sitten kansion nimen tuohon eteeen eli esim. echo '<img src="kansio/kuva'.$file.'">';


Mulla on css-tiedosto, jossa määritellään toi etukuva niin pitääkö esim index-sivulla tai css-tiedostossa muuttaa jotain jos laiuttaa ton koodin index-sivulle. Tuotahan ei voi  kait laittaa css-tiedostoon? Vai toimiiko vain jos lätkäsen ton koodin index-sivulle ja määrittelen kuvakansioksi css-tiedoston kansion?
Erittäin selkeetä.

Tuota koodia ei voi laittaa css-tiedostoon vaan juurikin php-tiedostoon. Esimerkiksi lisäät sen <div id="header"> alle. CSS-tiedostosta muutat seuraavan kohdan #headerin alta muotoon ja poistat kohdan

<div id="header"> alle lisäät aikaisemman koodin hieman muokattuna:

ja css-tiedostoon:

Lopuksi lisäät kuvasi tuonne images-kansioon (muotoa: kuva1.jpg). Luulisin, että tuo toimisi suoraan noin sivuillasi.

SuurKiitos. En olis itse keksinyt. Kokeilenkin tuota heti kun ehdin, mutta nyt menee joku aika kun työt haittaa harrastusta.

Moi
Kokeilin tuota juttua ja ei aivan toiminut. Kuvat vaihtui kyllä hyvin. Tossa alla kuva kaappaus, jossa ilmenee mikä vikana. Vois ajatella että laittais ton vaihtuvan kuvan tohon etusivulle alas jos ei saa footerissa pelittää. Mieluummin kyllä tos ylhäällä. Yritin itte kyllä taas sorvailla muttei onnistunut.
Linkki suoraan: http://www.ilkkaronka.fi/footer.JPG

(http://www.ilkkaronka.fi/footer.JPG)

Latailin omalle koneelleni nuo tiedostot ja testailin tässä. Oli käynyt pieni lapsus eli align tilalle laitat float ja säädät haluamasi kuva koon css:ään. Esim:

Kokeilenkin heti kun pääsen omalle koneelle.
  Taas kysymystä pukkaa. Laitan tähän samaan ketjuun. Voit siirtää omaks jos niin on parempi.
 Siis, miten saa noita "ali"sivuja vai miksi niitä kutsutaan? Jos siis hiiren vie vaikka ajatellaan minun sivuillani blogi kohtaan ja siitä aukeaisi alisivujen osoitteita vaikka näin: blogi1, blogi2..klikkaamalla pääsis sitte vaikka blogi2:n.

Yritin etsiä esim. mutta tietenkään en tässä kiireessä löytäny!

KIITOS. Homma näyttää toimivan. Ainoastaan tökki tossa kuvan koko hommassa, MF:llä ja Operalla ei toiminut, IE:llä sen sijaan toimi. Pienensin kuvat manuaalisesti sopiviksi. Linuxinkin puolella toimii hyvin.
 Olen yrittänyt tuota vaikka miten siinä onnistumatta ja näköjään aika kaukana olin ratkaisusta, tunnustan. Laitoin linkin omilta sivuilta tänne, vaikka sivuillani ei niin hirmuisesti kävijöitä olekaan.

Tarkoitat siis jonkinlaista subnavia? Tuohon löytyy varmaankin miljoona ja yksi eri tapaa toteuttaa, mutta paras tulos tulee varmaankin pelkällä CSS:llä. Pixelspread.com (http://pixelspread.com/blog/289/css-drop-down-menu) sivustolta löytyi tuollainen ja jos taas haluat sen ilmestyvän sivulle niin Alistapart.com (http://www.alistapart.com/articles/horizdropdowns/) sivustolta löytyy vastaus siihen. Itse koetin tuolla Alistapart.com tyylillä ja siitä tuli ihan toimiva.

Lisäsin css:ään #nav li a hoverin alapuolelle

Määrittelyt ovat siis samat, jotka löytyvät tuosta antamastani linkistä, mutta niitä on hieman muokattu tuolle sivustolle sopivaksi. Lisäsin myös #nav li a -kohtaan määrittelyn border-left: 1px solid #fff; ja HTML:n muokkasin samaan tyyliin kuin esimerkissäkin eli:


Laitoin myös kuvan liitteeksi omasta lopputuloksestani esimerkin pohjalta. En tiedä, miten IE:ssä toimii (alistapartissa on sotkettu javascriptiä lopuksi, joten sillä saa viimeistään toimimaan myös IE:n kanssa).

Juuri tuota tarkoitin. Kiitos. Toimii hyvin kaikilla muilla selaimilla  paitsi IE.llä. Laitoin ton koodin ie.css tiedostoon myös tuon sinun ohjeesi mukaan. Olen yrittänyt muokata koodia siinä onnistumatta. No, meikäläisen koodaus kyvyt on aika onnettomat. Mihinkä kohtaan tai mille sivulle tulee laittaa toi javascript-pätkä? Tuleeks se yleensä tohon ie.css-tiedostoon? Olen koettanut eri paikkoihin.  IE kyl pilaa kaiken ilon, damn it.

Tuo on siellä sivun lopussa ja lisäyksenä siihen


Eli siis muokkaat tuon li: hover ul -kohdan css-tiedostossa ylämainittuun muotoon. Näköjään sattumalta omissa sivuissasi sinulla on tuo päälista nimetty jo naviksi, joten sitä ei tarvitse muuttaa.

* {
margin: 0;
padding: 0;
}

body {
background: #CDB79E url("images/sini.JPG") repeat;
text-align: center;
font: normal 11px/18px verdana, arial, tahoma, sans-serif;
color: #333;
padding-top: 40px;
}

a {
color: #666;
text-decoration: underline;
}
#vkuva {
float: right;
height= 300px;
width= 483.5px;
}
a:visited {
text-decoration: underline;
}

a:hover {
color: #000;
}

#header {
width: 700px;
height: 300px;
background: #fff;
}

#wrapper {
width: 700px;
background: #fff url("images/#") repeat-y;
background-position: 0 0;
border: solid 10px #fff;
margin: 0 auto;
text-align: left;
}
h5 {
width: 700px;
height: 30px;
background-color: #959269;
margin: 1px 1px 1px 0;
float: left;
font:  30px/30px verdana, arial, tahoma, sans-serif;
padding-left: 10px;
color: #green;
cursor: default;
}
h1 {
width: 210px;
height: 20px;
background-color: #959269;
margin: 1px 1px 1px 0;
float: left;
font:  30px/30px verdana, arial, tahoma, sans-serif;
padding-left: 10px;
color: #green;
margin-top: 1px;
cursor: default;
}

h1:first-letter {
color: #green;
text-decoration: none;
}


h2 {
width: 490px;
height: 20px;
background-color: #959269;
float: right;
clear: both;
font:  30px/30px verdana, arial, tahoma, sans-serif;
padding-left: 10px;
color: #green;
margin-top: 1px;
cursor: default;
}

#nav {
list-style: none;
z-index: 2;
border-right: 1px solid #fff;
height: 295px;
width: 149px;
}

#nav li a {
color: #fff;
font: normal 11px/24px verdana, arial, tahoma, sans-serif;
display: block;
width: 210px;
height: 24px;
background-color: #000;
border-bottom: 1px solid #fff;
padding-left: 10px;
text-decoration: none;
}

#nav li a:hover {
background-color: #333;
}

ul {
margin: 0;
padding: 0;
list-style: none;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 215px;
top: 0;
display: none;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

ul {
margin: 0;
padding: 0;
list-style: none;
width: 215px;
}

li:hover ul, li.over ul {
   display: block; }

#current a {
background-image: url("images/bullet.gif");
background-repeat: no-repeat;
background-position: 100% 50%;
}

#sidebar {
width: 212px;
background-color: #ccc;
float: left;
position: relative;

border-top: 1px solid #fff;
font: normal 10px/18px verdana, arial, tahoma, sans-serif;
padding: 8px;
}

img {
border: none;
}

a img {
margin-bottom: 20px;
border: 1px solid #fff;
}

a:hover img {
border-color: #f00;
}

#content {
float: center;
width: 450px;
margin: 10px 0 0 10px;
}

p {
margin-bottom: 20px;
}

p:first-line {
font-weight: none;
}

#footer {
text-align: center;
clear: both;
width: 450px;
margin-left: 163px;
}
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace»
   (" over", "");
   }
   }
  }
 }
}
window.onload=startList;

Tossa on toi ie.css-tiedosto jossa näkyy miten laitoin noi koodit. Taitaa olla päin p.. kun ei toimi.

Tuota javascript-pätkää ei voi lisätä css-tiedostoon. Tuo tiedosto sisältää vain ja ainoastaan css tyylimäärittelyjä. Kaikki skriptit yms. tulevat sitten .html, .php yms. tiedostoihin. Avaat uuden tekstitiedoston, laitat siihen tuon javascriptin, tallennat sen .js-muotoon ja lopuksi lisäät index.php headeriin <script type="text/javascript" src="tiedoston_nimi.js"></script>. Kannattaa myös lisätä tuohon nav li a-kohtaan css-tiedostossa border-left: 1px solid #fff; (nyt, jos saa hilattua hiirensä tuohon pikselin kokoiseen väliin niin tuo alamenu sulkeutuu, joten tuo parantaa hieman toimivuutta. Tuo border-left siis poistaa sen pikselin kokoisen välin).

Nyt toimii, mutta jää näköjään "päälle" eli kun hiiren siirtää valokuvat osion päältä pois niin alisivut eivät poistu vaan siinä kököttävät kunnes vaikka päivittää sivun niin sitten häviävät. Hyvä kyllä näinkin.

Kuinka paljon helpompaa elämä olisikaan ilman IE:tä. Luultavasti tuon saa sulkeutumaankin IE:llä, pitää tutkia asiaa.

Edit. ja sieltähän se vastaus löytyikin

Eli lisäät css:ään ul kohtaan vielä alarajan eli esim. border-bottom: 1px solid #fff; (taas näitä hienoja IE-korjauksia).

Laitan koodia:

ul {
margin: 0;
padding: 0;
list-style: none;
border-bottom: 1px solid #fff;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 215px;
top: 0;
display: none;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

ul {
margin: 0;
padding: 0;
list-style: none;
width: 215px;
border-bottom: 1px solid #fff;
}

Löysin kaksi noita Ul-kohtia, muttei toimi vieläkään. Lienekköhän tehnyt jotain väärin? Kyl tää IE on syvältä. Kiitos sinulle vaivannäöstä.

Tuossa on tapahtunut pieni kämmi itseltäni näköjään eli

tuon kohdan voi poistaa, koska nuo samat on jo määritelty. Enpä nyt näillä tiedoilla osaa sanoa, miten tuon saisi toimimaan IE:llä (en pysty itsekään testaamaan, kun ei ole IE:tä käytössä).

Ihan mielenkiinnosta. Validoin noita omia sivuja ja ilmoitti tälläisen virheen:
Line 30, Column 39: required attribute "ALT" not specified.
<img id="vkuva" src="images/kuva3.JPG" >   
✉
The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

Pitäisi siis lisätä alt-komento, jotta jos kuvaa ei näy jostain syystä niin näkyisi kuvan selite teksti.
 Kysymys siis kuuluu että onko tohon vaihtuvaan kuvaan, (kuviin), mahdollista ympätä tota alt:a?

Itse keksin pari tapaa ympätä tuon altin.
tai

Ylemmässä otetaan muuttujaan $alt_num talteen tuo numero, joka arvotaan $file-muuttujaan. Tehdään taulukko $file_alt, josta nuo tekstit löytyvät ja lopuksi näytetään kuva sekä sitä vastaava alt-teksti. Alempi on muuten sama, mutta tuossa käytetään vain $file-muuttujaa ja jpg-pääte on laitettu suoraan echoon.

Kokeilin noita molempia ja en saanut onnistuu. Yritin ittekin muokkailla koodia siinä onnistumatta tuloksellisesti. Ei siis näytä kuvaa vaan numerointi saattaa näkyä kuvan paikalla tai pelkkä blankko.
  Huomioitavaa on että nyt sit meni validaattorista läpi.

Hmm, itselläni tuo toimii ihan hyvin (http://ongelmat.org/esimerkit/testi_rand2.php). Sillä voi olla vaikutusta, että sinulla on nuo kuvien päätteet isolla kuvissa ja pienellä taas koodissa. Kannattaa muuttaa joko kuvien päätteet pieniksi tai koodista isoksi (eli siis koodissa .jpg -> .JPG).

Jes siinä vika ja sit piti lisätä toi images/... Eipä voi muuta sanoa kun että kyllä osaatte.

Onnistuuko toi vaihtuva kuva silleen että vaihtuis tietyin ajoin esim 2sekunnin välein ilman sivun päivittämistä?

Varmaankin ajaxilla voisi onnistua (http://fi.wikipedia.org/wiki/Ajax_(ohjelmointi) (http://fi.wikipedia.org/wiki/Ajax_(ohjelmointi))). Itse en ole ajaxia käyttänyt, jos kiinnostaa niin kannattaa tutustua.

En ole saanut ie:llä vieläkään toimiin. Osaisko joku vielä jelppiä?

Herätelläänpäs tätä nyt vihdoin henkiin, kun on ehtii. Tutkin tuota merkkausta, javascriptiä ja css:ssää, mutta en huomannut vielä ainakaan mitään, joka voisi tuon rikkoa. Ainoastaan huomasin, että yksi </div->-tagi puuttuu (wrapperia ei lopeteta koskaan), mutta tämä tuskin vaikuttaa asiaan niin radikaalisti. Kannattaa kuitenkin lisätä se </div> ennen </bodya>. Milläs IE-versiolla olet liikenteessä?

Mistä tuo div-tagi puuttuu? IE7 käytän.

Tuolle "<div id="wrapper">" ei ole lopetus-tagia, joka ilmeisesti kuuluisi </body> eteen. Tuo tuskin on se ongelma, joten jotain on varmaan jäänyt määrittelemättä kuitenkin (http://www.alistapart.com/d/horizdropdowns/horizontal2.htm tuo toimi ainakin kaverilla ie7-selaimella).

Se toimi minullakin kun aikoinaan kokeilin sitä ie:llä ja siks olen yrittänyt ratkaista tuota onkelmaa. Eiks siinä ole samat määritykset kuin mullakin?  Mikähän ihme voi mättää?

Koetetaanpas vielä kerran ja jäsennellään tuota css. En oikein muuta keksi, koska ei ole mahdollisuutta käyttää IE:tä.
muutetaan väli (vastaamaan tätä www.alistapart.com/d/horizdropdowns/style3.css (http://www.alistapart.com/d/horizdropdowns/style3.css))

muotoon

Tuossa ei poistettu mitään, mutta hieman muokattiin vanhaa (esim. #nav li a -> ul li a).

Enpäs nyt sit tiedä mihin kohtaan toi muutos tehdään tarkalleen?
-apassi-

Tyylitiedostoon eli tapauksessasi ainakin nyt tuohon ie.css, koska sen kanssa on ongelmia. Kannattaa tuo css.css pitää kanssa ajan tasalla etteivät sivut näytä liian erilaisilta eri selaimilla.

Kokeilin ja jätin myös ie.css tyylitiedostoon mutta ei auttanut. Harmi. Tiedä sitten teinkö oikein?