Using huge image to highlight your content : img « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. img

Using huge image to highlight your content

      
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>2 Breed</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
  margin: 0px;
  padding: 0px;
  background: #414141
}

#topContentWrap {
  width: 100%;
  margin: 0px;
  padding: 0px;
  float: left;
  background: #f9f7db url(2-breed-images/bodyBg.jpg) repeat-x
}

#topContent {
  width: 928px;
  margin: 0 auto;
  padding: 0px
}

#logoPanel {
  width: 75px;
  height: 740px;
  margin: 0px;
  padding: 0px;
  float: left;
  text-indent: -9999px;
  background: url(2-breed-images/globalpic.jpg) no-repeat
}

#logoPanel h1 {
  width: 75px;
  height: 740px;
  margin: 0px;
  padding: 0px;
  float: left;
  text-indent: -9999px;
}

#aboutPanel {
  width: 216px;
  height: 715px;
  margin: 0px;
  padding: 0px;
  float: left;
  background: #cd4007 url(2-breed-images/globalpic.jpg) no-repeat -77px
    -494px
}

#home {
  width: 47px;
  height: 110px;
  margin: 0px;
  padding: 0 0 0 169px;
  float: left
}

#home a {
  width: 47px;
  height: 36px;
  margin: 0px;
  padding: 56px 0 0 0;
  float: left;
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
  color: #646464;
  line-height: 13px;
  text-align: center;
  text-decoration: none;
  background: url(2-breed-images/homeBg.gif) no-repeat
}

#home a:hover {
  height: 36px;
  padding: 74px 0 0 0;
  background: url(2-breed-images/homeBg.gif) no-repeat -48px 0
}

#aboutPanel h2 {
  width: 170px;
  margin: 199px 0 0 0;
  padding: 0 0 0 24px;
  float: left;
  font-family: Arial;
  font-size: 26px;
  color: #FFFFFF;
  line-height: 30px;
  font-weight: normal
}

#aboutPanel h3 {
  width: 170px;
  margin: 8px 0 0 0;
  padding: 0 0 0 24px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #ffe996;
  line-height: 19px;
  font-weight: bold
}

#aboutPanel p {
  width: 170px;
  margin: 20px 0 0 0;
  padding: 0 0 0 24px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #f8d85e;
  line-height: 19px
}

#aboutPanel p a {
  color: #f8d85e;
  background: #9f3105;
  text-decoration: none
}

#aboutPanel p a:hover {
  background: #812a08
}

#aboutPanel .read {
  width: 62px;
  height: 23px;
  margin: 0px;
  padding: 0 0 0 131px;
  float: left
}

#aboutPanel .read a {
  width: 62px;
  height: 23px;
  margin: 0px;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 11px;
  color: #d9d9d9;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  background: url(2-breed-images/buttons.jpg) no-repeat
}

#aboutPanel .read a:hover {
  color: #cd4007
}

#eventPanel {
  width: 216px;
  height: 715px;
  margin: 0px;
  padding: 0px;
  float: left;
  border-left: #f3f1d2 solid 1px;
  background: #9fb31a url(2-breed-images/globalpic.jpg) no-repeat -294px
    -494px
}

#about {
  width: 47px;
  height: 110px;
  margin: 0px;
  padding: 0 0 0 169px;
  float: left
}

#about a {
  width: 47px;
  height: 36px;
  margin: 0px;
  padding: 56px 0 0 0;
  float: left;
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
  color: #646464;
  line-height: 13px;
  text-align: center;
  text-decoration: none;
  background: url(2-breed-images/about.gif) no-repeat
}

#about a:hover {
  height: 36px;
  padding: 74px 0 0 0;
  background: url(2-breed-images/about.gif) no-repeat -48px 0
}

#eventPanel h2 {
  width: 170px;
  margin: 199px 0 0 0;
  padding: 0 0 0 24px;
  float: left;
  font-family: Arial;
  font-size: 26px;
  color: #FFFFFF;
  line-height: 30px;
  font-weight: normal
}

#eventPanel h3 {
  width: 170px;
  margin: 8px 0 0 0;
  padding: 0 0 0 24px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #ffe996;
  line-height: 19px;
  font-weight: bold
}

#eventPanel ul {
  width: 170px;
  margin: 8px 0 0 0;
  padding: 0 0 0 24px;
  float: left;
  display: block
}

#eventPanel ul li {
  width: 170px;
  margin: 3px 0 0 0;
  padding: 0 0 14px 0;
  float: left;
  display: block
}

#eventPanel ul li h2 {
  width: 170px;
  margin: 0px;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #ffffff;
  line-height: 14px;
  font-weight: bold
}

#eventPanel ul li p {
  width: 170px;
  margin: 5px 0 0 0;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #f2ff9a;
  line-height: 19px
}

#eventPanel ul li p a {
  font-size: 12px;
  color: #f2ff9a;
  float: none;
  background: #75850e
}

#eventPanel ul li p a:hover {
  color: #f2ff9a;
  background: #525d08
}

#eventPanel ul li a {
  width: 62px;
  height: 23px;
  margin: 14px 0 0 0;
  padding: 0px;
  float: right;
  font-family: Arial;
  font-size: 11px;
  color: #d9d9d9;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  background: url(2-breed-images/buttons.jpg) no-repeat -62px 0
}

#eventPanel ul li a:hover {
  color: #9fb31a
}

#rightPanel {
  width: 400px;
  margin: 0px;
  padding: 0 0 0 20px;
  float: left
}

#menu {
  width: 191px;
  margin: 22px 0 0 0;
  padding: 0 34px 0 0;
  float: left
}

#menu ul {
  width: 191px;
  margin: 0px;
  padding: 0px;
  float: left;
  display: block
}

#menu ul li {
  width: 191px;
  margin: 0px;
  padding: 0px;
  float: left;
  display: block
}

#menu ul li a {
  width: 176px;
  height: 24px;
  margin: 0px;
  padding: 0 0 0 15px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #636038;
  line-height: 22px;
  font-weight: bold;
  text-decoration: none;
  border-bottom: #b1ae7e dotted 1px;
  background: url(2-breed-images/liststyle.jpg) no-repeat 0 7px
}

#menu ul li a:hover {
  color: #75850e
}

#menu ul li a.bottom {
  width: 176px;
  height: 24px;
  margin: 0px;
  padding: 0 0 0 15px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #636038;
  line-height: 22px;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 0px;
  background: url(2-breed-images/liststyle.jpg) no-repeat 0 7px
}

#menu ul li a.bottom:hover {
  color: #9fb31a
}

#addBlock {
  width: 171px;
  height: 195px;
  margin: 22px 0 0 0;
  padding: 0px;
  float: left;
  background: url(2-breed-images/globalpic.jpg) no-repeat -337px -110px
}

#rightPanel h2 {
  width: 343px;
  height: 44px;
  margin: 29px 0 0 0;
  padding: 0 0 0 57px;
  float: left;
  font-family: Arial;
  font-size: 34px;
  color: #cb3e07;
  line-height: 40px;
  font-weight: normal;
  background: url(2-breed-images/globalpic.jpg) no-repeat -467px -308px
}

#additionalLinks {
  width: 400px;
  margin: 0px;
  padding: 0px;
  float: left
}

#additionalLinks ul {
  width: 400px;
  margin: 12px 0 0 0;
  padding: 0px;
  float: left;
  display: block
}

#additionalLinks ul li {
  width: 400px;
  margin: 0px;
  padding: 0px;
  float: left;
  display: block
}

#additionalLinks ul li a {
  width: 371px;
  height: 27px;
  margin: 3px 0 0 0;
  padding: 0 0 0 27px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #3b3a2b;
  line-height: 25px;
  text-decoration: none;
  background: url(2-breed-images/globalpic.jpg) no-repeat -75px -83px
}

#additionalLinks ul li a:hover {
  color: #9fb31a
}

#iconLinks {
  width: 400px;
  height: 101px;
  margin: 25px 0 0 0;
  padding: 0px;
  float: left
}

#iconLinks .ideas {
  width: 78px;
  height: 51px;
  margin: 0px;
  padding: 50px 0 0 49px;
  float: left;
  font-family: Arial;
  font-size: 10px;
  color: #a8a8a8;
  line-height: 14px;
  text-decoration: none;
  background: url(2-breed-images/globalpic.jpg) no-repeat -77px -392px
}

#iconLinks .blank {
  width: 9px;
  height: 101px;
  margin: 0px;
  padding: 0px;
  float: left
}

#iconLinks .signup {
  width: 78px;
  height: 51px;
  margin: 0px;
  padding: 50px 0 0 49px;
  float: left;
  font-family: Arial;
  font-size: 10px;
  color: #a8a8a8;
  line-height: 14px;
  text-decoration: none;
  background: url(2-breed-images/globalpic.jpg) no-repeat -204px -392px
}

#iconLinks .blog {
  width: 78px;
  height: 51px;
  margin: 0px;
  padding: 50px 0 0 49px;
  float: left;
  font-family: Arial;
  font-size: 10px;
  color: #a8a8a8;
  line-height: 14px;
  text-decoration: none;
  background: url(2-breed-images/globalpic.jpg) no-repeat -331px -392px
}

#newsLetter {
  width: 284px;
  height: 71px;
  margin: 25px 0 0 0;
  padding: 10px 0 0 114px;
  float: left;
  background: url(2-breed-images/globalpic.jpg) no-repeat -75px 0
}

#newsLetter h3 {
  width: 284px;
  margin: 0px;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 18px;
  color: #212121;
  line-height: 22px
}

#newsLetter input {
  width: 206px;
  height: 18px;
  margin: 5px 0 0 0;
  padding: 3px 0 0 0;
  float: left;
  font-family: Arial;
  font-size: 10px;
  color: #212121;
  line-height: 14px
}

#newsLetter a {
  width: 41px;
  height: 23px;
  margin: 4px 0 0 0;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 11px;
  color: #FFFFFF;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
  background: url(2-breed-images/globalpic.jpg) no-repeat -75px -226px
}

#newsLetter .blank {
  width: 7px;
  height: 10px;
  margin: 0px;
  padding: 0px;
  float: left
}

#middleWrap {
  width: 100%;
  margin: 0px;
  padding: 0px;
  float: left;
  background: #e9e6c3 url(2-breed-images/middleBg.jpg) repeat-x
}

#middlePanel {
  width: 928px;
  margin: 0 auto;
  padding: 0px
}

#middlePanel .left {
  width: 473px;
  margin: 0px;
  padding: 0 31px 34px 26px;
  float: left
}

#middlePanel .left h2 {
  width: 423px;
  height: 38px;
  margin: 24px 0 0 0;
  padding: 0 0 0 50px;
  float: left;
  font-family: Arial;
  font-size: 34px;
  color: #1d1d1d;
  line-height: 38px;
  font-weight: normal;
  background: url(2-breed-images/globalpic.jpg) no-repeat -474px -357px
}

#middlePanel .left p {
  width: 470px;
  margin: 9px 0 0 0;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #575433;
  line-height: 19px
}

#middlePanel .left p span {
  font-weight: bold;
  color: #8da00d
}

#middlePanel .left a {
  width: 62px;
  height: 23px;
  margin: 7px 0 0 0;
  padding: 0px;
  float: right;
  font-family: Arial;
  font-size: 11px;
  color: #FFFFFF;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
  background: url(2-breed-images/globalpic.jpg) no-repeat -117px -226px
}

#loginPanel {
  width: 202px;
  height: 184px;
  margin: 19px 0 0 0;
  padding: 0px;
  float: left;
  border: #d7d3aa solid 1px;
  background: #f1eed0
}

#loginPanel h2 {
  width: 169px;
  height: 34px;
  margin: 0px;
  padding: 0 0 0 33px;
  float: left;
  font-family: Arial;
  font-size: 18px;
  color: #212121;
  line-height: 30px;
  font-weight: normal;
  background: #ffffff url(2-breed-images/globalpic.jpg) no-repeat -483px
    -399px
}

#loginPanel h3 {
  width: 168px;
  margin: 8px 0 0 0;
  padding: 0 17px 0 17px;
  float: left;
  font-family: Arial;
  font-size: 10px;
  color: #1d1d1d;
  line-height: 14px;
  font-weight: normal
}

#loginPanel input {
  width: 167px;
  height: 18px;
  margin: 3px 0 0 0;
  padding: 3px 0 0 0;
  float: left;
  font-family: Arial;
  font-size: 10px;
  color: #212121;
  line-height: 14px
}

#loginPanel .blank {
  width: 17px;
  height: 10px;
  margin: 0px;
  padding: 0px;
  float: left
}

#loginPanel p {
  width: 127px;
  margin: 9px 0 0 0;
  padding: 0 0 0 17px;
  float: left
}

#loginPanel p a {
  font-family: Arial;
  font-size: 12px;
  color: #9fb31a;
  font-weight: bold;
  line-height: 16px;
  text-decoration: none;
}

#loginPanel .login {
  width: 41px;
  height: 23px;
  margin: 6px 0 0 0;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 11px;
  color: #FFFFFF;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  background: url(2-breed-images/globalpic.jpg) no-repeat -180px -226px
}

#contact {
  width: 175px;
  height: 107px;
  margin: 21px 0 0 0;
  padding: 0px;
  float: left;
  background: url(2-breed-images/globalpic.jpg) no-repeat -75px -111px
}

#contact p {
  font-family: "Arial Narrow";
  font-size: 26px;
  color: #252525;
  line-height: 30px;
  margin: 10px 0 0 0;
  padding: 0 0 0 28px
}

#gap {
  width: 19px;
  height: 10px;
  margin: 0px;
  padding: 0px;
  float: left
}

#footWrap {
  width: 100%;
  margin: 0px;
  padding: 0 0 23px 0;
  float: left;
  background: url(2-breed-images/footbg.jpg) repeat-x
}

#footPanel {
  width: 928px;
  margin: 0 auto;
  padding: 0px
}

#footNav {
  width: 928px;
  margin: 25px 0 0 0;
  padding: 0px;
  float: left
}

#footNav ul {
  width: 655px;
  margin: 0 auto;
  padding: 0px;
  display: block
}

#footNav ul li {
  width: auto;
  margin: 0px;
  padding: 0px;
  float: left;
  display: block
}

#footNav ul li .blank {
  width: auto;
  margin: 3px 0 0 0;
  padding: 0 7px 0 7px;
  float: left;
  font-family: Arial;
  font-size: 11px;
  color: #d5d5d5;
  line-height: 15px
}

#footNav ul li a {
  font-family: Arial;
  font-size: 11px;
  color: #d5d5d5;
  line-height: 15px;
  text-decoration: none;
  margin: 0px;
  padding: 0px
}

#copyright {
  width: 928px;
  margin: 3px 0 0 0;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 10px;
  color: #9fb31a;
  line-height: 14px;
  text-align: center
}

#validation {
  width: 928px;
  margin: 11px 0 0 0;
  padding: 0px;
  float: left
}

#validation ul {
  width: 132px;
  margin: 0 auto;
  padding: 0px;
  display: block
}

#validation ul li {
  width: auto;
  margin: 0px;
  padding: 0px;
  float: left;
  display: block
}

#validation ul li .blank {
  width: 7px;
  height: 10px;
  margin: 0px;
  padding: 0px;
  float: left
}

#validation ul li a {
  width: 62px;
  height: 23px;
  font-family: Arial;
  font-size: 11px;
  color: #FFFFFF;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
  float: left;
  display: block;
  background: url(2-breed-images/globalpic.jpg) no-repeat -222px -226px
}

#footPanel p {
  width: 928px;
  margin: 7px 0 0 0;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #e9e6c3;
  line-height: 16px;
  font-weight: bold;
  text-align: center
}

#footPanel p a {
  color: #FFF;
  background: #252525;
  text-decoration: none
}
</style>


<link rel="icon" href="2-breed-images/icon.ico" />
</head>
<body>
<div id="topContentWrap">
  <div id="topContent">
    <div id="logoPanel">
      <h1>Make a Different Way of Your Future 2breed</h1>
    </div>
    <div id="aboutPanel">
      <div id="home"><a href="http://www.free-css.com/">Main Page</a></div>
      <h2>Who We Are</h2>
      <h3>arcu purus tempus ipsum,ut malesuada </h3>
      <p>risus augue nec justo. Sed et massa. Ut a quam. Morbi rhoncus justo. Nunc pellentesque nunc a justo. Aliquam ligula elit, <a href="http://www.free-css.com/">commodo</a> nec, dictum ut, tristique eu, magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus cursus</p>
      <div class="read"><a href="http://www.free-css.com/">read more</a></div>
    </div>
    <div id="eventPanel">
      <div id="about"><a href="http://www.free-css.com/">About Us</a></div>
      <h2>Latest Events</h2>
      <h3>arcu purus tempus ipsum,ut malesuada </h3>
      <ul>
        <li>
          <h2>On 12th February 2008</h2>
          <p>Risus augue nec justo. Sed et massa. <a href="http://www.free-css.com/">Ut a quam.</a> Morbi rhoncus justo. Nunc </p>
          <a href="http://www.free-css.com/">read more</a> </li>
        <li>
          <h2>On 12th February 2008</h2>
          <p>Risus augue nec justo. Sed et massa. Ut a quam. Morbi rhoncus justo. Nunc </p>
          <a href="http://www.free-css.com/">read more</a> </li>
      </ul>
    </div>
    <div id="rightPanel">
      <div id="menu">
        <ul>
          <li><a href="http://www.free-css.com/">Client Testimonials</a></li>
          <li><a href="http://www.free-css.com/">Latest Events</a></li>
          <li><a href="http://www.free-css.com/">Our Online Support</a></li>
          <li><a href="http://www.free-css.com/">Solutions</a></li>
          <li><a href="http://www.free-css.com/">Forum</a></li>
          <li><a href="http://www.free-css.com/">What Our Future Plans</a></li>
          <li><a href="http://www.free-css.com/">Projects</a></li>
          <li><a href="http://www.free-css.com/" class="bottom">Contact Us</a></li>
        </ul>
      </div>
      <div id="addBlock"></div>
      <h2>Sociis natoque penati</h2>
      <div id="additionalLinks">
        <ul>
          <li><a href="http://www.free-css.com/">Duis vitae sem sed faucibus tortor ac turpis maecenas dbus</a></li>
          <li><a href="http://www.free-css.com/">Sapien nec nisi phasellus eget nulla id ipsum temfacilisis</a></li>
          <li><a href="http://www.free-css.com/">Sociis natoque penatibus et magnis</a></li>
          <li><a href="http://www.free-css.com/">Dis parturient montes nascetur ridiculus musquam nullam</a></li>
          <li><a href="http://www.free-css.com/">Sagittis turpis eu facilisis</a></li>
          <li><a href="http://www.free-css.com/">Accumsan nunc nibh hendrerit dolor, sit amet tinc</a></li>
        </ul>
      </div>
      <div id="iconLinks"> <a href="http://www.free-css.com/" class="ideas">liberot dictum </a>
        <div class="blank"></div>
        <a href="http://www.free-css.com/" class="signup">liberot dictum </a>
        <div class="blank"></div>
        <a href="http://www.free-css.com/" class="blog">liberot dictum </a> </div>
      <div id="newsLetter">
        <h3>Newsletter Signup</h3>
        <input name="news" type="text" value="- Enter Your Email ID -" onfocus="if(this.value=='- Enter Your Email ID -')this.value=''" onblur="if(this.value=='')this.value='- Enter Your Email ID -'"/>
        <div class="blank"></div>
        <a href="http://www.free-css.com/">Submit</a> </div>
    </div>
  </div>
</div>
<div id="middleWrap">
  <div id="middlePanel">
    <div class="left">
      <h2>Features</h2>
      <p><span>Cras sagittis, sapien et aliquam cursus,</span> diam enim varius pede, ut rutrum justo ante in ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</p>
      <p><span>Etiam urna felis, varius egestas,</span> consequat nec, dictum in, tortor. Nam vel dolor vel nisi ultrices dictum. Sed convallis, lorem ac lacinia pretium</p>
      <a href="http://www.free-css.com/">read more</a> </div>
    <div id="loginPanel">
      <h2>Member Login</h2>
      <h3>- Enter Your Name -</h3>
      <div class="blank"></div>
      <input name="nane" type="text" />
      <h3>- Enter Your Password -</h3>
      <div class="blank"></div>
      <input name="nane" type="text" />
      <p><a href="http://www.free-css.com/">Forgot Password ?</a></p>
      <a href="http://www.free-css.com/" class="login">Login</a> </div>
    <div id="gap"></div>
    <div id="contact">
      <p>+01-3345-4456</p>
    </div>
  </div>
</div>
<div id="footWrap">
  <div id="footPanel">
    <div id="footNav">
      <ul>
        <li><a href="http://www.free-css.com/">Client Testimonials</a></li>
        <li>
          <div class="blank">|</div>
        </li>
        <li><a href="http://www.free-css.com/">Latest Events</a></li>
        <li>
          <div class="blank">|</div>
        </li>
        <li><a href="http://www.free-css.com/">Our Online Support</a></li>
        <li>
          <div class="blank">|</div>
        </li>
        <li><a href="http://www.free-css.com/">Solutions</a></li>
        <li>
          <div class="blank">|</div>
        </li>
        <li><a href="http://www.free-css.com/">Forum</a></li>
        <li>
          <div class="blank">|</div>
        </li>
        <li><a href="http://www.free-css.com/">What Our Future Plans</a></li>
        <li>
          <div class="blank">|</div>
        </li>
        <li><a href="http://www.free-css.com/">Projects</a></li>
        <li>
          <div class="blank">|</div>
        </li>
        <li><a href="http://www.free-css.com/">Contact Us</a></li>
      </ul>
    </div>
    <div id="copyright">&copy; Copyright Information Goes Here. All Rights Reserved.</div>
    <p>Designed By: <a href="http://www.templateworld.com/">TemplateWorld</a> and brought to you by <a href="http://www.smashingmagazine.com">SmashingMagazine</a></p>
    <div id="validation">
      <ul>
        <li><a href="http://validator.w3.org/check?uri=referer">xhtml valid</a></li>
        <li>
          <div class="blank"></div>
        </li>
        <li><a href="http://jigsaw.w3.org/css-validator/check/referer">css valid</a></li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>








Related examples in the same category

1.Adding images and alt message with XHTML
2.Alternative Text Rendering
3.Set background to #fff for an image
4.Set padding to 4px
5.display block
6. in a
7.Set image margin top and left to negative value
8.Image block
9.image clear: left;
10.Switch image for link
11.Adding caption to Image
12.Image as a link
13.Creating an Image Map
14.Top link with image
15.Wrap text along with image
16.Using arrow image for LI
17.Use image to create line
18.Using color image to create round corner
19.Large corner image for the top bar
20.Image slide show
21.Text wrap around image
22.Image side bar
23.Text wrap image
24.Using image to add shading to your text
25.Image Text wraper
26.Marginal Graphic Dropcap
27.Raised image
28.Lowered text
29.Image with clear left
30.Using css to wrap text around images
31.Image map area
32.HTML Image map
33.Creating and Using Image Maps
34.shape = "rect" indicates a rectangular area, with coordinates for the upper-left and lower-right corners
35.value "poly" creates a hotspot in the shape of a polygon, defined by coords
36.shape = "circle" indicates a circular area with the given center and radius
37. indicates that the specified image map is used with this image
38.Client-side Image Map Example
39.'area' defines the clickable area on a graphic or image
40.'coords' sets the coordinates of an 'a' or 'area' element
41.'galleryimg' eliminate the appearance of the toolbar for all 'img' elements
42.'img' displays a picture or a video clip
43.Adding shading to the picture
44.HTML code for image scaling
45.'ismap': Whether the image in 'img' element is a server-side image map
46.'lowsrc' gives the URL of a low-resolution image
47.'map' specifies the coordinates of an image map
48.'nohref' indicates that the 'area' in the 'map' has no link
49.'shape' sets the shape of an 'a' or 'area' element
50.'src' specifies a URL to be loaded by the element
51.'start' specifies when a video clip should start playing
52.'usemap' sets the image map for the map element
53.'hspace' sets the space in pixels between the left and right sides of an element
54.'vspace' sets the size in pixels of the vertical margins