Kuvaan voi laittaa ns. hotspotteja. Nämä saa näppärästi luotua esim. Gimpillä.
Muutetaan kuva täsmälleen saman kokoiseksi kuin se näytetään sivulla.
mennään valikossa
Suotimet -> Web -> Kuvakartta
Lisätään kuvaan tarvittavat pisteet. ÄLÄ LAITA MUUTA KUIN LINKIKSI
#
Kun kaikki on valittu tallennetaan se jollain nimellä ja loppupäätteksi tulee
map
- avaakuvat.zip
- Tarvittavat tiedostot
- (2.63 KiB) Tiedosto ladattu 1293 kertaa
Ladataan hakemistoon js tiedosto
avaakuva.js isätään CMS:n sivupohjaan:
Koodi: Valitse kaikki
a
{literal}
<script type="text/javascript" src="/uploads/js/avaakuva.js">
</script>
{/literal}
Lisätään sivulle johon kuva halutaan lähdekoodi map-tiedostosta ja muokataan polut oikeiksi.
Esim.
Koodi: Valitse kaikki
<img usemap="#map" src="uploads/images/vaunu.jpg" border="0" alt="" width="650" height="443" />
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in --> <!-- #$-:GIMP Image Map plug-in by Maurits Rijk --> <!-- #$-:Please do not edit lines starting with "#$" --> <!-- #$VERSION:2.3 --> <!-- #$AUTHOR:Eero -->
<area onmouseover="tooltip.show('img src=\'uploads/images/popup/kuva1.png\'/');" onmouseout="tooltip.hide();" shape="rect" coords="177,189,271,233" href="#" target="kuva1" />
<area onmouseover="tooltip.show('img src=\'uploads/images/popup/kuva2.png\'/');" onmouseout="tooltip.hide();" shape="rect" coords="419,278,490,442" href="#" target="kuva2" />
</map>
Lisätään vielä tyylitiedostoon tyyli josta saadaan säädettyä kuvan paikka. Muista polut.
Koodi: Valitse kaikki
/* Kuvalinkit */
#tt {
position:absolute;
display:block;
background:url(uploads/images/popup/pohja/tt_left.gif) top left no-repeat;
}
#tttop {
display:block;
height:5px;
margin-left:5px;
background:url(uploads/images/popup/pohja/tt_top.gif) top right no-repeat;
overflow:hidden;
}
#ttcont {
display:block;
padding:2px 12px 3px 7px;
margin-left:5px;
background:#666;
color:#fff;
}
#ttbot {
display:block;
height:5px;
margin-left:5px;
background:url(uploads/images/popup/pohja/tt_bottom.gif) top right no-repeat;
overflow:hidden;
}
Voidaan käyttää kuvan tilalle tekstiä. Silloin laitetaan seuraava:
Koodi: Valitse kaikki
onmouseover="tooltip.show('Testing 123 ', 200);"
onmouseout="tooltip.hide();"