Useful Tooltips with the images

DOWNLOAD

iPicture needs few configuration to make your pictures interactive.
First step consists in writing html code containing the pictures. iPicture supports both lists and divs to display the images. This choice makes iPicture compatible with most of the slideshow plugin.

Let's see the code:

CSS/HTML code

For example in divs:
<div id="iPicture">
  <div id="picture1" style="background: url('images/image1.jpg')"></div>
  <div id="picture2" style="background: url('images/image2.jpg')"></div>
  <div id="picture3" style="background: url('images/image3.jpg')"></div>
  <div id="picture4" style="background: url('images/image4.jpg')"></div>
</div>
Otherwise in list:

<ul id="iPicture">
  <li id="picture1" style="background: url('images/image1.jpg')"></li>
  <li id="picture2" style="background: url('images/image2.jpg')"></li>
  <li id="picture3" style="background: url('images/image3.jpg')"></li>
  <li id="picture4" style="background: url('images/image4.jpg')"></li>
</ul>

Both of the solutions need the images defined as background, with given width, height and position:

<style>
  #picture1, #picture2, #picture3, #picture4{
     width: 900px;      //images width
     height: 528px;     //images height
     position: relative;
     margin:0 auto;
  }
</style>




Labels: