HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

Állóképek jellemzői



Képek beillesztése HTML dokumentumba


Név Érték Leírás Böngészők
src URL Meghatározza a kép forrásának URL-jét. (Név és útvonal.) Chrome logó Firefox logó Safari logó Opera logó IE logó
alt szöveg A képet helyettesítő szöveg, ami akkor jelenik meg, ha a kép nem elérhető. Chrome logó Firefox logó Safari logó Opera logó IE logó
width szám Meghatározza a kép szélességét a weboldalon. Chrome logó Firefox logó Safari logó Opera logó IE logó
height szám Meghatározza a kép magasságát a weboldalon. Chrome logó Firefox logó Safari logó Opera logó IE logó
usemap usemap neve Képtérképet illeszt az állóképhez. Chrome logó Firefox logó Safari logó Opera logó IE logó
A következő böngészők támogatják: Chrome logó Firefox logó Safari logó Opera logó IE logó

Kötelező jellemzője a src (source), ami megadja a kép forrásának URL-jét.

Az alt jellemzővel kell megadni a képet helyettesítő szöveget, ami akkor jelenik meg, ha a kép nem elérhető. A látássérült emberek által használt felolvasó szoftverek az alt attribútum szövegét olvassák fel, így használata az oldal akadálymentesítéséhez is elengedhetetlen.

Érdemes megadni a kép méretét. Széllességét a width, a magasságát a height jellemzővel. Ekkor ugyanis a böngészők a kép letöltése előtt is tudják folytatni az oldal megjelenítését, és nem ugrál az oldal egy-egy kép letöltésének befejezésekor. Fontos, hogy a valós méretet adjuk meg! Hibás méretnél a böngésző torzíthatja (nagyításnál, egy irányú nyújtásnál) a képet, és a számolgatás miatt lassul a megjelenítés.

A title általános jellemző segítségével plusz információt adhatunk a képhez, amelyet a felhasználó akkor lát, ha az egérkurzort a kép fölé mozgatja. Ez a funkció hasznos lehet képes nyomógombok esetében is.

Példa:

Forráskód



A kép Inline elem: <img src="akku.png" alt="akkumulátor" /> a 
sorban előtte állót  követi,<br>   a sor mögötte tovább folytatódik. 
<br> <br>   

Blokkszintű elemmé a stíluslap segítségével tehető.
<img src="akku.png" alt="akkumulátor" style="display:block; float:left"/>
<br>

Érdemes megadni a kép méretét.<br>   

Hibás méretmegadásnál azonban<br>   
a böngésző a képümket torzíthatja.<br><br>     
<img src="akku.png" alt="akkumulátor" height="40" width="300" />

 

Eredmény*


* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: html5_kepek_1.html