Osaisko joku sanoa, että miten saan kuvalle liitetyn image mapin leveyden mukautumaan kuvan leveyteen? Eli vähän niin kuin imagemapin lukittua kuvassa oleviin pikseleihin.
<body> <img src="plaapla" style="width: 100%" usemap="mappi" /> </body>
Eli niin kuin arvata saattaa, niin kuvan koko muuttuu selainta suurennettaessa. Kuitenkaan mapin koko ei muutu, vaan asetetut koordinaatit pysyvät vakiona ja siten linkit menee minne sattuu.
Mielenkiitoinen ilmiö on kuitenkin se, että mapin suhteet pysyy oikeina, jos zoomaa.
Mikä olisi paras ratkaisu, pitääkö tehdä css mappi?
Paulus M kirjoitti:
Osaisko joku sanoa, että miten saan kuvalle liitetyn image mapin leveyden mukautumaan kuvan leveyteen?
Et kai noin suunnilleen mitenkään. öImage mapö eli suomeksi karttalinkki on rakenne, jossa kuvan _pikseleihin_ liitetään toiminnallisuus. (Joku hardcore-ohjelmoija tietysti jo rupesi kehittelemään ajatusta siitä, miten luetaan elementin dimensiot ja sitten sorkitaan area-elementtejä eli harrastetaan köyhän miehen vektorigrafiikkaa purukumilla ja nastoilla...)
> Eli vähän niin kuin imagemapin lukittua kuvassa oleviin pikseleihin.
Niihin se juuri on lukittunut, ja se on ilmeisesti ongelmasi. Haluaisit ilmeisesti lukita kuvan _kohtiin_.
lainaus:
Mikä olisi paras ratkaisu, pitääkö tehdä css mappi?
Mikähän on öcss mappiö? CSS:llä voi kyllä tehdä kivoja asioita kuten asemoida kuvan kohtien päälle tekstejä, jolloin samaa kuvaa voidaan käyttää erikielisissä versioissa. Mutta ei CSS:llä voi eikä ole tarkoitus voida muuttaa _toiminnallisuutta_.
Mikähän on alkuperäinen ongelma? Se voi hyvin olla ratkaistavissa, vaikka oletettu ratkaisutapa johtaakin umpikujaan.
Siis ongelma on se, että mulla on kuva, jonka leveys on täysin sama kuin selaimen leveys. Näin ollen kuvan koko muuttuu, kun selaimen kokoa muutetaan. Kuvassa on linkkejä. Nämä linkit eivät toimi tai osuvat väärään kohtaan, kun selaimen kokoa muutetaan.
Sovitaan, että kuvan koko on 1000 ja selaimen koko on 1000. Sovitaan myös, että linkki on kohdassa x = 500. Kun selainta pienennetään esim. 400 pikseliin, niin kuvakin muuttuu leveydeltään 400 pikseliin. Kuitenkin kuva linkki eli siis mappi on edelleen 500 pikselissä, vaikka sen tulisi olla 200.
Kyllähän ongelma on nyt toteutuksessa, ei saa tehdä itselleen tuollaisia ongelmia.. Silloin on suunnittelussa puutteita tai puuttuu kokonaan.
Tee vaikka kuvasta kehyksen levyinen (esim. 800-900px), ja annat sen olla jatkuvasti yhtä leveä, riippumatta selaimesta.
Paulus M kirjoitti:
Siis ongelma on se, että mulla on kuva, jonka leveys on täysin sama kuin selaimen leveys.
Ei, vaan kuva on kiinteänkokoinen, ja haluat selaimen skaalaavan sen ikkunan leveyteen. Sen selain tekeekin, mutta sillä on seurauksensa.
lainaus:
Kuvassa on linkkejä.
Ei, vaan haluat tehdä kuvan kohdista tai alueista aktiivisia. Itse kuvassa ei ole linkkejä.
Ja aktiivisten alueiden tekohan onnistuu, mutta ne ovat suhteessa kuvan pikseleihin, eivät joihinkin paikkoihin, joihin skaalaus vie kuvan kohtia.
Miksi haluat luoda tämän ongelman? Siis mikä on oikeasti se oletettu käyttäjän ongelma, jonka oletat ratkaisevasi skaalautuvalla bittikarttakuvalla, joka on samalla karttalinkki (siis maalaamalla itsesi nurkkaan)?
<script type="text/javascript">
$(window).bind("load resize", function(){
var leveys = $("#kuva").width();
//Arvo tassa jokaiselle mapille uudet coordit leveyden perusteella.. ;)
$("#mappi1").attr("coords", "200,200,400,400");
});
</script><img id="kuva" src="http://www.jmorganmarketing.com/wp-content/uploads/2010/11/image4.jpg" width="100%" usemap="#mappi" /> <map name="mappi"> <area id="mappi1" shape="rect" coords="100,100,300,300" href="hevonkuuseen.html" /> </map>
qeijo kirjoitti:
//Arvo tassa jokaiselle mapille uudet coordit leveyden perusteella.. ;)
Niin, ongelmahan on siinä, mistä ne revitään. Miten ajattelit hoitaa polygonin?
Ja tärkeämpi kysymys on, miksi tällainen ongelma pitää luoda.
(kuvannykyleveys / kuvanvakioleveys) * alkuperainenxcoordi = coordinuusixpiste
(800/1200) * 240
0,66 * 240
x = 160
(700/1100) * 220
0,63 * 220
x = 140
(600/1000) * 200
0,6 * 200
x = 120
1000 => 500
250 => 125
Eikö se mene prosentuaalisesti 1:1..
qeijo kirjoitti:
(kuvannykyleveys / kuvanvakioleveys) * alkuperainenxcoordi = coordinuusixpiste
Tuo jakolaskuhan ei yleensä mene tasan. Muunnetut koordinaatit eivät siis yleensä ole kokonaislukuja, vaan ne pitää pyöristää. Muunnos ei voi olla tarkka, kuten ei kuvan skaalauskaan, paitsi erikoistapauksissa.
Tuossa olisi askarreltavaa, jotta _kaikki_ koordinaatit saadaan muunnettua dynaamisesti (ja aina kun selaimen leveyttä muutetaan). Voisi kai sen askarrella, jos olisi jokin syy, miksi karttalinkistä pitää tehdä sellainen, että se skaalautuu.
Teinpä tuollaisen skaalauksen JS:llä kerran. Ota leveysmääre pois. Sivun latautuessa kerää JS:llä kuvan mitat ja kuvakartan alueiden alkutiedot muistiin, laita kuvalle leveysmääre. Kutsu korjausfunktiota ja liitä se myös ikkunan resize-tapahtumaan. Korjausfunktiossa laske jokaiselle kuvakartan alueelle uudet tiedot muistissa olevista nykyisen koon mukaan skaalattuna.
Yucca kirjoitti:
Miten ajattelit hoitaa polygonin?
Hyvänen aika, tämähän on ohjelmointifoorumi. Ei varmaan ole liikaa vaadittu, että katkaisee listan splitillä ja käy koordinaatit läpi for-silmukalla.
Kiitos vastauksista, ajattelin vaan, että jos olisi ollut joku oikotie onneen, toi qeijon ratkaisu on riittävä ainakin minun tilanteeseeni, ei imagemappi tässä tapauksessa ole pikselin tarkka. Tein sellaista projektia, jossa koko väliaikainen nettisivu koostuu kahdesta kuvasta sen takia, että työmäärä olisi minimaalinen. Kiitos kuitenkin kaikkille muillekkin sivistyksestä.
Paulus M kirjoitti:
Tein sellaista projektia, jossa koko väliaikainen nettisivu koostuu kahdesta kuvasta sen takia, että työmäärä olisi minimaalinen.
Vaikka epäilinkin, että kyse on hommasta, jossa ei edes ole mitään järkeä käyttää karttalinkkiä saati skaalailla sitä, tuo sentään yllätti.
Aihe on jo aika vanha, joten et voi enää vastata siihen.