Eternal...
Mondial Domain (Design by LoW)

Eternal Community
Welcome to Eternal Community.
Please LOGIN In or REGISTER.
Thanx.


 



• Regula 1.
• Regula 2.
• Regula 3.
• Regula 4.
• Regula 5.






Tooltip JS - Afisarea unui sablon (hover) cu o notatie suprapus peste o imagine / text

Membru-LZ: Baietel[MD]


Membru Level II

Posts Posts : 394
Birthday Birthday : 03/03/1997
Age Age : 19
Location Location : Republic Of Moldova (Chisinau)
Job/hobbies Job/hobbies : Web-Master,School
Humor Humor : Gou Gou Gou !



Vezi profilul utilizatorului

MesajSubiect: Tooltip JS - Afisarea unui sablon (hover) cu o notatie suprapus peste o imagine / text Lun Mar 14, 2011 11:57 pm

Ce este un tooltip?

Un
tooltip reprezinta un sablon suprapus ce apare cand pui cursorul peste
(hover) o imagine / text, continand o descriere incadrata inauntrul
acestuia.
Vezi demo: click



Cum il pot utiliza?

HTML:

Adaugam class="with-tooltip" imaginii / linkului dorit.
Vom folosi optiunea "title" pentru a personaliza descrierea incadrata in sablonul tooltip.

exemplu:


Cod:
[url=http://eternal.forumy.eu/#]Muta cursorul peste mine[/url]


jQuery:

Pentru a functiona trebuie sa folosim 2 fisiere jQuery.
Vom
crea fisierele jQuery inroducand urmatorul cod intr-un editor text
(notepad e perfect) pe urma le veti salva cu extensia ".js".


Cod:
[i]/**
*
*  simpleTooltip jQuery plugin, by Marius ILIE
*  visit http://dev.mariusilie.net for details
*
**/
(function($){ $.fn.simpletooltip = function(){
  return this.each(function() {
      var text = $(this).attr("title");
      $(this).attr("title", "");
      if(text != undefined) {
        $(this).hover(function(e){
            var tipX = e.pageX + 12;
            var tipY = e.pageY + 12;
            $(this).attr("title", "");
 
          $("body").append("[/i][i]" + text + "[/i]
[i]");
            if($.browser.msie) var tipWidth = $("#simpleTooltip").outerWidth(true)
            else var tipWidth = $("#simpleTooltip").width()
            $("#simpleTooltip").width(tipWidth);
            $("#simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
        }, function(){
            $("#simpleTooltip").remove();
            $(this).attr("title", text);
        });
        $(this).mousemove(function(e){
            var tipX = e.pageX + 12;
            var tipY = e.pageY + 12;
            var tipWidth = $("#simpleTooltip").outerWidth(true);
            var tipHeight = $("#simpleTooltip").outerHeight(true);
            if(tipX + tipWidth > $(window).scrollLeft() + $(window).width()) tipX = e.pageX - tipWidth;
            if($(window).height()+$(window).scrollTop() < tipY + tipHeight) tipY = e.pageY - tipHeight;
            $("#simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
        });
      }
  });
}})(jQuery);

si acesta

Cod: [url=http://www.netcustoms.net/t398-tooltip-js-afisarea-unui-sablon-hover-cu-o-notatie-suprapus-peste-o-imagine-text#]Selecteaza tot[/url]$(document).ready(function(){
  $(".with-tooltip").simpletooltip();
});

Ne vom ajuta de tagul "script" pentru a insera codurile jQuery ce trebuie mai intai sa fie uploadate. ([url=http://www.netcustoms.net/tutoriale-web-f28/uploadarea-fisierelor-js-css-etc-t350.htm]vezi tutorialul de upload pentru fisiere ".js"; ".css" etc.[/url])

exemplu:[/i]
[/i][code]


[/code]


[u][b]CSS:[/b][/u]

[i]Vom avea nevoie si de un cod CSS pentru a personaliza sablonul.
Daca stiti CSS il puteti personaliza dupa bunul plac.
Adaugati codul urmator pe pagina intre tagul  sau in foaia de stil CSS.

exemplu:[/i]
Cod: [url=http://www.netcustoms.net/t398-tooltip-js-afisarea-unui-sablon-hover-cu-o-notatie-suprapus-peste-o-imagine-text#]Selecteaza tot[/url]#simpleTooltip { padding: 7px; border: 1px solid #A6A7AB; background: #F2F3F5; }

NOTATIE:

In cazul in care folositi tooltip intr-o pagina HTML separata de forum va trebui sa adaugati si urmatorul cod:



Cod:

Mult noroc!

Tutorial creat de AGent
Sursa fisierelor jQuery: http://dev.mariusilie.net
















Admin Panel
Design and coded by eTn Team
creeaza un forum | © phpBB | Forum gratuit de suport | Contact | Semnaleaza un abuz | Blogratuit.ro