Newsgroup: it.comp.www.html
Titolo: css: hidden

Ho bisogno che un layout compaia
al passaggio del mouse sopra una
determinata porzione dello schermo,
e scompaia di conseguenza.
E' possibile farlo attraverso
     visibility:hidden;
??? Come i usa ?
Grazie

+++++++++[<++++++++>-]<----.>+++++[<+>-]<.>++++[<-->-]<.>+++++[<++++>-]<.

"P.o.l" ha scritto:

Dovresti usare dhtml, javascript e il dom per modificare
gli stili al verificarsi di determinati eventi. Se sono cose che
non sai ma vorresti imparare trovi dei buoni tutorial su:
http://www.brainjar.com/dhtml/intro/
http://www.brainjar.com/dhtml/events/
http://codepunk.hardwar.org.uk/bjs.htm
http://codepunk.hardwar.org.uk/ajs.htm
Altrimenti prova a chiedere su it.comp.lang.javascript
Saluti,
  SantaKlauss

diau ha scritto:
| non so se fa al caso tuo, prova a dare un'occhiata a
| 
http://www.meyerweb.com/eric/css/edge/popups/demo.html
Ciao Diau,
    lo stavo per suggerire anch' io... solo che poi ho pensato
che la tecnica di Meyer usa uno span innestato in un link
che viene reso visibile al passaggio del mouse sullo stato
a:hover, e c'e' da dire che in un tag <a> che e' un elemento
inline puoi inserire solo altri elementi inline, quindi solo
immagini e span... quindi non credo che possa andare, dato
che P.O.L chiedeva "un layout" (presumo un div) che diventa
visibile al passaggio del mouse.
Sono un paio di righe javascript... ora non ho tempo, magari
se ce la faccio stasera le posto.
Saluti,
    SantaKlauss

P.o.l ha scritto:

Ecco la soluzione con javascript se ho capito bene il tuo quesito.
Ero in vena creativa stasera e così ecco una pagina html completa.
Saluti,
    SantaKlauss
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd
">
<html>
<head>
<title>Prova Display</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 2.6">
<script type="text/javascript">
function Show(id)
{
document.getElementById(id).style.visibility="visible";
}
function Hide(id)
{
document.getElementById(id).style.visibility="hidden";
}
</script>
<style type="text/css">
body{
    margin: 10px;
    padding: 0px;
    background-color: #0bb
    }
a#passhere{
    display: block;
    width: 200px;
    border: 3px outset #fff;
    background-color: #f80;
    color: #38f;
    font-family: arial, sans-serif;
    font-size: 12pt;
    font-weight: bold;
    text-align: center;
    text-decoration: none
    }
a#passhere:hover{
    border: 3px inset #fff;
    color: #fff
    }
div#layout{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 200px;
    border: 2px solid #000;
    background-color: #fff;
    color: #444
    }
div#layout p{
    margin: 5px;
    font-family: georgia, serif;
    font-size: 10pt;
    font-weight: bold;
    text-align: justify
    }
</style>
</head>
<body>
<a href="#" id="passhere" onmouseover="javascript:Show('layout')" onmouseout=javascript:Hide('layout')>
    To know the story about SantaKlauss...
</a>
<div id="layout" style="visibility: hidden">
    <p>Since the 1950s, Santa has happily sojourned at Napapiiri,
       near Rovaniemi, at times other than Christmas, to meet children
       and the young at heart. By 1985 his visits to Napapiiri had become
       so regular that he established his own Santa Claus Office there. He
       comes there every day of the year to hear what children want for Christmas
       and to talk with children who have arrived from around the world...
    </p>
</div>
</body>
</html>