Hyvää iltaa pitkästä aikaa, arvon koodigurut :)
Tällä kertaa suunnitelmana toteuttaa webbisivu tai osa sivusta graafisena kuvana johon on valmiiksi piirretty painikkeet. Ja sitten rakennella koordinaatit kuvaan painikkeille niille kohdille jotka toimii painikkeina kyseiseen sivustoon. Mitä ongelmia painikkeiden sijoittelussa tulisi, vai onko tehtävä suorastaan mahdoton? Painikkeet tulisi siis kyetä rajaamaan jollain koordinaattimääritteellä tiettyihin sijainteihin tietyn korkusina sekä tietyn levysinä (nelikulmio riittää). Mielellään vielä siten että painike värjääntyy kun kursori nousee niiden päälle ja painettaessa siirtyy määriteltyyn linkkiin.
-googlella en löytänyt mitään, joten onko ehdotuksia millä kielellä&komennolla saisin painikkeet parhaiten rakenneltua?
Voit käyttää HTML:n tageja map ja area.
Voit myös laittaa tavallisen kuvan päälle painikkeiksi image-tyyppisiä input-elementtejä CSS:llä absoluuttisesti aseteltuina.
Tarkoittanet "kuvakarttaa" (image map), jossa kuva IMG-elementillä määritetään kartaksi MAP-elementillä, joka taas sisältää "kuumia alueita" (hot spots), eli AREA-elementillä toteutettuja linkkejä.
Kaikki muu kuvailemasi hoituu yo. elementeillä, mutta kuvakartta-alueet eivät reagoi CSS-osoitusselektoriin, joten kuuman alueen värin vaihtaminen tyyleillä ei taida onnistua. Osoitteessa:
http://weppipakki.com/js/code/js2/maphint.htm
on kuvakarttaesimerkki, jossa kuumille alueille on määritetty skriptillä vihjeteksti.
HTML + CSS -yhdistelmällä kuumien alueiden värin vaihto onnistunee ainoastaan, kuten Metabolixkin jo mainitsi, kuvien ehdottomalla sijoittamisella (CSS-position-ominaisuudella), eli esim. sijoittamalla kuvia taustakuvan päälle.
Sitten vielä vihoviimeinen vaihtoehto, johon itse en koskisi pitkällä tikullakaan, on skriptikirjastojen käyttö, esim.:
Iso kiitos, koortinaatit asettaminen painikkeille onnistu näillä vinkeillä jopa yllättävän helposti :)
Nyt ongelmana on kuitenkin tuo kuva toisen kuvan päälle hooveroimalla. Tässä on puolet sunnuntaista menny pähkäillessä mikä mättää. Osaan toteuttaa hooveroinnin, taisin onnistua asemoimaan kuvan absoluuttisesti aseteltuna aiemman kuvan päälle, mutta kuvan asentaminen näkymättömäksi ja sen esille tulo hooveroimalla ei onnistunut sitten mitenkään.
Onko jotain konkreettista ehdotusta mitenkä saan näkymättömissä olevan Aku Ankka giffin näkymään A-koordinaateissa(458,133,586,179) hiiren siirtyessä kyseisten koordinaattien päälle? Luonnollisesti ilman että sillä on negatiivista vaikutusta muuhun koodiin.
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
{ /*remove vertical margins*/
margin-top: 0;
margin-bottom: 0;
}
</style>
<style type="text/css">
{ /*remove horizontal margins*/
margin-left: 0;
margin-right:: 0
}
<style>
{
background-color: black;
}</style>
</head>
<body leftmargin="0" topmargin=0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight=0">
<div id="A1">
<img src="http://koululainen.fi/s/userfiles/gallery/4ce8a4751a514fec8a5744e6e208270a.jpg" width="810" height="877" usemap="#map"/>
</div>
<map name="map">
<area shape="rect" coords="458,133,586,179" alt="A" href="A.htm">
<area shape="rect" coords="587,133,760,179" alt="B" href="B.htm">
</map>
<img src="http://sarjakuvat.eurocomics.info/dcomics/pics/aku_ankka.gif"
height="46"
width="128"
</body>Mod. lisäsi kooditagit!
Esimerkkisi kaltaiseen asemointiin et edes tarvitse kuvakarttoja. Voit asemoida linkit absoluuttisesti taustakuvan päälle, ja laittaa hover-kuvat a-elementtien sisään. Tällä tavalla myös linkit ovat aina oikean kokoisia ja kuvat oikeilla paikoilla.
<!DOCTYPE html>
<html>
<head>
<style>
#A1 {
position: relative;
}
#A1 a {
position: absolute;
}
#A1 a img {
visibility: hidden;
}
#A1 a:hover img {
visibility: visible;
}
</style>
</head>
<body>
<div id="A1">
<img src="http://koululainen.fi/s/userfiles/gallery/4ce8a4751a514fec8a5744e6e208270a.jpg" width="810" height="877">
<a href="A.htm" style="left: 458px; top: 133px;">
<img src="http://sarjakuvat.eurocomics.info/dcomics/pics/aku_ankka.gif" height="46" width="128">
</a>
</div>
</body>
</html>Iso kiitos, tällä lähti homma hienosti pelittämään :)
Aihe on jo aika vanha, joten et voi enää vastata siihen.