Creare un layer come amazone

**KillEmAll** · 07-09-2006, 10:58

Salve a tutti.

Vorrei creare un layer per la navigazione uguale a quello di http://www.amazon.com/

Quando si passa sopra al link "Your Store" compare un layer con un effetto all'apertura.

Al momento sono riuscito a fare questo:

<head>

</head>

<style type="text/css">
#linkShowNews {
display:block;
float:left;
text-align:center;
background-image:url(/immagini/immagini_barra_nav/bott_news.gif);
width:122px;
height:20px;
margin:33px 5px 10px 35px;
color:#2B7130;
line-height:20px;
font-size:14px;
font-weight:bold;
}
#layerNews {
display:none;
z-index:999;
position:absolute;
top:52px;
left:320px;
border:2px solid #009900;
width:400px;
height:400px;
background-image:url(/immagini/immagini_comuni/logo_piccolo.gif);
background-position:bottom right;
background-repeat:no-repeat;
}
#containerContentNews {
margin:0;
padding:0;
display:block;
border:1px solid red;
}
#contentNews {
padding:4px;
display:none;
margin:0;
}
#contentNews p {
margin:3px 0 3px 0;
padding:0;
clear:both;
}
#contentNews p span {
display:block;
width:100px;
float:left;
height:20px;
}
#contentNews p span.nSottoCat {
width:auto;
}
#contentNews p#tratteggio {
background-image:url(/immagini/immagini_comuni/trattino.gif);
background-repeat:repeat-x;
}

</style>

<div id="layerNews" class="WCHhider">

<div id="contentNews">

XXXXXX

XXXXXX

XXXXXX:xxxxx

XXXXXX:xxxxx

XXXXXX:xxxxx

XXXXXX:xxxxx

XXXXXX:xxxxx

XXXXXX:xxxxx

XXXXXX

XXXXXX

XXXXXX

XXXXXX:xxxxx


xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx x
<div class="separatore"></div>
</div>

</div>

Le ultime novità

<script type="text/javascript">
divNews = prendiElementoDaId('layerNews');
linkNews = prendiElementoDaId('linkShowNews');
innerNews = prendiElementoDaId('contentNews');

var toHide = false;

var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
var tempX = 0
var tempY = 0

document.onmousemove = getMouseXY;

function prendiElementoDaId(id_elemento) {
var elemento;
if(document.getElementById)
elemento = document.getElementById(id_elemento);
else
elemento = document.all[id_elemento];
return elemento;
};

linkNews.onclick = function () {
if (divNews.style.display != 'block') {
divNews.style.width="0px";
divNews.style.height="0px";
divNews.style.left = 320+"px";
divNews.style.display='block';
growUp();
}
};

linkNews.onmouseover = function () {
toHide = false;
if (IE) {
WCH.Apply('layerNews');
}
if (divNews.style.display != 'block') {
divNews.style.width="0px";
divNews.style.height="0px";
divNews.style.left = 320+"px";
divNews.style.display = 'block';
growUp();
}
};

linkNews.onmouseout = function () {
if (parseInt(divNews.style.width) < 400) {
toHide = false;
}
else {
toHide = true;
if (IE) {
WCH.Discard('layerNews');
}
}
};

function mostraNews() {
toHide = false;
if (divNews.style.display != 'block') {
divNews.style.width="0px";
divNews.style.height="0px";
divNews.style.left = 320+"px";
divNews.style.display = 'block';
growUp();
}
};

function nascondiNews() {
if (parseInt(divNews.style.width) < 399) {
toHide = false;
}
else {
toHide = true;
slideDown()
}
};

function growUp() {
if (parseInt(divNews.style.width) < 400) {
divNewsW = parseInt(divNews.style.width);
divNewsH = parseInt(divNews.style.height);
divNews.style.width = ""+(divNewsW + 100)+"px";
divNews.style.height = ""+(divNewsH + 100)+"px";
divNews.style.left = parseInt(divNews.style.left)-20+"px";
setTimeout('growUp()',1);
}
else {
divNews.style.backgroundColor = '#FFFFFF';
divNews.style.backgroundImage = 'url(/immagini/immagini_comuni/logo_piccolo.gif)';
innerNews.style.display = 'block';
}
};

function slideDown() {
if (parseInt(divNews.style.width) > 399) {
innerNews.style.display = 'none';
divNews.style.backgroundColor = '';
divNews.style.backgroundImage = 'none';
divNewsW = parseInt(divNews.style.width);
divNewsH = parseInt(divNews.style.height);
divNews.style.width = ""+(divNewsW - 100)+"px";
divNews.style.height = ""+(divNewsH - 100)+"px";
divNews.style.left = parseInt(divNews.style.left)+20+"px";
setTimeout('slideDown()',1);
}
else {
divNews.style.display = 'none';
}
};

function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}

//debug.innerHTML = '[posX= '+ tempX + '] - [posY= ' + tempY + '] - [toHide= ' + toHide +']';

if ((tempX > 240 && tempX < 620 && tempY > 52 && tempY < 452) || (toHide == false)) {
return false;
}
else {
if (toHide == true) {
slideDown();
}
}

return true
};
</script>

Lo script WCH.js e' quello che si trova sul sito:
http://www.aplus.co.yu/wch/intro/

e dovrebbe servire per correggere il bug di IE che non sovrappone il layer ad altri oggetti presenti nella pagina.

La soluzione che ho sviluppato fino ad adesso non e' per nulla soddisfacente, in quanto la posizione del layer che compare e' assoluta rispetto al suo contenitore, che in alcuni casi si trova piu' in basso e in altri piu' in alto, per cui la cattura della posizione del mouse per far scomparire il layer se ne va a farsi benedire.

In oltre, il layer continua a non sovrapporsi a tutti gli altri elementi della pagina.

Se per caso aveste una soluzione, ve ne sarei grato.
Anche se devo riscrivere tutto da capo.

Grazie in anticipo.

**Mega69** · 07-09-2006, 18:03

Nel css usa un margin-left negativo per risolvere la faccenda del posizionamento assoluto;
per farlo sovrapporre, usa invece uno z-index maggiore rispetto a quello degli altri elementi della pagina, oppure metti il tag del layer prima di </body> .

**KillEmAll** · 08-09-2006, 09:21

Finalmente ce l'ho fatta.

Prendendo pezzi di codice in giro e modificando quello scritto da me e' ottenuto questo:

PAGINA JSP:

<HTML>
...
<BODY>
...
Le ultime novità
...
...
...
<style type="text/css">
#linkShowNews {
display:block;
float:left;
text-align:center;
background-image:url(/immagini/immagini_barra_nav/bott_news.gif);
width:122px;
height:20px;
margin:33px 5px 10px 35px;
color:#2B7130;
line-height:20px;
font-size:14px;
font-weight:bold;
}
#layerNews {
display:none;
z-index:999;
position:absolute;
top:52px;
left:320px;
border:2px solid #009900;
width:400px;
height:352px;
background-image:url(/immagini/immagini_comuni/logo_piccolo.gif);
background-position:bottom right;
background-repeat:no-repeat;
}
#DivShim {
position:absolute;
top:52px;
left:320px;
display:none;
z-index:998;
}
#containerContentNews {
margin:0;
padding:0;
display:block;
}
#contentNews {
padding:4px;
display:none;
margin:0;
}
#contentNews p {
margin:3px 0 3px 0;
padding:0;
clear:both;
text-transform:lowercase;
text-transform:capitalize;
}
#contentNews p span {
display:block;
width:100px;
float:left;
height:20px;
}
* html #contentNews p span {
height:15px;
}
#contentNews p span.nSottoCat {
width:auto;
}
#contentNews p#tratteggio {
background-image:url(/immagini/immagini_comuni/trattino.gif);
background-repeat:repeat-x;
}

</style>

<div id="layerNews" onMouseOver="clearTimeout(this.tid);" onMouseOut="this.tid = setTimeout('nascondiNews()', 500);">

<div id="contentNews">

xxx

xxx

xxx:xxx

xxx:xxx

xxx:xxx

xxx:xxx

xxx:xxx

xxx:xxx

xxx

xxx

xxx

xxx:xxx


xxx

xxx

xxx

xxx
<div class="separatore"></div>
</div>

</div>

<script type="text/javascript" src="/js/layesNovita.js"></script>
</BODY>
</HTML>

SCRIPT layerNovita.js

/* GET ELEMENT */
function prendiElementoDaId(id_elemento) {
var elemento;
if(document.getElementById)
elemento = document.getElementById(id_elemento);
else
elemento = document.all[id_elemento];
return elemento;
};
/**********************/

/* INIZIALIZZAZIONE VARIABILI */
divNews = prendiElementoDaId('layerNews');
linkNews = prendiElementoDaId('linkShowNews');
innerNews = prendiElementoDaId('contentNews');
IfrRef = prendiElementoDaId('DivShim');
var toHide = false;

var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE);
var tempX = 0;
var tempY = 0;

/**********************/

/* GROWUP ELEMENT */
function growUp() {
if (parseInt(divNews.style.width) < 400) {
divNewsW = parseInt(divNews.style.width);
divNewsH = parseInt(divNews.style.height);
divNews.style.width = ""+(divNewsW + 100)+"px";
divNews.style.height = ""+(divNewsH + 88)+"px";
divNews.style.left = parseInt(divNews.style.left)-20+"px";
if (IE) {
IfrRef.style.width = divNews.offsetWidth;
IfrRef.style.height = divNews.offsetHeight;
IfrRef.style.top = divNews.style.top;
IfrRef.style.left = divNews.style.left;
IfrRef.style.zIndex = divNews.style.zIndex - 1;
IfrRef.style.display = "block";
}
var repeatGrow = setTimeout('growUp()',1);
}
else {
divNews.style.backgroundColor = '#FFFFFF';
divNews.style.backgroundImage = 'url(/immagini/immagini_comuni/logo_piccolo.gif)';
innerNews.style.display = 'block';
clearTimeout(repeatGrow);
}
};
/**********************/

/* ACTION ON MOUSE OVER LINK */
function mostraNews() {
setTimeout('startGrow()',500);
};

function startGrow() {
if (divNews.style.display != 'block') {
divNews.style.width="0px";
divNews.style.height="0px";
divNews.style.left = 320+"px";
divNews.style.display = 'block';
growUp();
}
};
/**********************/

function nascondiNews() {
slideDown();
};

function slideDown() {
if (parseInt(divNews.style.width) > 399) {
innerNews.style.display = 'none';
divNews.style.backgroundColor = '';
divNews.style.backgroundImage = 'none';
divNewsW = parseInt(divNews.style.width);
divNewsH = parseInt(divNews.style.height);
divNews.style.width = ""+(divNewsW - 100)+"px";
divNews.style.height = ""+(divNewsH - 100)+"px";
divNews.style.left = parseInt(divNews.style.left)+20+"px";
setTimeout('slideDown()',1);
}
else {
divNews.style.display = 'none';
}
};

Discussione: Creare un layer come amazone

Strumenti discussione

Ricerca discussione

Visualizza

Creare un layer come amazone

Permessi di invio