parentNode

[djp1988]

Hi, here is my html:

 <div class="bookIMG"> <img class="bookCover" onmouseover="myfunction()" src="book/atlas_mp2.jpg" width="66" height="94" /><br />	Atlas régional </div>

Javascript

myfunction(){// what's the javascript to reference the parentNode? and then change some style on it}

How can I get it so the div which is parent to the image with the onmouseover changes zindex onmouseover?So I want it so the div becomes zindex:1; onmouseover of the childNode which is the image

[jeffman]

<div class="bookIMG">    <img class="bookCover" onmouseover="myfunction(this.parentNode)" src="book/atlas_mp2.jpg" width="66" height="94" />...<script>myfunction(node){	node.style.zIndex = 1; }

[justsomeguy]

<img class="bookCover" onmouseover="myfunction(this)" ....

function myfunction(obj){  obj.parentNode.style.zIndex = 1;}

[djp1988]

Thank you, please let me relate this back to my project, if you click on the large lower middle region on the map, called midi-pyrenees, the div that appears under has 2 images, and onmouseover these zoom, but the first goes under the second, I am trying to give the div what holds the image a higher zindex so that it will go on top of the second image, but I am not doing it correctly:http://code.herpfrance.com/france%20copy/france.html

[djp1988]

here is the problem: http://code.herpfrance.com/zindextry.html

[justsomeguy]

Are you resetting the z-index on mouseout? You also might want to use a higher value than 1, like 1000. Set it to 1000 on mouse over and 1 on mouse out.

[jeffman]

I think I understand. We are dynamically changing the size of the image, but the size of the container div is fixed at 100px. So changing the z-index of the container is presumably "working," but doesn't create the desired effect because the container itself doesn't grow. (Yes, containers can be smaller than the things they contain.) You probably played with the z-index of the image as well, and that doesn't work either. I presume z-index in this context is relative to the things in the container.So I made the container div grow and shrink, as you can see from the code below. You be the judge of the result. Because both divs are positioned using the float property, growing the left div pushes the right div over to the side. It is less annoying than the goofy layering, but you might not like it.If you don't like it, the only way to keep the right div from moving is to position it using the position property and some coordinates. That introduces other headaches, but you may decide they are worth it.

   function zoomIn(img) {	  clearTimeout (img.timeout);	  if(img.width < img.largeWidth - img.wInc) {		 img.width += img.wInc;		 img.height += img.hInc;		 img.parentNode.style.width = img.parentNode.offsetWidth + img.wInc + "px"; // NEW		 img.parentNode.style.color = 'red';		 img.timeout = setTimeout(function () {zoomIn(img)}, 1);	  } else {		 img.width = img.largeWidth;		 img.height = img.largeHeight;	  }   }   function zoomOut(img) {	  clearTimeout (img.timeout);	  if(img.width > img.baseWidth + img.wInc) {		 img.width -= img.wInc;		 img.height -= img.hInc;		 img.parentNode.style.width = img.parentNode.offsetWidth - img.wInc + "px"; // NEW		 img.timeout = setTimeout(function () {zoomOut(img)}, 1);	  } else {		 img.width = img.baseWidth;		 img.height = img.baseHeight;		 img.parentNode.style.width = "100px"; // NEW	  }   }

On a different note, now that other things are working, I may have given you bad advice in another thread. Once you have taken care of the above, please try restoring this line, thus, without the second test:if( imagees.className == "bookCover") {The longer version works fine in FireFox but breaks my Safari 3. It won't even test the existence of a "class" property without throwing a parse error. Most annoying. It ought simply to return false. So I'm hoping that using className wasn't the problem but was, as Ingolme suggested, using the word "images," which of course you have now francified.

[justsomeguy]

The longer version works fine in FireFox but breaks my Safari 3. It won't even test the existence of a "class" property without throwing a parse error. Most annoying. It ought simply to return false. So I'm hoping that using className wasn't the problem but was, as Ingolme suggested, using the word "images," which of course you have now francified.

Have no fear! You can use getAttribute instead of referencing the attribute name directly.if( imagees.getAttribute("class") == "bookCover") {

[jeffman]

Bloody brilliant, Morethan!