47 besökare, 1 medlem och 2 Studenter är online nu
Loopia

Webdesign och HTML

 

IFRAME-exempel

Prova att bläddra i IFRAME nedan:

 

 

Infoga en IFRAME

IFRAME (Inline Frame) är en ram som är oberoende av webbläsaren avseende storlek och placering. IFRAME placeras i ett dokument men visar innehållet från ett annat källdokument. Den sida som ska visas är alltså en annan sida som infogas i IFRAME. Om webbläsaren inte stöder IFRAME visas inget innehåll alls. IFRAME kan placeras överlappande och kan ha även ha en transparent bakgrund. Överlappande IFRAME använder attributet Z-INDEX

Du definierar en IFRAME med märket <IFRAME> där du också anger vilken sida som ska visas i IFRAME.

<body>

<iframe src="iframe-text.htm" name="iframe" width="200" marginwidth="10" height="200" marginheight="10" scrolling="auto">
</iframe>

</body>

Attribut som kan användas ä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 ange enheten i procent % av webbläsarens fönster.
  • margin width - margin height
    Avståndet från ramkanten till innehållet i ramen.
  • scrolling
    auto=vid behov
    yes=alltid
    no=aldrig
    exempel: scrolling="auto"
  • frameborder
    Visar ramens kantlinje eller ej. Ange värdet 1 eller 0.
    exempel: frameborder="0"

 

Så här kan det se ut i webbläsaren:

Klicka här för att se exemplet ovan Öppnas i nytt fönster (Open in new window)

 

Placering av IFRAME

Placeringen av en IFRAME i förhållande till webbläsarfönstret gör du exakt genom att använda boxar <DIV> eller tabeller. Läs mer i guiderna CSS-positionering » och Tabeller - Tables »

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 visar en tabell med 1 rad och 3 kolumner där IFRAME finns i den mellersta cellen.

<body>

<table width="600" border="0" cellpadding="15" cellspacing="0" bgcolor="#EAEAEA">
<tr>
<td valign="top">
<p>Din text i första cellen här</p>
</td>
<td>

<iframe src="iframe-text.htm" name="iframe" width="300" height="300" scrolling="auto">/iframe>
</td>
</tr>
</table>


</body>

Så här kan det se ut i webbläsaren:

Klicka här för att se exemplet ovan Öppnas i nytt fönster (Open in new window)

 

Centrerad IFRAME

Vill du ha din IFRAME centrerad vertikalt och horisontellt så att den alltid ligger mitt i webbläsarens fönster kan du lägga IFRAME i en tabell. Tabellen har 1 rad och 1 kolumn och är 100% i både bredd och höjd och tabellcellens innehåll är centrerat. I exemplet nedan ligger IFRAME i en tabell som består av endast 1 rad och 1 kolumn:

<table width="100%" height="100%" border="0">
<tr>
<td align="center" valign="middle">

<iframe src="iframe-text.htm" name="iframe"
width="600" height="500" marginwidth="20" marginheight="20" scrolling="auto" frameborder="0">
</iframe>

</td>
</tr>
</table>

Så här kan det se ut i webbläsaren:

Klicka här för att se exemplet ovan Öppnas i nytt fönster (Open in new window)

 

Transparens i 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.

I koden som anger IFRAME måste attributet allowtransparency="true" finnas med:

<iframe src="iframe-text.htm" name="iframe" width="600" height="500" marginwidth="20" marginheight="20" scrolling="auto" frameborder="0" allowtransparency="true"></iframe>

Sidan som ska visas i IFRAME får inte ha en bakgrund eller bakgrundsfärg. Du kan använda attributet style="background-color:transparent" inom <BODY>:

<BODY style="background-color:transparent">

Så här kan det se ut i webbläsaren:

Klicka här för att se exemplet ovan Öppnas i nytt fönster (Open in new window)

 

Opacitet i IFRAME

IFRAME kan ha egenskapen Alpha (opacitet) och visa innehållet som finns bakom ramen. Det finns en nackdel med filtret Alpha och det är att även innehållet på sidan blir genomskinligt.

IFRAME kan ha attributet STYLE för att ange opacitet:

<iframe src="iframe-text.htm" name="iframe" width="600" height="500" marginwidth="20" marginheight="20" scrolling="auto" frameborder="0"

style="
background-color: #ffffff;
opacity: 0.5; filter: alpha(opacity=50);
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';

">

</iframe>

Så här kan det se ut i webbläsaren:

Klicka här för att se exemplet ovan  Öppnas i nytt fönster (Open in new window)

 

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 (_target) för länken är detsamma som ramens namn vilket i detta fall är namnet på IFRAME som tex: name="iframe"

Prova länkarna nedan som öppnar sidor i 3 olika IFRAME:

Länk 1 »   [återställ]

Länk 2 »   [återställ]

Länk 3 »   [återställ]

Koden för länken som öppnar en sida i IFRAME kan se ut så här:

<a href="iframe-sidan.htm" target="iframe">Klicka här</a>

Målet för länken är namnet på den IFRAME du vill att sidan ska öppnas i som i exemplet nedan:

<iframe src="iframe-sidan.htm" name="iframe" width="150" height="150"></iframe>

 

 

Formatering av IFRAME

Med hjälp av CSS kan du formatera IFRAME. Läs mer om CSS i guiden CSS - Stilmallar »

En formatering kan gälla kantlinjer och bläddringslister. I alla exemplen nedan är kantlinjen borttagen med attributet frameborder="0" så att CSS-formateringen gäller före IFRAME attributet.

Exempel på CSS-formatering ser du nedan. Grundkoden för exemplen nedan är:

<iframe src="iframe-sidan.htm" name="iframe" width="150" height="150" scrolling="auto"
frameborder="0" style="ange din egen css-formatering här">
</iframe>

 

(ingen CSS-formatering) style="border-top: 1px solid #CC6630;
border-bottom: 1px solid #CC6630;"
style="border: 1px dotted #CC3366;"
     
style="border: 1px solid #6699FF;" style="border: 1px solid #666666;" style="border: 7px double #ACBBEC;"

 

TIPS! Ett alternativ till IFRAME är att göra en box <DIV> med CSS som kan formateras med färger, bakgrunder, kantlinjer och bläddringslister

Läs mer om scrollbox här  »