[Tutorial] Informações ao passar o mouse em cima do título

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

avatar
Admin
Administrador
Tempo Online : 156d 5h 47m 56s
Mensagens : 693
Reputação : 3
Ver perfil do usuário http://bestweb.forumais.com

MensagemAdmin em Sex Set 30, 2016 12:35 pm

Informações:
Autor:
Desconhecido
Funcionalidade:Todas as versões




Acesse:
Painel de Controle -> Modulos -> Html e Javascript -> Gestão dos codigos Javascript
E Crie um novo Javascript com investimento nos sub-fórum com esse código:
Código:

var versionMinor = parseFloat(navigator.appVersion);
var versionMajor = parseInt(versionMinor);
var IE = document.all && !window.opera && versionMajor < 7;
var IE7 = document.all && !window.opera && versionMajor >= 7;
var OP = window.opera;
var FF = document.getElementById;
var NS = document.layers;
function get_item(name, opener) {
    if (IE) {
        return (opener) ? window.opener.document.all[name] : document.all[name]
    } else if (FF) {
        return (opener) ? window.opener.document.getElementById(name) : document.getElementById(name)
    } else if (NS) {
        return (opener) ? window.opener.document.layers[name] : document.layers[name]
    }
}
function change_display(name, value, opener) {
    if (IE) {
        element = (opener == true) ? window.opener.document.all[name].style : document.all[name].style
    } else if (FF) {
        element = (opener == true) ? window.opener.document.getElementById(name)
            .style : document.getElementById(name)
            .style
    } else if (NS) {
        element = (opener == true) ? window.opener.document.layers[name] : document.layers[name]
    }
    element.display = value
}
function reverse_display(name, opener) {
    element = get_item(name);
    if (!element) {
        return false
    }
    var display = (element.style.display != 'block') ? 'block' : 'none';
    change_display(name, display, opener)
}
var current_tooltip;
function show_tooltip(caller, content, content_title) {
    var current_tooltip = get_item('tooltip');
    if (!current_tooltip) {
        var current_tooltip = document.createElement('div');
        current_tooltip.setAttribute('id', 'tooltip');
        document.body.appendChild(current_tooltip)
    }
    current_tooltip.style.zIndex = 100;
    current_tooltip.style.position = 'absolute';
    if (content_title) {
        content = '<p class="header">' + content_title + '</p><p>' + content + '</p>'
    } else {
        content = '<p>' + content + '</p>'
    }
    current_tooltip.innerHTML = content;
    current_tooltip.style.visibility = 'visible';
    caller.onmousemove = move_tooltip;
    caller.onmouseout = function() {
        current_tooltip.style.visibility = "hidden"
    };
    caller.title = ''
}
var offsetxpoint = -60;
var offsetypoint = 20;
var real_body = (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;
real_body = (document.documentElement) ? document.documentElement : document.body;
function move_tooltip(e) {
    var curX = (!IE) ? e.pageX : event.clientX + real_body.scrollLeft;
    var curY = (!IE) ? e.pageY : event.clientY + real_body.scrollTop;
    var rightedge = IE && !window.opera ? real_body.clientWidth - event.clientX - offsetxpoint : window.innerWidth - e.clientX - offsetxpoint - 20;
    var bottomedge = IE && !window.opera ? real_body.clientHeight - event.clientY - offsetypoint : window.innerHeight - e.clientY - offsetypoint - 20;
    var leftedge = (offsetxpoint < 0) ? offsetxpoint * (-1) : -1000;
    current_tooltip = get_item('tooltip');
    if (rightedge < current_tooltip.offsetWidth) current_tooltip.style.left = IE ? real_body.scrollLeft + event.clientX - current_tooltip.offsetWidth + "px" : window.pageXOffset + e.clientX - current_tooltip.offsetWidth + "px";
    else if (curX < leftedge) current_tooltip.style.left = "5px";
    else current_tooltip.style.left = curX + offsetxpoint + "px"; if (bottomedge < current_tooltip.offsetHeight) current_tooltip.style.top = IE ? real_body.scrollTop + event.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : window.pageYOffset + e.clientY - current_tooltip.offsetHeight - offsetypoint + "px";
    else current_tooltip.style.top = curY + offsetypoint + "px"
}
function popup(link, oWidth, oHeight, oName) {
    if (oWidth > screen.width) {
        oWidth = screen.width
    }
    if (oHeight > screen.height) {
        oHeight = screen.height
    }
    var PosX = (screen.width - oWidth) / 2;
    var PosY = (screen.height - oHeight) / 2;
    var params = "width=" + oWidth + ", height=" + oHeight + ", top=" + (PosY) + ",left=" + (PosX);
    params += ('toolbar=0,menubars=0,location=no,scrollbars=1,directories=0,statubar=0,resizable=0');
    window.open(link, ((!oName) ? 'popuped' : 'popuped'), params)
}
function add_search_engine(engine, title, category) {
    if (FF && (typeof window.sidebar == "object") && (typeof window.sidebar.addSearchEngine == "function")) {
        window.sidebar.addSearchEngine(engine + '_ff.src', engine + '.gif', title, category)
    } else if (IE7) {
        window.external.AddSearchProvider(engine + '_ie.src')
    } else {
        alert('Your browser do not support this utility')
    }
}
inter = '';
speed = 10;
frequency = 10;
L_txt_close = 'Clic to close this preview';
function showImage(event, finalWidth, finalHeight, image, img_width, img_height) {
    if (document.getElementById('preview_block')
        .firstChild) {
        for (var i = 0; i < document.getElementById('preview_block')
            .childNodes.length; i++) {
            document.getElementById('preview_block')
                .removeChild(document.getElementById('preview_block')
                    .childNodes[i])
        }
    }
    var mouseX = 0;
    var mouseY = 0;
    var vScroll = 0;
    var hScroll = 0;
    var inWidth = getWindowWidth();
    var inHeight = getWindowHeight();
    if (document.all) {
        mouseX = window.event.clientX + document.documentElement.scrollLeft;
        mouseY = window.event.clientY + document.documentElement.scrollTop;
        vScroll = document.documentElement.scrollTop;
        hScroll = document.documentElement.scrollLeft
    } else {
        mouseX = event.clientX + window.scrollX;
        mouseY = event.clientY + window.scrollY;
        vScroll = window.scrollY;
        hScroll = window.scrollX
    }
    var div = document.createElement('div');
    div.style.height = '0';
    div.style.width = '0';
    div.className = 'preview';
    div.style.position = 'absolute';
    div.style.top = mouseY + 'px';
    div.style.left = mouseX + 'px';
    div.style.zIndex = '1000';
    div.setAttribute('id', 'image');
    div.onclick = new Function("document.getElementById('preview_block').removeChild(document.getElementById('preview_block').firstChild);window.clearInterval(inter);");
    var finalLeft = (inWidth - finalWidth) / 2;
    var finalTop = (inHeight - finalHeight) / 2;
    finalTop += vScroll;
    var stepLeft = (finalLeft - mouseX) / speed;
    var stepTop = (finalTop - mouseY) / speed;
    var stepWidth = finalWidth / speed;
    var stepHeight = finalHeight / speed;
    document.getElementById('preview_block')
        .appendChild(div);
    if (!img_width) {
        img_width = 840
    }
    if (!img_height) {
        img_height = 600
    }
    inter = window.setInterval('moveAndResize(' + stepLeft + ',' + stepTop + ',' + stepWidth + ',' + stepHeight + ',' + finalHeight + ',"' + image + '",' + img_width + ',' + img_height + ')', frequency);
    return false
}
function moveAndResize(stepLeft, stepTop, stepWidth, stepHeight, finalHeight, image, img_width, img_height) {
    if (!document.getElementById('preview_block') || !document.getElementById('preview_block')
        .firstChild) {
        window.clearInterval(inter);
        return false
    }
    var div = document.getElementById('preview_block')
        .firstChild;
    var height = div.style.height.match(/[0-9\.]*/);
    var width = div.style.width.match(/[0-9\.]*/);
    var top = div.style.top.match(/[0-9\.]*/);
    var left = div.style.left.match(/[0-9\.]*/);
    height = Number(height);
    width = Number(width);
    top = Number(top);
    left = Number(left);
    height += stepHeight;
    width += stepWidth;
    top += stepTop;
    left += stepLeft;
    div.style.height = height + 'px';
    div.style.width = width + 'px';
    div.style.top = top + 'px';
    div.style.left = left + 'px';
    if (height >= finalHeight) {
        window.clearInterval(inter);
        var img = document.createElement('img');
        img.setAttribute('src', image);
        img.setAttribute('alt', L_txt_close);
        img.setAttribute('title', L_txt_close);
        img.setAttribute('width', img_width);
        img.setAttribute('height', img_height);
        img.style.cursor = 'pointer';
        div.appendChild(img);
        var p = document.createElement('p');
        p.style.cursor = 'pointer';
        div.appendChild(p)
    }
}
function getWindowHeight() {
    var pageHeight = window.innerHeight;
    pageHeight = (pageHeight) ? pageHeight : document.documentElement.clientHeight;
    pageHeight = (pageHeight) ? pageHeight : document.body.clientHeight;
    return pageHeight
}
function getWindowWidth() {
    var pageWidth = window.innerWidth;
    pageWidth = (pageWidth) ? pageWidth : document.documentElement.clientWidth;
    pageWidth = (pageWidth) ? pageWidth : document.body.clientWidth;
    return pageWidth
}

Depois disto, acesse:
Painel de Controle -> Visualização -> Templates -> Geral -> Topic_list_box
procure por:

Substitua por:
Código:
<h2 class="topic-title"><a onmouseover="show_tooltip(this,'Tópico:  {topics_list_box.row.TOPIC_TITLE} <br><br>Postado em: {topics_list_box.row.FIRST_POST_TIME}<br><br>Visualizaçõess:  {topics_list_box.row.VIEWS}<br><br>Respostas: {topics_list_box.row.REPLIES}');" onmouseout="hidetip();" class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2>

Feito isto, salve seu template e acesse:
Painel de Controle -> Visualização -> Imagens e Cores -> Cores -> Folha de Estilo CSS
E Adicione esse código:
Código:
#tooltip .header {display:none}
        #tooltip .tiplFMvi{border-bottom:1.5px dashed;padding-bottom:5px;margin-bottom:5px}
        #tooltip{max-width:550px;position:absolute;background-color:#FFF;border:2px solid blue;padding:5px;border-radius:3px;color:#000;z-index:99;}

Resultado:

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

Cria uma conta ou logue para postar uma mensagem.

Você precisa ser um membro, para poder postar uma resposta.

Criar conta

Participe de nossa comunidade, basta se registrar. É Fácil!


Criar uma conta

Logar

Já tem uma conta? Sem problemas, Logue agora.


Logar-se

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum