skriv ut »IFRAME
En IFRAME (Inline Floating Frames) är en ram som är oberoende av webläsarens fönster avseende storlek och placering. Ett vanligt frameset består ju av två eller flera ramar som storleksmässigt anges i pixlar, procent eller andel förhållande till fönsterstorleken. Läs mer om Frames/Ramar här ». En IFRAME placeras i ett dokument men visar liksom Frames/Ramar innehållet i ett annat källdokument. Den sida som ska visas i IFRAME är alltså en annan HTML-sida som du förberett och sparat tidigare.
IFRAME kan placeras överlappande och kan ha även ha en transparent bakgrund. OBS! Även om IFRAME är standard från och med HTML 4 (läs mer på www.w3c.org) så är stödet begränsat i andra webläsare än Internet Explorer. Överlappande IFRAME använder attributet z-index vilket stöds av IE 4 när det gäller Lager (layers). Z-index för IFRAME stöds däremot bara av IE 5.5 och senare versioner. Om webläsaren inte stöder IFRAME visas inget innehåll alls!
Infoga en IFRAME
En IFRAME definierar du med märket <IFRAME> där du också anger vilken HTML-sida som ska visas i IFRAME.
<iframe src="iframe-sidan.htm" name="iframe" width="200" marginwidth="10" height="200" marginheight="10" scrolling="auto">
</iframe>
</BODY>
Attribut som du kan använda är:
- name
Namn och identifierare på ramen. Används även som mål (target) vid länkning. - width och height
Bredd och höjd på ramen i pixlar. Du kan även ange enheten i procent av webläsarens fönster genom att tex ange enheten % - margin width och margin height
Avståndet från ramkant till innehåll i ramen. - scrolling
auto=vid behov yes=alltid no=aldrig - (tex: scrolling="auto") - frameborder
Visar ramens kantlinje eller ej. Använd värdet 1 eller 0. - (tex: frameborder="0")
Så här kan det se ut i webläsaren:
Klicka här för att se exemplet ovan i ett eget fönster »
Placering av IFRAME i Tabell
Placeringen av en IFRAME i förhållande till webläsarfönstret gör du enklast och mest exakt genom att använda tabeller - läs mer i guiden "Tabeller" » eller med lager (layers). Att lägga innehållet i en tabellcell ger bra möjligheter att placera annat text- och bildinnehåll bredvid innehållet i en IFRAME men i samma tabell. Exemplet nedan ger en tabell med 1 rad och 3 kolumner där IFRAME finns i den mellersta cellen.
<table width="450" border="0" cellpadding="10" cellspacing="0" bgcolor="#DCDCBA">
<tr valign="top">
<td> <p>Din text i första cellen här...</p></td>
<td> <iframe src="iframe-sidan.htm" name="iframe" width="200" height="250" scrolling="auto"></iframe></td>
<td><p>Din text i tredje cellen här...</p></td>
</tr>
</table>
</BODY>
...och så här kan det se ut i webläsaren:
Klicka här för att se exemplet ovan i ett eget fönster »
IFRAME centrerat i fönstret
Vill du ha din IFRAME centrerad vertikalt och horisontellt så att den alltid ligger mitt i webläsarens fönster kan du lägga IFRAME i en tabell med 1 rad och 1 kolumn där tabellen är 100% i både bredd och höjd och cellens innehåll är centrerat. I exemplet nedan ligger IFRAME i en tabell som består av endast 1 rad och 1 kolumn vilket är detsamma som 1 cell. Bakgrundsbilden på sidan är då oberoende av storlek och placering av IFRAME till skillnad från om du försöker få samma layout i ett vanligt frameset (ramar).
Så här kan det se ut i webläsaren:
Klicka här för att se exemplet ovan i ett eget fönster »
<table width="100%" height="100%" border="0">
<tr>
<td align="center" valign="middle">
<iframe src="iframe-sidan.htm" name="iframe" width="300" height="300" scrolling="auto" frameborder="0"></iframe>
</td>
</tr>
</table>
</BODY>
Transparent IFRAME
IFRAME kan ha egenskapen transparens (opacitet) och visa innehållet som finns bakom ramen. För att det ska fungera måste du ange transparens på två ställen:
Förutsättning 1:
I koden som anger IFRAME måste attributet allowtransparency="true" finnas med:
<table width="100%" height="100%" border="0">
<tr>
<td align="center" valign="middle">
<iframe src="iframe-sidan.htm" name="iframe" width="300" height="300" scrolling="auto" frameborder="0" allowtransparency="true"></iframe>
</td>
</tr>
</table>
</BODY>
Förutsättning 2:
I bakgrundens egenskaper på den sida som ska visas i IFRAME måste attributet style="background-color:transparent" finnas med inom <BODY>:
Så här kan det se ut i webläsaren:
Klicka här för att se exemplet ovan i ett eget fönster »
Halvtransparent IFRAME
IFRAME kan ha egenskapen Alpha (genomskinlighet) och visa innehållet som finns bakom ramen. Egenskapen Alpha anges som ett attribut till <BODY> i den HTML-sida som ska synas i IFRAME. Det finns en nackdel med filtret Alpha och det är att även innehållet på sidan blir genomskinligt. I bakgrundens egenskaper på den sida som ska visas i IFRAME måste attributet style="filter: Alpha(Opacity=X)"" finnas med inom <BODY>. Där värdet anges mellan 1 och 100 för önskad opacitet:
Så här kan det se ut i webläsaren:
Klicka här för att se exemplet ovan i ett eget fönster »
Placering av IFRAME med koordinater
Genom att ge IFRAME en positionering med hjälp av X- och Y-koordinater får ramen liknande egenskaper som ett lager (layer). Exemplet nedan visar hur du ger din IFRAME en exakt position på sidan med hjälp av attributet style="position..." där du anger om du vill ha en absolut eller relativ placering av IFRAME.
Absolut position
I exemplet nedan anges att ramen ska placeras i en absolut position av 100 pixlar från vänsterkant och 100 pixlar från överkant av webläsarens fönster:
<iframe src="iframe-sidan.htm" name="iframe" width="250" height="250" scrolling="auto" style="position:absolute; left:100px; top:100px">
</iframe>
</BODY>
Så här kan det se ut i webläsaren:
Klicka här för
att se exemplet ovan i ett eget fönster »
Relativ position
Du kan även ange att positionen ska vara relativ i förhållande till annat innehåll på sidan. Risken är då mindre att IFRAME hamnar framför andra bilder och text på sidan. I exemplet nedan är IFRAME placerad 100 pixlar ifrån objektet som i detta fall är en tabell:
<table width="250" border="1">
<tr>
<td><p>Tabellens innehåll...</p></td>
</tr>
</table>
<iframe src="iframe-text.htm" width="250" height="250" scrolling="auto" style="position:relative; left:100px; top:100px">
</iframe>
</BODY>
Så här kan det se ut i webläsaren:
Klicka här för att se exemplet ovan i ett eget fönster »
Om positionen istället anges med absoluta koordinater kan IFRAME hamna ovanför andra objekt:
Klicka här för att se exemplet ovan i ett eget fönster »
Länka till en sida i IFRAME
Att länka till en IFRAME fungerar likadant som att länka till en ram i ett Frameset. Målet för länken är detsamma som ramens namn vilket i detta fall är namnet på IFRAME. Prova länkarna nedan som öppnar sidor i 3 olika IFRAME:
Koden för länken som öppnar en sida i IFRAME kan se ut så här:
OBS! Målet för länken är namnet på den IFRAME du vill att sidan ska öppnas i. Koden för en IFRAME som är målet för länken ovan kan se ut så här:
<iframe src="iframe-sidan.htm"
name="iframe"
width="150" height="150">
</iframe>
</BODY>
Formatering av IFRAME
Med hjälp av CSS kan du formatera de flesta HTML-objekt och så även IFRAME. Läs mer om CSS i övningen "CSS - Stilmallar" » En vanlig formatering kan tex gälla kantlinjer och bläddringslister. I alla exemplen nedan är kantlinjen borttagen med attributet frameborder="0". Byt ut färgkoder, kantlinjetyp och tjocklek i exemplen nedan. Några olika varianter av kombinationen av kantlinjestil och bläddringslister ser du nedan. Prova att bläddra i exemplen! Grundkoden för exemplen nedan är:
| style="border: 2px solid #6699FF;" | style="border-top: 2px solid #CC6630; border-bottom: 2px solid #CC6630;" | style="border: 2px dotted #CC3366;" |
(Anges i koden för sidan som visas i IFRAME) <HEAD> |
style="border: 1px solid #666666;" (bläddringslister på samma sätt som visas till vänster) |
style="border: 5px double #ACBBEC;" |