Aktiivisen kuvan luominen

Liitä ensimmäiseksi sivulle 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 sen symbolia:

Valinnasta aukeaa ikkuna, jossa valitaan se sivuilla olevista kuvista, johon kuvakartan halutaan liittyvän. Tässä ikkunassa kartalle tulee antaa myös nimi:

Kuvakarttaeditorin ylänurkassa valitaan, minkä muotoinen alue valitaan linkiksi. Vaihtoehtoina ovat nelikulmio, ympyrä ja monikulmio:

Tämän jälkeen piirretään hiirellä alue, jota klikkaamalla päästään nyt luotavaan linkkiin:

 

Kun linkit on piirretty, ne ilmestyvät oikeaan reunaan listaksi. Lopuksi voidaan määritellä osoite, johon päädytään klikkaamaalla jotain muuta, kuin edellä lueteltuja kohtia. Tällöin määriteltävän alueen muodoksi annetaan default tai rect koko kuvan koordinaatteilla.

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="default" 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