Aktiivisen kuvan luominen

Liitä ensimmäiseksi sivulle normaalisti kuva, josta haluat tehdä aktiivisen kuvan. Huomaa, että aktiiviseksi aiottua kuvaa ei voi suurentaa tai pienentää enää selaimessa, joten tee siitä suoraan lopullisen kuvan kokoinen photoshopissa. Sen jälkeen aloita kuvaan liitettävän kuvakartan (Image map) tekeminen klikkaamalla piirrettävää muotoa vastaavaa symbolia. Vaihtoehtoina ovat nelikulmio, ympyrä ja monikulmio. Symbolit löytyvät properties-ikkunan alareunasta kun kuva on valittuna:

Vaihtoehtoisesti symbolit löytyvät myös Common-työkalupalkilta kuva-symbolin alta:

Nyt piirretään kuvaan alue, jota klikattaessa halutaan linkin aukeavan. Valittu alue näkyy vihertävänä:

Kun alue on saatu piirretyksi, properties-ikkunan sisältö muuttu nyt linkkiä vastaavaksi, jossa voidaan antaa kartalle nimi (jos sivulla on useampia aktiivisia kuvia tulee niillä jokaisella olla oma nimensä). Kohdekehys, johon linkki aukeeaa ja mahdollinen vaihtoehtoinen teksti:

Jos klikataan kansion kuvaa aukeaa ikkuna, jossa voidaan määritellä haluttu linkki:

Kun linkit on piirretty, ne näkyvät kuvan päällä vihreinä alueina. Alueet voivat mennä päällekkäin, jolloin listassa ylempänä oleva linkki toimii. Näin ollen lopuksi voidaan määritellä koko kuvan kokoinen alue, johon päädytään jollei klikata mitään aiemmin lueteltua kohtaa. Huomaa, jos kuvalle on määritetty sekä tavallinen linkki että kuvakartta, niin tällöin vain kuvakartta toimii.

Koodina kuvakartta ja kuva näyttävät tältä. Huomaa, että kuvakartan ei tarvitse sijaita itse kuvan läheisyydessä. Riittää vain, että kuvakartalla ja kuvalla on sama nimi:

<map name="kiekko">
<area alt="" shape="poly" coords="28,203,298,296,299,18,137,42" href="vesitot.htm">
<area alt="" shape="poly" coords="302,19,303,293,571,206,513,48" href="opastus.htm">
<area alt="" shape="poly" coords="303,297,565,212,583,413,468,522" href="viestinta.htm">
<area alt="" shape="poly" coords="298,299,125,541,311,589,455,522" href="matvirrat.htm">
<area alt="" shape="poly" coords="29,206,296,296,124,538,20,407" href="elinymp.htm">
<area alt="" shape="rect" coords="0,0,600,598" href="muu.htm">
</map>

<img src="Images\kiekko.jpg" width="600" height="598" border="0" alt="" usemap="#kiekko">

Edellinen Seuraava

Dreamwea-
ver

Käyttöliittymä
Uuden avaus
Väriasetukset
Tekstin kirjoittaminen
Kuvan sijoittaminen
Otsikon laatiminen
Linkit
Taulukot
Kehykset
Aktiivinen kuva
Sivupohja
Sivujen julkaisu
Puhekupla GE:hen

Homesite

Uuden avaus
Väriasetukset
Tekstin kirjoittaminen
Kuvan sijoittaminen Otsikon laatiminen
Linkit
Taulukot
Kehykset
Aktiivinen kuva

Alkuun