Submit your widget

Useful Tooltips with the images

Created 12 years ago   Views 21536   downloads 3226    Author ipicture
Useful Tooltips with the images
View DemoDownload
Share |

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:


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>

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>

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

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

Read more: