Visualizzazione risultati 1 fino 1 di 1

Discussione: [JS + CSS] parentNode + tag h2

  1. #1
    Guest

    Predefinito [JS + CSS] parentNode + tag h2

    Salve a tutti, eccomi ancora qui con un problema: ho creato questa pagina (non badate alla rozzezza, è ancora agli inizi) e ho fatto in modo che passando col mouse su ognuno dei div questo si allarghi fino a contenere la descrizione del marchio e un link (per ora inattivo) per aprire la pagina relativa al marchio stesso.
    Gli eventi usati sui div sono 'onmouseover' per allargare il div e 'onmouseout' per riportarlo a grandezza naturale, ho ovviato al fatto che il link è considerato come onmouseout usando il parentNode e tutto funziona.
    Ho però deciso di aggiungere un <h2> come titolo dei div che si allargano (per ora solo il primo, "Creed" contiene l´<h2>), ma nonostante il parentNode è considerato ancora come onmouseout, come potrei risolvere?
    Se non mi sono spiegato bene basta che apriate il link e tutto vi sarà più chiaro.

    Questo è il codice css di uno dei div:
    Codice:
    .prova1 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100px;
    height: 100px;
    border-color: black;
    border-style: solid;
    border-width: 1px;
    z-index: 1;
    background-color: #fdeaaa;
    text-align: center;
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    }
    Il codice css dell'<h2>:
    Codice:
    h2 {
    color: #fdeaaa;
    background-color: #006600;
    margin: 0 0 0 0;
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    }
    Le due funzioni javascript che gestiscono gli eventi (nella seconda è integrato il parentNode):
    Codice:
    function prova(id,content) {
    div = document.getElementById(id);
    div.style.height = "200px";
    div.style.width = "200px";
    div.style.margin= "-50px 0 0 -50px";
    div.style.zIndex = 99;
    div.innerHTML = content;
    }
    function provadue(id,content,e) {
    div = document.getElementById(id);
    if (!e) var e = window.event;
    var relTarg = e.relatedTarget || e.toElement;
    if (relTarg.parentNode != div && relTarg != div) {
    div.style.height = "100px";
    div.style.width = "100px";
    div.style.margin= "0 0 0 0";
    div.style.zIndex = 1;
    div.innerHTML = content;
    }
    }
    E infine il codice con cui richiamo le funzioni sul div:
    Codice HTML:
    <div class="prova1" id="creed" onmouseover="prova(´creed´,´<a href=´#´><h2>Creed</h2></a><br />descrizioneblabla´);" onmouseout="provadue(´creed´,´Creed´,event);">Creed</div>
    Tutto il codice è proprietario, ho letto alcuni manuali su internet per il parentNode e ho provato pure a cercare questo problema ma nada, un aiuto è più che gradito, grazie mille cmq ^^
    Ultima modifica di laconteaganesh : 17-02-2009 alle ore 18.54.57

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •