Bun venit pe Forumul Andrei

Daca vezi aceasta pagina inseamna ca nu ai cont sau nu esti logat.
Daca doresti doar sa vizualizezi forumul poti apasa pe "x-ul" din dreapta si acesta imagine nu va mai fi afisata.

Pentru o vizualizare cat mai buna a acestui forum recomandam
8
Va uram o zi buna in continuare si o navigare cat mai placuta pe acest forum !


   
AcasaSustineFAQInregistrareConectareCautareCalendar
Twitter



ImgTooltip

Navigare :: Scripturi si tutoriale :: Scripturi
AutorMesaj
 nick
avatar
Rang: Administrator


MesajSubiect: ImgTooltip Dum Iun 05, 2011 6:14 am  
Codul JS

Cod:
<script type="text/javascript" src="http://forumulandrei.webs.com/ImgTooltip/js/jquery-1.4.1.min.js"></script>

Codul de executie

Cod:
<script type="text/javascript">
 
   // Load this script once the document is ready
   $(document).ready(function () {
      
      // Get all the thumbnail
      $('div.thumbnail-item').mouseenter(function(e) {
 
         // Calculate the position of the image tooltip
         x = e.pageX - $(this).offset().left;
         y = e.pageY - $(this).offset().top;
 
         // Set the z-index of the current item,
         // make sure it's greater than the rest of thumbnail items
         // Set the position and display the image tooltip
         $(this).css('z-index','15')
         .children("div.tooltip")
         .css({'top': y + 10,'left': x + 20,'display':'block'});
         
      }).mousemove(function(e) {
         
         // Calculate the position of the image tooltip         
         x = e.pageX - $(this).offset().left;
         y = e.pageY - $(this).offset().top;
         
         // This line causes the tooltip will follow the mouse pointer
         $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20});
         
      }).mouseleave(function() {
         
         // Reset the z-index and hide the image tooltip
         $(this).css('z-index','1')
         .children("div.tooltip")
         .animate({"opacity": "hide"}, "fast");
      });
 
   });
 
 
   </script>

<style>
 


Codul style sau css

Cod:

<style>
 
.thumbnail-item {
   /* position relative so that we can use position absolute for the tooltip */
   position: relative;
   float: left; 
   margin: 0px 5px;
}
 
.thumbnail-item a {
   display: block;
}
 
.thumbnail-item img.thumbnail {
   border:3px solid #ccc;   
}
      
.tooltip {
   /* by default, hide it */
   display: none;
   /* allow us to move the tooltip */
   position: absolute;
   /* align the image properly */
   padding: 8px 0 0 8px;
}
 
   .tooltip span.overlay {
      /* the png image, need ie6 hack though */
      background: url(http://forumulandrei.webs.com/ImgTooltip/images/overlay.png) no-repeat;
      /* put this overlay on the top of the tooltip image */
      position: absolute;
      top: 0px;
      left: 0px;
      display: block;
      width: 350px;
      height: 200px;
   }
   </style>


Codul de afisare

Cod:
<div class="thumbnail-item">
      <a href="#"><img src="small1.jpg" class="thumbnail"/></a>
      <div class="tooltip">
         <img src="big1.jpg" alt="" width="330" height="185" />
         <span class="overlay"></span>
      </div>
   </div>
               
   <div class="thumbnail-item">
      <a href="#"><img src="small2.jpg" class="thumbnail"/></a>
      <div class="tooltip">
         <img src="big2.jpg" alt="" width="330" height="185" />
         <span class="overlay"></span>
      </div>
   </div>
   
   <div class="thumbnail-item">
      <a href="#"><img src="small3.jpg" class="thumbnail"/></a>
      <div class="tooltip">
         <img src="big3.jpg" alt="" width="330" height="185" />
         <span class="overlay"></span>
      </div>
   </div>       
         
   <div class="clear"></div>




[Trebuie sa fiti inscris si conectat pentru a vedea acest link]


[Trebuie sa fiti inscris si conectat pentru a vedea acest link]

*Scrie romaneste
*Sterg mesajele inutile sau scrise cu CAPS
*Nu fa spam
*Linkurile relevante în context sunt binevenite.

Transferul se face din contul dumnevoastra de Paypal




Copyright © 2008-2014 Forumul Andrei. Toate drepturile rezervate. Termeni si conditii
Aspect creat si codat de Alexandru Miron & Nick

.