Submit your widget

Useful Tooltips with the images

Created 7 years ago   Views 34214   downloads 5066    Author ipicture
Useful Tooltips with the images
View DemoDownload 582.4 KB
143
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:

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>

Read more:http://ipicture.justmybit.com/configure.php