IMAGE TAGS

NCD HTML Design Guide v6.0

Sponsor's ADs:

+ Image Basic

<img src=#> #=Image URL

Alternate Text <img alt=#>
#= Alternate Text for text browser or one doesn't load images. 

<img src="f.gif" alt="MY FACE :-)">
 MY FACE :-)

Low Source <img lowsrc=#1 src=#2>
#1=Low Source Image URL (to load fast)
#2=Final Image URL




+ Image aligned with Text

<img align=#> #=top, middle, bottom,

<img align=#> #=absmiddle, absbottom, texttop, baseline

<img src=URL align=top> 
My face! <img src=heno01.gif>
 (^_^) My Face!
  
<img src=URL align=middle> 
My face! <img src=heno01.gif>
 (^_^) My Face!
  
<img src=URL align=bottom> 
My face! <img src=heno01.gif>
 (^_^) My Face!
  
<img src=URL align=texttop> 
My face! <img src=heno01.gif>
 (^_^) My Face!
  
<img src=URL align=absmiddle> 
My face! <img src=heno01.gif>
 (^_^) My Face!
  
<img src=URL align=absbottom> 
My face! <img src=heno01.gif>
 (^_^) My Face!
  
<img src=URL align=baseline> 
My face! <img src=heno01.gif>
 (^_^) My Face!
 


+ Floating Image

<img align=left> 

<img src=URL align=left>
My Face!<br>
It is always<br>
smiling.<br>
Hahaha....<br>
 (^_^)My Face!
It is always
smiling.
Hahaha....



<img align=right>
(^_^)My Face!
It is always
smiling.
Hahaha....



<br clear=#>    #=left, right, all 

<img src=URL align=left>My Face!<br>
It is always
<br clear=all>
smiling.<br>
Hahaha....<br>
 (^_^)My Face!
It is always

smiling.
Hahaha....


<img vspace=# hspace=#> #=value 

<img src=URL align=left 
vspace=10 hspace=20>My Face!<br>
It is always<br>
smiling.<br>
Hahaha....<br>
 (^_^)My Face!
It is always
smiling.
Hahaha....



+ Image Size

<img width=# height=#> #=value 

<img src=URL.gif
 width=100 height=30>
 (^_^)


+ Border Line

<img border=#> #=value 

<a href="URL.htm">
<img src=URL.gif border=15>
</a>
 (^_^)


+ Client Side Image Map

<img src=img.gif usemap="MAP-Name">

<map name="MAP-Name">
<area shape="#" coords="#" href="url">
<area shape="#" coords="#" nohref>
</map>

#    shape="rect" coords="A,A',B,B'"
          (A,A')=Upper Left, (B,B')=Lower Right
      shape="circle" coords="A,A',R'"
          (A,A')=Center, R=Radius
      shape="poly" coords="A,A',B,B',C,C'..."
          (A,A'>=First Corner, (B,B')=Second Corner, ... 



<img src="mapimg.gif"
             usemap="#Face">

<map name="Face">

<!--FACE no link area-->
   <area shape="circle" 
    nohref
    coords="80,100,20">

<!--Text BUTTON-->
   <area shape="rect"
    href="page.html" 
    coords="140,20,280,60">

<!--Triangle BUTTON-->
   <area shape="poly"
    href="image.html"
    coords="100,100,180,80,200,140">

<!--FACE-->
   <area shape="circle" 
    href="new.html" 
    coords="80,100,60">

</map>



HTML Design Guide | Style Sheet Guide
Document | Page | Font | Text | Image | Form | Table | Frame | Objects | XML
HTML TAG LIST | PDF Edition

BACK TO NCD HOME
Network Communication Design - /
 Copyright & Publishing 1994-2008 Network Communication Design