Scribd Logo
Importer

Bienvenue sur Scribd !

  • HTML Image Tutorial

    Transféré par

    Nazish Nouman
    26 vues6 pages
    Borders Fixed Backgrounds Height and Width Hspace Image Map (Client-Side) Linked Rollover (JavaScript) text between 2 images Two SRC's in one tag (external link)

    Description originale:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    Borders Fixed Backgrounds Height and Width Hspace Image Map (Client-Side) Linked Rollover (JavaScript) text between 2 images Two SRC's in one tag (external link)

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    26 vues6 pages

    HTML Image Tutorial

    Transféré par

    Nazish Nouman
    Borders Fixed Backgrounds Height and Width Hspace Image Map (Client-Side) Linked Rollover (JavaScript) text between 2 images Two SRC's in one tag (external link)

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 6

    Image Tags Examples

    Borders Fixed Backgrounds Height & Width Hspace Image Map (Client-Side)

    Linked Rollover (JavaScript) Text between 2 images Two SRC's in one tag (External Link) Vspace

    BORDERS

    Default border of 0: <IMG SRC="redball.gif" ALT="*">

    Border="1": <IMG BORDER="1" SRC="redball.gif" ALT="*">

    Border="5": <IMG BORDER="5" SRC="redball.gif" ALT="*">

    Changing color of border <FONT COLOR="green"><IMG BORDER="5" SRC="redball.gif" ALT="TOC"></FONT>

    Table of Contents

    FIXED BACKGROUND

    Example code #1: <BODY BACKGROUND="bfly4.gif" BGPROPERTIES="fixed"> Result of code: the following link will take you to a test page with the above example code for its body tag. Fixed background text page. Doesn't work in Firefox Table of Contents

    Example code #2: Place in <head> section: <style type="text/css"> <!-- BODY{ backgroundrepeat : no-repeat; background-attachment : fixed;background-position : right top; } // --> </style> <BODY BACKGROUND="images/clouds.jpg"> Of course, if you want to use an external style sheet, and want to apply the same style to all pages, including the same background image, place the CSS above into an external style sheet and add the following to the BODYstyles: background-image : url(images/clouds.jpg); --> Result of code: the following link will take you to a test page with the above example code for its body tag. Fixed background text page.

    Table of Contents

    HEIGHT & WIDTH

    Default:
    Unaltered size of redball.gif is 14 x 16 (width x height)

    <IMG SRC="redball.gif" ALT="*">

    HEIGHT="32": <IMG SRC="redball.gif" HEIGHT="32" ALT="*">

    WIDTH="28": <IMG SRC="redball.gif" WIDTH="28" ALT="*">

    HEIGHT="16" WIDTH="28": <IMG SRC="redball.gif" HEIGHT="16" WIDTH="28" ALT="*">

    Table of Contents

    Image Map
    Example Code
    <MAP NAME="example"> <AREA SHAPE=RECT COORDS="165,0,320,69" HREF="#TOC"> <AREA SHAPE=CIRCLE COORDS="202,139,71" HREF="index.htm"> <AREA SHAPE=POLY COORDS="42,27,0,123,1,183,4,182,21,208,22,208,52,208,52, 208,42,30" HREF="#TOC"> <AREA SHAPE=RECT COORDS="59,0,130,210" HREF="dblimage.htm"> </MAP> <P> <IMG BORDER="0" SRC="flowrs.gif" WIDTH="320" HEIGHT="240" USEMAP="#example">

    Result of code

    Table of Contents

    HSPACE
    Example Code
    Preceeding text<IMG SRC="redball.gif" ALT="*" HSPACE="20">following text.

    Result of example code Preceeding text text. following

    Example Code
    Preceeding text<IMG SRC="redball.gif" ALT="*" HSPACE="40">following text.

    Result of example code Preceeding text text. following

    Table of Contents

    LINKED
    (Clicking on the images will send you to the top of this page.)

    Linked In-line image with border="0": <A HREF="#TOC"><IMG BORDER="0" SRC="redball.gif" ALT="*"></A>

    Linked In-line image (with default border of 1) <A HREF="#TOC"><IMG SRC="redball.gif" ALT="TOC"></A>

    Linked In-line image with border="5" <A HREF="#TOC"><IMG BORDER="5" SRC="redball.gif" ALT="TOC"></A>

    Changing color of border


    Note: you may have to hit reload, as the below coding affects link color but not visited link color.

    <A HREF="#TOC"><FONT COLOR="green"><IMG BORDER="5" SRC="redball.gif" ALT="TOC"></FONT></A>

    Table of Contents

    ROLLOVER
    (JavaScript)

    <A HREF="#TOC" onMouseOver="document.roll.src='crit_gd.gif'" onMouseOut="document.roll.src='crit_so.gif'"><IMG BORDER="0" NAME="roll" SRC="crit_so.gif" ALT="*"></A>

    Position cursor over image to initiate rollover Table of Contents

    TEXT BETWEEN 2 IMAGES


    <CENTER> <IMAGE ALIGN="LEFT" VALIGN="MIDDLE" SRC="redball.gif" ALT="*"> <IMAGE ALIGN="RIGHT" VALIGN="MIDDLE" SRC="redball.gif" ALT="*"> An example of centering text between two images. </CENTER> An Example of centering text between two images. Table of Contents

    VSPACE
    Example Code
    First line of text.<BR> <IMG SRC="redball.gif" ALT="*" VSPACE="20"><BR> Second line of text.

    Result of example code First line of text. Second line of text. Result of example code

    Example Code

    First line of text.<BR> <IMG SRC="redball.gif" ALT="*" VSPACE="40"><BR> Second line of text.

    First line of text. Second line of text.

    Vous aimerez peut-être aussi