Banner Transparente

Fevereiro 10, 2004

Olá Pessoal ! Espero que estejam todos bem...

Gostaria de saber como faço um banner de fundo transparente como o que aparece quando entro no site ScriptBrasil.

Pois pretendo fazer o mesmo na Intranet do meu setor

Grato

ppgsalomao · Fevereiro 10, 2004

ELe é um div flutuante se eu entendi bem o que você quer !!

Procura .. usa a pesquisa e se cadastra que já tem dúvidas sobre isso por aí !

Ceh · Fevereiro 11, 2004

V se é isso que você quer, é de autoria do diraol

<html>
<head>
<script>
var checkZIndex = true;
var dragobject = null;
var tx;
var ty;
var ie5 = document.all != null && document.getElementsByTagName != null;
function getReal(el) {
temp = el;
while ((temp != null) && (temp.tagName != "BODY")) {
if ((temp.className == "moveme") || (temp.className == "handle")){
el = temp;
return el;
}
temp = temp.parentElement;
}
return el;
}
function moveme_onmousedown() {
el = getReal(window.event.srcElement)
if (el.className == "moveme" || el.className == "handle") {
if (el.className == "handle") {
tmp = el.getAttribute("handlefor");
if (tmp == null) {
dragobject = null;
return;
}
else
dragobject = eval(tmp);
}
else 
dragobject = el;
if (checkZIndex) makeOnTop(dragobject);
ty = window.event.clientY - getTopPos(dragobject);
tx = window.event.clientX - getLeftPos(dragobject);
window.event.returnValue = false;
window.event.cancelBubble = true;
}
else {
dragobject = null;
}
}

function moveme_onmouseup() {
if(dragobject) {
dragobject = null;
}
}

function moveme_onmousemove() {
if (dragobject) {
if (window.event.clientX >= 0 && window.event.clientY >= 0) {
dragobject.style.left = window.event.clientX - tx;
dragobject.style.top = window.event.clientY - ty;
}
window.event.returnValue = false;
window.event.cancelBubble = true;
}
}

function getLeftPos(el) {
if (ie5) {
if (el.currentStyle.left == "auto")
return 0;
else
return parseInt(el.currentStyle.left);
}
else {
return el.style.pixelLeft;
}
}

function getTopPos(el) {
if (ie5) {
if (el.currentStyle.top == "auto")
return 0;
else
return parseInt(el.currentStyle.top);
}
else {
return el.style.pixelTop;
}
}

function makeOnTop(el) {
var daiz;
var max = 0;
var da = document.all;
for (var i=0; i<da.length; i++) {
daiz = da[i].style.zIndex;
if (daiz != "" && daiz > max)
max = daiz;
}
el.style.zIndex = max + 1;
}

if (document.all) { //This only works in IE4 or better
document.onmousedown = moveme_onmousedown;
document.onmouseup = moveme_onmouseup;
document.onmousemove = moveme_onmousemove;
}

document.write("<style>");
document.write(".moveme {cursor: move;}");
document.write(".handle {cursor: move;}");
document.write("</style>");
</script>

<style>
<!--
#testDiv {position:relative; height:50px; width:250px; background:#daa520;border-style:solid; border-width:1px; margin:10px;
filter:alpha(opacity=50);visibility:visible;width:180;height:261;color: #FFFFFF;border: 0px;text-align : center;}
#title {background:#ff6347; font:caption; width:100%; color:#000000; padding:5px; margin:0px; text-align:center;
filter:alpha(opacity=50);visibility:visible;width:180;height:261;color: #FFFFFF;border: 0px;text-align : center;}
#inner {margin:0px; padding:3px; height:100%;
filter:alpha(opacity=50);visibility:visible;width:180;height:261;color: #FFFFFF;border: 0px;text-align : center;}
-->
</style>

</head>
<body>
<div id="testDiv">
<div class="handle" handlefor="testDiv" id="title">QUEM GOSTOU DO PRIMEIRO EXEMPLO</div>
</div>

Repare que as últimas linhas do script estão com fonte marrom. 
Na verdade este trecho não faz parte do script e consiste em propriedades de configuração 
CSS da janela. Através dela podemos definir cor de fundo (background:#daa520), formato das 
bordas (border-style:solid), texto centralizado (text-align:center), tamanho da janela 
(height:50px; width:250px), etc 
</body>
</html>

Se num for desculpa æ

Entrar

Banner Transparente

Pergunta

Guest André Fogaça

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

ppgsalomao

Link para o comentário

Compartilhar em outros sites

Ceh

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades