Eli nyt tarvittaisiin lähinnä tietoa, millä ohjelmalla tuommoinen tehdään... Käsin tehtäväksi lienee liian vaikea :)
Tarkoitus olisi siis paloitella yksi iso kuva aktiivisiin osiin, joiden päälle viemällä hiiren osoittimen se osa kuvasta muuttuu eli vaihtuu toiseksi, ja kyseisestä kohdasta olisi linkki jonnekin...
Yhtään esimerkkiä en nyt tiedä nimetä, mutta sellaisiakin saa vinkata, jos joku nyt yhtäkkiä sellaisen muistaa jossain olevan ;)
Tarkoitus olisi siis paloitella yksi iso kuva aktiivisiin osiin, joiden päälle viemällä hiiren osoittimen se osa kuvasta muuttuu eli vaihtuu toiseksi, ja kyseisestä kohdasta olisi linkki jonnekin...
Yhtään esimerkkiä en nyt tiedä nimetä, mutta sellaisiakin saa vinkata, jos joku nyt yhtäkkiä sellaisen muistaa jossain olevan ;)
Vastaukset 7
Vanhimmat
Itse toteuttaisin tuon niin, että paloittelisin ihan oikeasti sen kuvan osiin ja tekisin normaalit linkit niistä. Sitten vain onmouseover-koodia kuvien vaihtamiseksi. Tai vaihtoehtoisesti css:llä. Silläkin tuo pitäisi onnistua.
Luulen että paljon hankalampi on ruveta imagemappien sun muiden kanssa säätämään, sitä paitsi niiden toimivuudesta ei ole aina edes takeita.
hampaiden poistoa peräaukon kautta!
Kyllä inage-mapit toimivat moitteettomasti kaikilla selaimilla ja niitä pystyy tekemään kymmenen kertaa nopeammin ja vaivattomammin kuin "kuvapilkkomis"-menetelmäsi (joka esim. vaatisi että kuvat olisivat transparent background gif joiden asettelu yhtenäiseksi kokonaiskuvaksi olisi täyttä tuskaa. Esim. Suomen kartta mistä voit aktivoida eri läänit? Tai eri kaupungit, jolloin kaupunkien väliin ja ei-aktiivisia alueita?
Monet editorit (esin. ilmainen Stone's Webwriter) antaa mahdollisuuden luoda imagemapin graaffisesti: Siirryt kohtaan mihen haluat lisätä interaktiivisen kuvan, alitset insert Imagemap, ohjelma kysyy kuvan nimi ja siirtyy editointitilaan: Voit valita minkänuotoinen alue haluat lisätä (suorakaide, ympyrä, polygoni=monesta pisteestä muodostuva vapaamuotoinen alue) jonka jälkeen voit piirtää alueen haluamasi kohtaan. Lopuksi ohjelmakysyy minne tämä alue viitta (linki) ja mitä graafisia tehosteita siihen liittyy, Sitten määrittelet muut aktiiviset alueet samalla tavalla. Erittäin yksinkertaista!
Jotkut piirtoohjelmat (muistaakseni esim. Serif PhotoPlus) antavat myös mahdollisuuden luoda imagemapin erilliseen tiedostoon mistä voit kopioda sen html-tiedostoon. Tämä on hieman työläämpi menetelmä kun edellinen, mutta kyllä tämäkin hakkaa "kuvapilkkomiset" mennen tullen!
kirjoitin
Jotkut piirtoohjelmat (muistaakseni esim. Serif PhotoPlus)
pitää tietysti olla kuvankäsittelyohjelmat.
Toisalta myös piirto-ohjelmissa saattaa olla tämä ominaisuus, vaikka ei yhtä todennäköistä, koska selaimet eivät tue mitään vektori-formatia, ainoastan erityyppisiä pikselikarttoja (.bmp.gif.jpg.png)
Toki image-map on helppo tehdä, mutta ongelmaksi tulee miten saat kuvan vaihtumaan toiseksi, toki voit vaihtaa ison kartan eri läänien kohdalla toiseksi, mutta tämä on tyhmää ja kaistaa vievää.
Järkevintä on länttästä kartta taustakuvaksi sitten vain siihen päälle diveillä haluttuun kohtaan valitun läänin kuva.
"vaatisi että kuvat olisivat transparent background gif joiden asettelu yhtenäiseksi kokonaiskuvaksi olisi täyttä tuskaa"
Miksi pitäisi olla läpinäkyviä?
Ja asettelu toki hoitaa scriptin pätkä.
Katsoppas http://www.cssplay.co.uk/menu/imap.html tuollee kannattaa toteuttaa. Juu tuo tuossa toisessa esimerkissä tulee ainakin Operal vierityspalkit, mut tämähän on helppo korjata.
1)Tuo mitä sanoit että aktiivisessa kuvassa kannattaa asettaa "peruskuva" div:in taustakuvaksi on täysin totta. Sen päälle voit asettaa haluttuihin kohtiin toisia (pienempiä) kuvia , tekstiä ym. periaatteella että ne ovat näkymättömiä (visibility:hidden;) kunnes joku ehto täyttyy, jolloin kuva muuttuu näkyväksi (visibility:visible;). Tämä on se perusperiaate, käyttäisitkö css tai javascript tai molempia. Tästä olemme kai yhtä mieltä?
2)
"vaatisi että kuvat olisivat transparent background gif joiden asettelu yhtenäiseksi kokonaiskuvaksi olisi täyttä tuskaa"
Kuva (tai esim tekstilohko) on perusmuodossaan AINA suorakaiteen muotoinen (height:150; width: 200;). Ellet tee mitään, kuva peittää tämän suorakaiteen muotoisen alueen kokonaan (joskus tämä on haluttu ominaisuus, joskus ei).
Jos haluat kuvan joka ei ole suorakaiteen muotoinen (esim ympyrä tai esim. läänien tapauksessa vapaamuotoinen) teet .gif-kuva jossa määrittelet background=transparent. Tällöin tausta "paistaa läpi" kaikkien pikseleiden kohdalla joilla ei ole mitään väriarvoa (= taustaväri"). Antaa vaikutelman että kuva olisi esim. ympyrän muotoinen, vaikka se edelleen on suorakaiteen muotoinen. Toivottavasti vielä pysyt kärryllä?
3)Nyt päästiin kohtaan kuvan aktivointi: On olemassa kaksi vaihtoehtoa, joko kuva aktivoi itsensä (jolloin aktivointialue on suorakaiteen muotoinen) tai tausta (image-map) aktivoi kuvan (jolloin aktivointialue voi olla vapaamuotoinen).
Ensimmäinen vaihtoehto on huonompi koska jos kuvat osittain peittävät toisiaan syntyy ristiriitoja (väärä kuva aktivoituu tai "kuva" aktivoituu vaikka kursori ei olisi "sen päällä", esim. ympyrän päällä).
Jos aktivoinnin hoitaa pelkästään css:llä tai javascript/DOM on osittain makuasia. Javaskript on monipuolisempi vaihtoehto ja toimintavarmempi vaihtoehto (tuota paskapuhetta että kaikilla ei toimi javaskript en jaksa kuunnella, useimmilla ei toimi Java VM mutta näillä kahdella ei ole MITÄÄN tekemistä toistensa kanssa! Tietoturvallisuuden kannalta ei ole mitään syytä estää javascriptiä).
4) CSS on ihan hyvä asia (oikein käytettynä) mutta siitä on tullut riesa ja itsetarkoitus kun sen avulla yritetään tehdä asioita mihen se ei alunperin ole suunniteltu. Vähän kuin Liisa Ihmemaassa, kun Punainen kuningatar ylpeänä huudahti: "Olisin voinut tehdä sen paljon monimutkaisemmalla tavalla!".
Lopuksi: Nyt voit viisampana naisena tai miehenä lukea omaa viestiäsi (ja katsoa esimerkkiäsi) ja harjoitustehtävänä voit kirjoittaa oikaistun version siitä ;))
Kiitokset parhaasta vinkistä! Tuo Stones Webwriter (v. 3.5) ei tunne kuitenkaan kuin ympyrän ja suorakulmion. Muutoin vaikuttaa kelpo ohjelmalta. Kuuluuko tuo polygon-vaihtoehto vain maksullisiin tms. versioihin?
Hupsis tää keskustelu pääs unohtumaan.
"1) Tämä on se perusperiaate, käyttäisitkö css tai javascript tai molempia. Tästä olemme kai yhtä mieltä?"
Kyllä olemme.
"Jos haluat kuvan joka ei ole suorakaiteen muotoinen (esim ympyrä tai esim. läänien tapauksessa vapaamuotoinen) teet .gif-kuva jossa määrittelet background=transparent. Tällöin tausta "paistaa läpi" kaikkien pikseleiden kohdalla joilla ei ole mitään väriarvoa (= taustaväri"). Antaa vaikutelman että kuva olisi esim. ympyrän muotoinen, vaikka se edelleen on suorakaiteen muotoinen. Toivottavasti vielä pysyt kärryllä?"
Niin mutta yhä kuvan EI ole pakko olla läpinäkyvä. Leikkaa kartasta pala ja värjää VAIN kunta punasella, tällöin vain kunnan väri muuttuu vaikka kuva on neliö tai suorakaide, tajusitkos?
"Javaskript on monipuolisempi vaihtoehto ja toimintavarmempi vaihtoehto (tuota paskapuhetta että kaikilla ei toimi javaskript en jaksa kuunnella, useimmilla ei toimi Java VM mutta näillä kahdella ei ole MITÄÄN tekemistä toistensa kanssa! Tietoturvallisuuden kannalta ei ole mitään syytä estää javascriptiä)."
Niin aika monella on JavaScript kytketty pois päältä, siis JavaScript, koska JavaScriptiä käytetään hyvin usein väärin alert-boksien jne... turhuuteen joista ei ole mitään hyötyä kävijälle vaan ärsyttävät, tarvittaessa sen saa helposti päälle. Jotenka jos saman tapasen pystyy tekee CSS:llä niin sillä se kannattaa tehdä.
Niin tietoturvasta, JavaScriptillä saa IE:ssä leikepöydän sisällön sivulle ja tämä on tietoturva riski, eikä siitä ole kuin parikuukautta kun Firefoxin JavaScript toteutuksessa oli aukkoja, joten ei se mitään hälynpölyä ole.
"CSS on ihan hyvä asia (oikein käytettynä) mutta siitä on tullut riesa ja itsetarkoitus kun sen avulla yritetään tehdä asioita mihen se ei alunperin ole suunniteltu."
Totta olen aivan samaa mieltä, mutta nythän ei siitä ole kyse. CSS:ssä on :hover jne... jotka ovat tähän asiaan omiaan.