Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien
Toon posts:

[xhtml] zIndex veranderen in IE

Pagina: 1
Acties:

vrijdag 14 maart 2008 21:37

Acties:
  • harrald
  • Registratie: September 2005
  • Laatst online: 16-09 08:44

harrald

Topicstarter
Ik ben bezig met een website waar ik met javascript middels een mouseover een div wil laten verschijnen en na een mouseout weer laten verdwijnen.
Dit werkt perfect in elke browser: FF, opera, safari. behalve in IE |:(

Ik heb de website xhtml en css gevalideerd, en kom der maar niet achter waar Internet Explorer nou op vast loopt.
Volgens Microsoft zelf zou het moeten kunnen als ik dit lees.

ik hoop dat jullie me een zet in de goede richting kunnen geven, want ik weet even niet meer waar te zoeken. :)

hier 2 foto's met het werkende effect in FF: 1 2

XHTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

 
    <div id="fotomenu">
        <div class="fotomenu" id="home">        <img src="afbeeldingen/home.png"    alt="home"      onmouseover="javascript:showButton('home_groot')"/></div>
        <div class="fotomenu" id="contact">     <img src="afbeeldingen/contact.png"     alt="contact"   onmouseover="javascript:showButton('contact_groot')"/></div>
        <div class="fotomenu" id="diensten">    <img src="afbeeldingen/diensten.png"    alt="diensten" onmouseover="javascript:showButton('diensten_groot')"/></div>
        <div class="fotomenu" id="overig1">     <img src="afbeeldingen/overig1.png"     alt=""/></div>
        <div class="fotomenu" id="overig2">     <img src="afbeeldingen/overig2.png"     alt=""/></div>
        <div class="fotomenu" id="overig3">     <img src="afbeeldingen/overig3.png"     alt=""/></div>
        <div class="fotomenu" id="overig4">     <img src="afbeeldingen/overig4.png"     alt=""/></div>
        <div class="fotomenu" id="overig5">     <img src="afbeeldingen/overig5.png"     alt=""/></div>
        <div class="fotomenu" id="fotos">       <img src="afbeeldingen/foto's.png"  alt="foto's"    onmouseover="javascript:showButton('fotos_groot')"/></div>
    </div>
    
    <div id="fotomenu_groot">
        <div class="fotomenu_groot" id="home_groot">
            <img src="afbeeldingen/home_groot.png" alt="home_groot" onmouseout="javascript:hideButton('home_groot')"/>
        </div>
        <div class="fotomenu_groot" id="contact_groot">     
            <img src="afbeeldingen/contact_groot.png" alt="contact_groot" onmouseout="javascript:hideButton('contact_groot')"/>
        </div>
        <div class="fotomenu_groot" id="diensten_groot">    
            <img src="afbeeldingen/diensten_groot.png" alt="diensten_groot" onmouseout="javascript:hideButton('diensten_groot')"/>
        </div>
        <div class="fotomenu_groot" id="fotos_groot">       
            <img src="afbeeldingen/foto's_groot.png" alt="foto's_groot" onmouseout="javascript:hideButton('fotos_groot')"/>
        </div>
    </div>

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163

@charset "utf-8";
/* CSS Document */






#fotomenu
{
    background-image: url(../afbeeldingen/Menu2.png);
    background-repeat:no-repeat;
    background-position:center;
    width: 1024px;
    height: 768px;
    margin-left:-512px;
    left:50%;
    position: absolute;
    z-index: 2;
}

#fotomenu #home
{
    width: 91px;
    height: 69px;
    position: absolute;
    z-index: 11;
    margin-left: 470px;
    margin-top: 82px;
    
}

#fotomenu #fotos
{
    width: 91px;
    height: 120px;
    position: absolute;
    z-index: 14;
    margin-left: 645px;
    margin-top: 255px;
}

#fotomenu #contact
{
    width: 71px;
    height: 94px;
    position: absolute;
    z-index: 13;
    margin-left: 550px;
    margin-top: 306px;
}

#fotomenu #diensten
{
    width: 106px;
    height: 81px;
    position: absolute;
    z-index: 12;
    margin-left: 349px;
    margin-top: 278px;
}

#fotomenu #overig1
{
    width: 76px;
    height: 100px;
    position: absolute;
    z-index: 10;
    margin-left: 404px;
    margin-top: 133px;
}

#fotomenu #overig2
{
    width: 109px;
    height: 83px;
    position: absolute;
    z-index: 14;
    margin-left: 457px;
    margin-top: 378px;  
}

#fotomenu #overig3
{
    width: 97px;
    height: 128px;
    position: absolute;
    z-index: 11;
    margin-left: 468px;
    margin-top: 200px;
}

#fotomenu #overig4
{
    width: 81px;
    height: 110px;
    position: absolute;
    z-index: 12;
    margin-left: 581px;
    margin-top: 166px;
}

#fotomenu #overig5
{
    width: 91px;
    height: 119px;
    position: absolute;
    z-index: 14;
    margin-left: 275px;
    margin-top: 173px;
    
}
/*knoppen menu BEGIN */
            #fotomenu_groot
            {
                width: 1024px;
                height: 768px;
                margin-left:-512px;
                left:50%;
                position: absolute;
            }
            
            #fotomenu_groot #home_groot
            {
                width: 219px;
                height: 116px;
                position: absolute;
                z-index: 1;
                margin-left: 408px;
                margin-top: 35px;
                
            }
            
            #fotomenu_groot #fotos_groot
            {
                width: 165px;
                height: 218px;
                position: absolute;
                z-index: 1;
                margin-left: 610px;
                margin-top: 205px;
            }
            
            #fotomenu_groot #contact_groot
            {
                width: 172px;
                height: 228px;
                position: absolute;
                z-index: 1;
                margin-left: 500px;
                margin-top: 245px;
            }
            
            #fotomenu_groot #diensten_groot
            {
                width: 195px;
                height: 149px;
                position: absolute;
                z-index: 1;
                margin-left: 305px;
                margin-top: 245px;
            }
/*knoppen menu EIND */

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  
// JavaScript Document

function showButton(id)
{
    var knop = document.getElementById(id);
    knop.style.zIndex="20";
    knop.style.cursor="pointer";
}

function hideButton(id)
{
    var knop = document.getElementById(id);
    knop.style.zIndex="1";
}

[ Voor 27% gewijzigd door harrald op 14-03-2008 22:22 ]

vrijdag 14 maart 2008 22:14

Acties:
  • Cascade
  • Registratie: Augustus 2006
  • Laatst online: 18-11 17:28

Cascade

Crisis wat een lap code. Kan je even de relevante code er uit lichten? :')

Ik zie de foto's, leuk bedacht. Maar moet het effect per se met z-index? Kan je proberen om display='block' of 'hidden' daar voor in de plaats te gebruiken?

Verder hoeft in een event attribute niet nog een keer 'javascript:' te staan, het zijn al JavaScript events. Misschien dat IE daar over valt. Dus: onmouseover='bla()' ipv onmouseover='javascript:bla()'.

vrijdag 14 maart 2008 22:19

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 21:56

crisp

Devver

Pixelated

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

Intentionally left blank

vrijdag 14 maart 2008 22:28

Acties:
  • harrald
  • Registratie: September 2005
  • Laatst online: 16-09 08:44

harrald

Topicstarter
Cascade schreef op vrijdag 14 maart 2008 @ 22:14:
Crisis wat een lap code. Kan je even de relevante code er uit lichten? :')

Ik zie de foto's, leuk bedacht. Maar moet het effect per se met z-index? Kan je proberen om display='block' of 'hidden' daar voor in de plaats te gebruiken?

Verder hoeft in een event attribute niet nog een keer 'javascript:' te staan, het zijn al JavaScript events. Misschien dat IE daar over valt. Dus: onmouseover='bla()' ipv onmouseover='javascript:bla()'.
ik heb de code wat verkort :D
ik heb het idd ook nog geprobeert met display block, maar als ik met css zei display:block dan kon javascript dit niet overrulen. als ik met javascript onload zei: dat display:block moest zijn dan werd dat doodleuk genegeerd. :/

javascript: weghalen haalde helaas niks uit. toch bedankt voor de tip, en het meedenken!

vrijdag 14 maart 2008 22:36

Acties:
  • harrald
  • Registratie: September 2005
  • Laatst online: 16-09 08:44

harrald

Topicstarter
crisp schreef op vrijdag 14 maart 2008 @ 22:19:
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
Ik probeer dit te snappen maar zie het niet helemaal voor me.

zie ik het zo een beetje goed voor me?:
ik heb de betreffende afbeeldingen/divs een position absolute meegegeven omdat ik ze precies gepositioneerd wou hebben. maar daardoor gooit IE de z-index door de war...

IE negeert de css ingestelde z-index en stelt een nieuwe in gebaseert op volgorde in de html.
daardoor komen ze nooit boven de vereiste z-index van: 14.


moet ik dus idd van het hele z-index idee af of is er een soort van work around mogelijk?

als ik van z-index af moet, heeft iemand dan mischien een idee om de foto's/divs standaard onzichtbaar te laten zijn maar wel beinvloedbaar door javascript?

zaterdag 15 maart 2008 00:14

Acties:
  • Zillion01
  • Registratie: Juni 2001
  • Laatst online: 31-10 21:41

Zillion01

Obey your screen!

linkje online?

zaterdag 15 maart 2008 16:28

Acties:
  • harrald
  • Registratie: September 2005
  • Laatst online: 16-09 08:44

harrald

Topicstarter
Zillion01 schreef op zaterdag 15 maart 2008 @ 00:14:
linkje online?
Ik heb helaas nog geen hosting beschikbaar.
Anders had dat idd wel handig geweest. :)
Pagina: 1
Reageer

Apple iPhone 17 LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2025 • Hosting door TrueFullstaq