Submit your widget

Useful Tooltips with the images

Created 11 years ago   Views 21331   downloads 3160    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: