Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2004
    Location
    Vancouver, Can
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy layered elements react to mouse differently in Moz1 - IE6.

    Hi

    I think this is a dom thing. I have a large img overlayed by three 'hidden' divs which I use as button hit zones. In Moz they work fine but in IE6 the img insists on being in front of the hit zones thereby blocking them from being able to 'see' the mouse.

    Here is what I think is the relevant code (a little messy because i'm messing around with it)

    Code:
    ------>> the large img <<------
    
    		<div id="pitch">	 <!-- image map -->
    
    ------>> soccer players <<-------
    
    			<img id="home_pitch" border="0" src="./images/soccer_pitch_03.png" alt="Drawing of a soccer pitch.">
    			
    			<img id="def_1" border="0" src="./images/arrow_purple_left_02.png" alt="A Little Defender">
    			<img id="def_2" border="0" src="./images/arrow_purple_left_02.png" alt="A Little Defender">
    
    ----->> img icons of many little soccer players clipped <<-------
    
    ----->> the hit zones <<-------
    		
    			<!-- <span id="map_offense" onmouseover="omo(this, event)" onmousedown="omd(this,event)" onmouseup="omu(this,event)" onmouseout="omt(this,event)" onclick="goHere(this)"></span> -->
    
    			<span id="map_offense"  onmousedown="showText(this,event)" onclick="goHere(this)"></span>
    
    			<span id="map_neutral" onmouseover="omo(this, event)" onmousedown="omd(this,event)" onmouseup="omu(this,event)" onmouseout="omt(this,event)" onclick="goHere(this)"></span>
    			
    			<span id="map_defense" onmouseover="omo(this, event)" onmousedown="omd(this,event)" onmouseup="omu(this,event)" onmouseout="omt(this,event)" onclick="goHere(this)"></span>
    hit zone css sample:

    Code:
    #map_neutral
    {
    	position: absolute;
    	top: -1%;
    	left: 30%;
    	width: 34%;
    	height: 100%;
    }
    large image css:
    Code:
    #pitch
    {
    	position: absolute;
    	width: 55%;
    	height: 55%;
    	top: 24%;
    	left: 22%;
    }

    Thanks.

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Well, iew is messy in this respect, with click-through and such. However, start out by giving your overlays a solid background colour to show if they are positioned as you want them in iew. Then we can work from there.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    New to the CF scene
    Join Date
    Oct 2004
    Location
    Vancouver, Can
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you, yes I have done that - they are in the right place in both browsers.

  • #4
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Okay, they are in the right place and above the image, then?
    Now test whether they trigger the mouse events when you have a solid background colour. Just use some dummy background-color changing event.

    Then try the same but with a fully transparent layer as standard.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #5
    New to the CF scene
    Join Date
    Oct 2004
    Location
    Vancouver, Can
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The background img is a solid color.

    Sorry, I guess you mean the overlays - too many things going on at once.

    I'm going to be working on an assignment for school the next couple of days so I won't be doing much on this.

    Thanks very much for your help - I'll be back soon


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •