[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 ^^
