Voiko kuvakartan area-linkkeihin laittaa border-määritykset jollain tavalla?
Kun koitan koodata kuvallista ulkoasu, niin olisi hyvä, että tietäisi täsmälleen, missä kohtaa on nämä reunat.
Käyttääkö joku vielä vuonna 2009 "kuvakarttoja"?
CSS:llä ja linkeillä tuo asemointi onnistuu pikselin tarkasti.
:D Voisihan se olla ihan fiksu vaihtaa eri tyyliin, mutta kiinnostaisi silti tietää, että miten tuo onnistuisi vai onnistuuko ollenkaan. :D
Yrität siis saada keskelle kuvaa reunat? Opettele vain suosiolla tekemään kartat näin.
Smuliii kirjoitti:
Opettele vain suosiolla tekemään kartat näin.
Kiitos, tämä onkin hyvä. :D
Edit. Miten Css:llä saadaan linkeistä monikulmioita?
Rocceri: keep it simple
Kukaan ei tiedä? :S Koska minulla on kuvassa tämänmallisia kohtia:
*------------------*
* *
* *
* *
* *
*---------------------*, niin en oikein tiedä miten pitäisi laittaa nuo kulmat siitä linkistä tuon malliseksi.
________________________________________________
Ps. Nuo li-tagit ovat ärsyttäviä tuossa kuvan päällä, kun ne ovat mustia. Miten voin antaa niiden väriksi & tekstin väriksi (color: jotain) läpinäkyvän arvon? Koitin laittaa color: transparent, eikä toiminut.
________________________________________________
Minulla on tuo Teuron tekemä JS koodi, jonka hän MIB:lle postasi siellä sivulla myös, ja tälläinen koodi:
<ul>
<li><a href="javascript:muutaTilaa('macpuhuu')" style="top: 234px; left: 115px; width: 81px; height: 110px;" title="Rock">Rock puhuu</a></li>
<div id="rockpuhuu" style="display: none; top: 200px"><img src="puhekupla ja I.Rock teksti.gif" style="padding-top: 70px; padding-right: 300px;"></div>
<div id="macpuhuu" style="display: none; top: 200px"><img src="puhekupla ja MacRock.gif" style="padding-top: 110px; padding-right: 100px;"></div>
</ul>Kun klickkaa tuota muutaTilaa('xxx'); linkkiä, niin tuolta ilmestyy tietyllä id:llä oleva div esille oikeaan kohtaan, mutta silloin myös tuo linkki häviää. Mistä se johtuu? Tässä vielä koko koodi
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fi" xml:lang="fi">
<head>
<style type="text/css">
ul {
background:url("huone6.bmp") no-repeat 0 0;
height: 476px;
width: 745px;
position: relative;
color: transparent;
}
a {
display:block;
overflow:hidden;
position: absolute;
text-indent:-9999px;
}
body {
color: white;
}
</style>
<script type="text/javascript">
function muutaTilaa(elementti){
nakyvilla = document.getElementById(elementti);
if(nakyvilla.style.display == 'block'){
nakyvilla.style.display = 'none';
}else{
nakyvilla.style.display = 'block';
}
}
</script>
</head>
<body bgcolor="black">
<center>
<ul>
<li><a href="javascript:muutaTilaa('macpuhuu')" style="top: 234px; left: 115px; width: 81px; height: 110px;" title="Rock">Rock puhuu</a></li>
<div id="rockpuhuu" style="display: none; top: 200px"><img src="puhekupla ja I.Rock teksti.gif" style="padding-top: 70px; padding-right: 300px;"></div>
<div id="macpuhuu" style="display: none; top: 200px"><img src="puhekupla ja MacRock.gif" style="padding-top: 110px; padding-right: 100px;"></div>
</ul>
</center>
</body>
</html>Mikset vaan tee tarpeeksi suurta suorakulmiota kattamaan tuota aluetta?
Musta väri ei suinkaan ole color vaan background-color (tai pelkkä background, riippuu miten määrittelet).
Eikös color määritäkkin tekstin värin? Kyllä. Ja nähtävästi ainakin IE:ni laskee tämän tekstiksi, joten jos laitan li { color: red; } niin sen palluran väri on punainen.
Koitin laittaa li { color: transparent; background: transparent; }, mutta vetää pallot valkoisiksi.
Edit. color: transparent vetää pallot mustiksi.
Edit. Kun sanoin, että linkki hävisi kun sitä kerran painoi, niin sen jälkeen vain linkin ulommaiset reunat toimivat. Määrittelin sen linkin näin:
<a href="javascript:muutaTilaa('macpuhuu')" style="top: 234px; left: 115px; width: 81px; height: 110px;">Rock puhuu</a>
Edit. Kun tämä toinen kuva tulee tähän päälle, niin koko sen alla oleva kuva jää vain taustakuvaksi, ja tämä toinen kuva peittää sen kokonaan (Kuitenkin kuva näkyy alla, koska tämä päällimmäinen kuva on läpinäkyvällä taustalla).
Edit. Jos tallennan kuvan niin, että tausta on transparent, niin miksi kummassa se on silti samaa kuvaa niiltä läpinäkyviltä kohdilta? Siis, jos on tälläinen kuva:
*-------------------* *...................* * ...........* * ...........* *-------------------*
Kuvassa tyhjä on läpinäkyvää, ja pisteelliset ei läpinäkyvää. Jos hiiren siirtää tuon läpinäkyvän osan päälle, niin se on edelleen sitä kuvaa. Miten voin laittaa kuvan niin, että läpinäkyvät kohdat eivät kuuluisi kuvaan, vaan ne leikattaisiin pois, niin että kuva olisi tälläinen:
*-------------------*
*...................*
*********...........*
*...........*
*-----------*Rocceri: et puhunut aikaisemmin mitään palluroista.... Pallurat lähtevät asettamalla list-style: none; -määritys.
RTFM
Rocceri kirjoitti:
Voiko kuvakartan area-linkkeihin laittaa border-määritykset jollain tavalla?
Reunat voi ainakin piirtää PHP:llä:
(kuvakartta.php) <?php $kuva = imagecreatefrompng("kuvakartta.png"); $musta = imagecolorallocate($kuva, 0, 0, 0); imagepolygon($kuva, array(30, 30, 20, 50, 40, 80, 80, 10), 4, $musta); header("Content-type: image/png"); imagepng($kuva); ?>
(kuvakartta.html)
<image src="kuvakartta.php" usemap="kartta">
<map name="kartta">
<area shape="poly" coords="30,30,20,50,40,80,80,10"
href="https://www.ohjelmointiputka.net/">
</map>Tuo list-style: none auttoi paljon. :D Nyt se ei enään häiritse. Sitten on vielä yksi ongelmaa:
1. Jos laitan kuvan GIFFYllä transparentiksi, niin voinko tehdä myös niin, että tämä läpinäkyvä osa leikattaisiin kuvasta pois, kuten aikaisemmin esitin?
Jollei Paintilla onnistu, niin on myös mahdollista käyttää Photoshop 3 tai 4.
Ps. Miten voi antaa negatiivisia padding arvoja?
Yksi ongelma lisää:
li-tagien välissä olevien linkkien "hypertekstit" eivät tulostu, kun display on block. Mistä tälläinen johtuu? En saanut toimimaan, vaikka mitä tein.
Edit. Ja lisää tulee:
1. Jos tällä JavaScriptillä ei ole mitään uutta tulostettu sivulle, kuten toista kuvaa, niin kaikki linkit toimivat. Mutta jos tulostetaan jotain muuta käyttäen selainta, niin linkit toimivat vain ääriviivoillaan (Eli jos on linkki 500x500, niin vain nämää 500 reunat toimivat linkkin'). Miten tämä korjataan?
2. Koitin tehdä tätä myös taulukoilla ja PHP:llä. Jos on määritelty 500x500 taulukko, niin miksi kummassa ensimmäinen tr on keskellä taulua?!? Miksei se aloita yläreunasta, kuten luulisin sen tekevän. Sitten myös padding-top käsky alkaa keskeltä tablea, eikä sen yläreunasta! Miten saan 500x500 taulukkoon tr:n yläreunaan?
Edit. 2. kohta ratkesi heti. valign="top" auttoi. Mutta silti, miksi se alkaa keskeltä?
Edit. Yksi vielä:
En saa annettua tyhjälle td:lle pituus ja leveys arvoja. Pitäisi saada 20x80 tyhjä td.
Aihe on jo aika vanha, joten et voi enää vastata siihen.