Eternal Community
Welcome to Eternal Community.
Please LOGIN In or REGISTER.
Thanx.
Eternal Community
Welcome to Eternal Community.
Please LOGIN In or REGISTER.
Thanx.
Eternal Community
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.


 
AcasaAcasa  CăutareCăutare  ÎnregistrareÎnregistrare  ConectareConectare  



• 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]

Baietel[MD]
Membru Level II

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

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



Tooltip JS - Afisarea unui sablon (hover) cu o notatie suprapus peste o imagine / text  Empty
MesajSubiect: Tooltip JS - Afisarea unui sablon (hover) cu o notatie suprapus peste o imagine / text Tooltip JS - Afisarea unui sablon (hover) cu o notatie suprapus peste o imagine / text  EmptyLun 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.forumtwilight.com/#]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
Forumgratuit.ro | © phpBB | Forum gratuit de suport | Semnaleaza un abuz | Discuții recente