homepage Welcome to WebmasterWorld Guest from 54.197.215.146
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
DIV elements covering others - not consistent in this behaviour
judgedredd




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

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




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

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)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved