1. Home
  2. Forums Index
  3. Browser Side / HTML 5:14 am May 1, 2026

Forum Moderators: open

Message Too Old, No Replies

DIV elements covering others - not consistent in this behaviour

         

judgedredd

12:38 am on Aug 25, 2012 (gmt 0)

10+ Year Member



Hi,

I have created a webpage that has about 11 thumb tacks on a map. When people hover over any of these tacks an image with wording pops up.

These images vary in length due to the statement varying in length.

Now, most of the images, when they pop into view, cover other tacks, which is what I want them to do. But there are about three images that when they pop into view they appear UNDER some of the tacks (the ones that are 'in their way') which is NOT what I want.

I have found that the first tack in the CSS list needs to have a z-index value (I gave it 1) otherwise it does not pop into view.

So, does anyone know why the three images when they pop into view do so UNDER the tacks?

When the UK pops up it is OVER all the other tacks in its vicinity (Russia, Canada and partially Italy); when China pops up part of it is under the tack from Israel; When Russia pops up it is partly under the tack from the UK but partly over the tack from Canada; when Canada pops up it is partly under the tack from the UK;

I have included four images of what I am talking about, the relevant CSS code and the relevant HTML code. I hope that all this is acceptable. I know that I can't give out the site address which is why I have captured images of what is going on.

The CSS code has the countries by a two letter abbreviation (ie. #US-slogan for the pop up image for Los Angeles). That should make it easy to see which CSS element activates what pop up image.

<snip>

The relevant CSS code for all tacks: 
#UK-slogan { 
z-index:1;
position: relative;
float: left;
left: 317px;
top: -455px;
}

#US-slogan {
position: relative;
float: left;
left: -170px;
top: -417px;
}

#CA-slogan {
position: relative;
float: left;
left: -455px;
top: -441px;
}

#BR-slogan {
position: relative;
float: left;
left: 230px;
top: -340px;
}

#AU-slogan {
position: relative;
float: left;
left: 165px;
top: -330px;
}

#CH-slogan {
position: relative;
float: left;
left: -167px;
top: -464px;
}

#RU-slogan {
position: relative;
float: left;
left: 348px;
top: -535px;
}

#IS-slogan {
position: relative;
float: left;
left: 35px;
top: -486px;
}

#IT-slogan {
position: relative;
float: left;
left: -215px;
top: -509px;
}

#JM-slogan {
position: relative;
float: left;
left: 155px;
top: -492px;
}

#AR-slogan {
position: relative;
float: left;
left: -191px;
top: -384px;
}


AR = Argentina
JM = Jamaica
IT = Italy
IS = Israel

The relevant HTML code: 

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
 var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
 if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
 if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

</head>

<body bgcolor="#d3e7fc" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onLoad="MM_preloadImages('images/UK.jpg','images/USA.jpg','images/AUS.jpg','images/CA.jpg','images/BR.jpg','images/AU.jpg','images/CH.jpg','images/RU.jpg','images/IS.jpg','images/IT.jpg','images/JM.jpg','images/AR.jpg')">

<div id="UK-slogan" style="width:299px; height:28px;">
<img src="images/black-tack.png" name="Image1" border="0" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/UK.jpg',1)">
</div>

<div id="US-slogan" style="width:356px; height:28px;">
<img src="images/black-tack1.png" name="Image2" border="0" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/USA.jpg',1)">
</div>

<div id="CA-slogan" style="width:329px; height:28px;">
<img src="images/black-tack2.png" name="Image3" border="0" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/CA.jpg',1)">
</div>

<div id="BR-slogan" style="width:340px; height:28px;">
<img src="images/black-tack3.png" name="Image4" border="0" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/BR.jpg',1)">
</div>

<div id="AU-slogan" style="width:319px; height:28px;">
<img src="images/black-tack4.png" name="Image5" border="0" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/AU.jpg',1)">
</div>

<div id="CH-slogan" style="width:282px; height:47px;">
<img src="images/black-tack5.png" name="Image6" border="0" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','images/CH.jpg',1)">
</div>

<div id="RU-slogan" style="width:346px; height:28px;">
<img src="images/black-tack6.png" name="Image7" border="0" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','images/RU.jpg',1)">
</div>

<div id="IS-slogan" style="width:266px; height:28px;">
<img src="images/black-tack7.png" name="Image8" border="0" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','images/IS.jpg',1)">
</div>

<div id="IT-slogan" style="width:180px; height:28px;">
<img src="images/black-tack8.png" name="Image9" border="0" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','images/IT.jpg',1)">
</div>

<div id="JM-slogan" style="width:405px; height:47px;">
<img src="images/black-tack9.png" name="Image10" border="0" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','images/JM.jpg',1)">
</div>

<div id="AR-slogan" style="width:327px; height:28px;">
<img src="images/black-tack10.png" name="Image11" border="0" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','images/AR.jpg',1)">
</div>


The map code is missing as it is not needed here. Correct me if I am wrong.

Anyway, thanking anyone in advance.

[edited by: incrediBILL at 1:02 am (utc) on Aug 25, 2012]
[edit reason] removed URLS, see TOS & Charter - paste all relevant data in post [/edit]

lostdreamer

2:56 pm on Sep 11, 2012 (gmt 0)

10+ Year Member



ok, UK is allways on top of anything because you raised it's z-index above the rest....

What you could try is remove the z-index you allready have in there and add the following CSS: 

div img {
 z-index:1;
}
div img:hover {
 z-index:10;
}


This will put all images in the same layer, but an image that has the mouse over it will go a few layers up (thus covering the lower z-index images)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / HTML 5:14 am May 1, 2026