för muspekaren över bilden
hur man gör?
I exemplet används PAINT SHOP PRO 4.12 (PSP4) för att rita
bilderna och Anteckningar/ Notepad för att få dem att "röra på sig".
Paint Shop Pro finns i en
shareware-version
som man kan ta hem och
använda gratis ett tag.
Adressen är
 
http://www.jasc.com
|
|
1 Välj File/ New. Välj (lagom knapp-) storlek och 16.7 million colors i
rutan som visas. |
|
|
2 Välj Image/ Special Effects/ Buttonize...
I den dialogruta som visas när man klickat på Buttonize kan man
välja Edge Size (kantbredd) och Transparent (1)
eller Solid Edge (2).
Hur knappen kommer att se ut påverkas också av vilka färger man har
valt i färgrutorna.
|
1
2
|
|
Om Buttonize inte
är valbart beror det på att för få färger används. Välj då först
Colors/ Increase Color Depth/ 16 million colors |
Om man vill lägga till en skugga "under knappen"
kan man göra så här:
|
|
3
Välj Image/ Enlarge Canvas... Välj en bredd
och en höjd som är större än bilden och se till så att rutan
Center image är ikryssad. (Bildens storlek
syns (i PSP4) längst ner till höger i fönsterlisten när man för
muspekaren över bilden.)
|
|
|
4
Välj Selection-verktyget (klicka på den knapp som är försedd
med en bild av en streckad rektangel) och markera själva knappen
(klicka med vänster musknapp i ett av hörnen, håll ner knappen och
dra musen till det diagonalt motsatta hörnet och släpp musknappen)
|
|
|
4
Välj Image/ Special Effects/ Add drop shadow. Skuggans
placering och storlek kan man reglera antingen genom att dra pilarna
med muspekaren eller skriva in siffror i rutorna under (ett minustecken
framför en siffra placerar skuggan till vänster om/ över knappen).
I rutan kan man bland annat också välja Opacity (grad av genomskinlighet)
och Blur ("suddighet").
|
|
|
4
Välj Selection-verktyget. Markera knappen (från de skugglösa
kanterna) och skuggan. Välj Image/ Crop och beskär
bilden.
Spara bilden som t ex "uppknapp.gif".
|
Knappen i ej nedtryckt tillstånd.
|
4
Välj Window/ Duplicate. Den nya bilden ska alltså
bli knappen i nedtryckt tillstånd. Markera själva knappen
(utan skuggan) med Selection-verktyget. Placera muspekaren över den
valda bilddelen (markören förvandlas till ett
kors), håll ner vänster musknapp och dra sedan
biten tills den täcker skuggan. (Se till så att bildens
bakgrundsfärg är densamma som färgen i den undre av de två
rutorna för vald färg.) Släpp musknappen när bildbiten är
på plats. Måla över diverse rester av skuggan med bakgrundsfärgen.
Spara bilden som t ex "nerknapp.gif".
|
Knappen i nedtryckt tillstånd.
|
Och så här får man knappen att tryckas in
- i de webbläsare där JavaScript fungerar - i
övriga visas bara den bild som angetts i IMG-taggen.
Öppna den HTML-sida där knappen ska användas i t ex Anteckningar/ Notepad.
Klistra in den del av koden som står mellan SCRIPT-taggar någonstans
mellan HEAD-taggarna.
Själva knappen (IMG-taggen) placeras
på vanligt sätt där knappen ska finnas, dvs någonstans mellan
BODY-taggarna.
Allt som är
blått i koden nedan måste ändras! Det gäller
förstås bl a namnet på bildfilerna som används, bildernas
storlek i pixel och min mail-adress(!).
För koden gäller (för enkelhetens skull) att ny rad ska finnas och bara är
OK efter dubbla och feta snedstreck (//).
<SCRIPT LANGUAGE="JavaScript"
TYPE="text/javascript">
<!--//
knapp="uppkapp.jpg"//
nedtryckt="nerknapp.jpg"//
if(document.images)//
{//
bild=new Array()//
bild[0]=new Image()//
bild[1]=new Image()//
bild[0].src=knapp //
bild[1].src=nedtryckt//
}//
function tryckknapp(nummer)//
{//
if(document.images)//
{//
document.iljbild.src=bild[nummer].src//
}//
}//
//-->
</SCRIPT>
<A HREF="mailto:namn@adress.se"
ONMOUSEOVER="tryckknapp(1)"
ONMOUSEOUT="tryckknapp(0)">
<IMG SRC="uppknapp.jpg"
NAME="iljbild"
BORDER="0"
WIDTH="115"
HEIGHT="65"></A>
Snyggare blir det förstås om man använder en
"image map" och ser
till så att det bara är själva knappen
(inte hela bilden) som
reagerar på mouseover.
Sidan gjordes av
ilj@flowsim.se
Senast ändrad 22 mars 2004.
Den här sidan hör hemma i ett ramsystem hos:
www.flowsim.se
Bilder på hemsidan
|