Szöveg buborék hiba
Sziasztok!
Van egy weboldalam, ahol, ha az egérrel rámutatunk egy képre, megjelenik egy szüveges buborék.
Több kép is van egymás mellett.
Az a problémám, hogy ha egy képhez tartozó buborék átnyúlik a következő kép fölé is, akkor ez a következő kép kitakarja a buborékot.
Ha az előző kép fölé nyúlik át, akkor nem jelenkezik ez a probléma.
■ Van egy weboldalam, ahol, ha az egérrel rámutatunk egy képre, megjelenik egy szüveges buborék.
Több kép is van egymás mellett.
Az a problémám, hogy ha egy képhez tartozó buborék átnyúlik a következő kép fölé is, akkor ez a következő kép kitakarja a buborékot.
Ha az előző kép fölé nyúlik át, akkor nem jelenkezik ez a probléma.
- .colorTip{
- /* This class is assigned to the color tip span by jQuery */
- display:none;
- position:absolute;
- left:50%;
- top:-90px; padding:6px;
- background-color:white;
- font-family:Arial,Helvetica,sans-serif;
- font-size:11px;
- font-style:normal;
- line-height:1;
- text-decoration:none;
- text-align:center;
- text-shadow:0 0 1px white;
- white-space:nowrap;
- -moz-border-radius:4px;
- -webkit-border-radius:4px;
- border-radius:4px;
- }
- .pointyTip,.pointyTipShadow{
- /* Setting a thick transparent border on a 0x0 div to create a triangle */
- border:6px solid transparent;
- bottom:-12px;
- height:0;
- left:50%;
- margin-left:-6px;
- position:absolute;
- width:0;
- }
- .pointyTipShadow{
- /* The shadow tip is 1px larger, so it acts as a border to the tip */
- border-width:7px;
- bottom:-14px;
- margin-left:-7px;
- }
- .colorTipContainer{
- position:relative;
- text-decoration:none !important;
- }
- /* 6 Available Color Themes */
- .white .pointyTip{ border-top-color:white;}
- .white .pointyTipShadow{ border-top-color:#ddd;}
- .white .colorTip{
- background-color:white;
- border:1px solid #DDDDDD;
- color:#555555;
- }
- (function($){
- $.fn.colorTip = function(settings){
- var defaultSettings = {
- color : 'yellow',
- timeout : 500
- }
- var supportedColors = ['red','green','blue','white','yellow','black'];
- /* Combining the default settings object with the supplied one */
- settings = $.extend(defaultSettings,settings);
- /*
- * Looping through all the elements and returning them afterwards.
- * This will add chainability to the plugin.
- */
- return this.each(function(){
- var elem = $(this);
- // If the title attribute is empty, continue with the next element
- if(!elem.attr('title')) return true;
- // Creating new eventScheduler and Tip objects for this element.
- // (See the class definition at the bottom).
- var scheduleEvent = new eventScheduler();
- var tip = new Tip(elem.attr('title'));
- // Adding the tooltip markup to the element and
- // applying a special class:
- elem.append(tip.generate()).addClass('colorTipContainer');
- // Checking to see whether a supported color has been
- // set as a classname on the element.
- var hasClass = false;
- for(var i=0;i<supportedColors.length;i++)
- {
- if(elem.hasClass(supportedColors[i])){
- hasClass = true;
- break;
- }
- }
- // If it has been set, it will override the default color
- if(!hasClass){
- elem.addClass(settings.color);
- }
- // On mouseenter, show the tip, on mouseleave set the
- // tip to be hidden in half a second.
- elem.hover(function(){
- tip.show();
- // If the user moves away and hovers over the tip again,
- // clear the previously set event:
- scheduleEvent.clear();
- },function(){
- // Schedule event actualy sets a timeout (as you can
- // see from the class definition below).
- scheduleEvent.set(function(){
- tip.hide();
- },settings.timeout);
- });
- // Removing the title attribute, so the regular OS titles are
- // not shown along with the tooltips.
- elem.removeAttr('title');
- });
- }
- /*
- / Event Scheduler Class Definition
- */
- function eventScheduler(){}
- eventScheduler.prototype = {
- set : function (func,timeout){
- // The set method takes a function and a time period (ms) as
- // parameters, and sets a timeout
- this.timer = setTimeout(func,timeout);
- },
- clear: function(){
- // The clear method clears the timeout
- clearTimeout(this.timer);
- }
- }
- /*
- / Tip Class Definition
- */
- function Tip(txt){
- this.content = txt;
- this.shown = false;
- }
- Tip.prototype = {
- generate: function(){
- // The generate method returns either a previously generated element
- // stored in the tip variable, or generates it and saves it in tip for
- // later use, after which returns it.
- return this.tip || (this.tip = $('<span class="colorTip">'+this.content+
- '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));
- },
- show: function(){
- if(this.shown) return;
- // Center the tip and start a fadeIn animation
- this.tip.css('margin-left',-this.tip.outerWidth()/2).fadeIn('fast');
- this.shown = true;
- },
- hide: function(){
- this.tip.fadeOut();
- this.shown = false;
- }
- }
- })(jQuery);
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <link rel="stylesheet" type="text/css" href="elemek/colortip-1.0/colortip-1.0-jquery.css"/>
- <title>buborék</title>
- </head>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
- <script type="text/javascript" src="elemek/colortip-1.0/colortip-1.0-jquery.js"></script>
- <script type="text/javascript" src="elemek/script.js"></script>
- <body>
- <A class="red" title="121212121212121212221221212" href="albumscontent.php">
- <img src="elemek/0.jpg">
- </A>
- <A class="red" title="1222121212121212121221212121" href="albumscontent.php">
- <img src="elemek/0.jpg">
- </A>
- <A class="red" title="12121212121212121212121212121" href="albumscontent.php">
- <img src="elemek/0.jpg">
- </A>
- </body>
- </html>
Első körben érdemes a
Ezt a második, a html -
Ha van két abszolút
A te esetedben a buborék betöltő javascript kódját a </body> elé kéne tenni szerintem, és akkor jó lesz.
Sajnos így nem jó. De a
z-index:1;
Köszönöm a segítségedet!
A z-index fura dolog, nekem
Visszatérve a fenti kódra,
szélesség megadása
Igen, de az csak a buborék
Itt a megoldás..
/*white-space:nowrap;*/
width:200px;
Lehet, nem értem
Lehet én nem értem eléggé a problémád, de miért nem az <img>-nek van title attribútuma? Szerintem ez megoldaná a gondot.
A Netről szedtem le ezt a
Döntsd el
Szerintem a szélességbe nem jó belenyúlni, mert ezt a böngészők különbözőképp oldják meg. De mindegyik több sorba tördeli a stringet, ha hosszúnak ítéli. A Júzer viszont azt szokta meg, ahogyan az ő böngészője csinálja, ergo jobb inkább arra törekedni, hogy felül legyen mindig. Legalább próbáld ki amit írtam, aztán meglátod.