Probleme mit javaScript und IE6

U

UncleB

Mitglied
Guten Abend,
Ich hab ein Problem mit dem IE6 und nem JavaScript,
Da ich momentan die Website für unseren Verein neugestallte hat mir ein Freund ein Programm geschrieben, das wenn man mit der Maus ein Kopf vom Mannschaftsfoto hovert, dessen Player Profile in einer Div ausgegeben wird.
Funktioniert mit FF und IE7 eigtl wunderbar, siehe hier, aber der IE6 muckt rum, da funktioniert das Script nur wenn man den border hovert...
Kann mir da jemand weiterhelfen?

Hier noch der Code:

PHP: 
<script type="text/javascript">

function showinfo (inf)
{
    document.getElementById('info').style.display = 'block';
    document.getElementById('info').style.visibility = 'visible';
    document.getElementById('info').innerHTML = document.getElementById('person-'+inf).innerHTML;
}

function hideinfo ()
{
    document.getElementById('info').style.display = 'none';
    document.getElementById('info').style.visibility = 'hidden';
    document.getElementById('info').innerHTML = '';
}

</script>

<style type="text/css">
.person-link {
    cursor:pointer;
    background: none;
    opacity: 0.3;
    filter:Alpha(opacity=100, finishopacity=0, style=3);
    border: 1px solid #cfcfcf;
    position:absolute;
}
.person-link:hover {
    background: #fff;
}
</style>

<div id="info" style="left:100px; top:200px; width:300px;padding:5px;display:none;visibility:hidden;"></div>

<div style="z-index: 3;left:100px;top:20px;position:absolute;width:500px;height:307px;">
    <img style="position:absolute;" src="/svf/gfx/mannschaftspics/1_2_08.jpg" width="500" height="307" id="bild" />

    <!-- Personenlink 1 -->
    <div class="person-link" onmouseout="hideinfo();" onmouseover="showinfo('Huber');" style="top:68px;left:72px;width:25px;height:29px;"></div>

    <!-- Personenlink 2 -->
    <div class="person-link" onmouseout="hideinfo();" onmouseover="showinfo('Daberger');" style="top:73px;left:118px;width:25px;height:29px;"></div>
	
	<!-- Personenlink 3 -->
    <div class="person-link" onmouseout="hideinfo();" onmouseover="showinfo('Wagner');" style="top:71px;left:164px;width:25px;height:29px;"></div>
	
	<!-- Personenlink 4 -->
    <div class="person-link" onmouseout="hideinfo();" onmouseover="showinfo('Mayer');" style="top:68px;left:211px;width:25px;height:29px;"></div>
	
	<!-- Personenlink 5 -->
    <div class="person-link" onmouseout="hideinfo();" onmouseover="showinfo('Rotherbl');" style="top:67px;left:260px;width:25px;height:29px;"></div>

	<!-- Personenlink 6 -->
    <div class="person-link" onmouseout="hideinfo();" onmouseover="showinfo('Lipp');" style="top:63px;left:311px;width:25px;height:29px;"></div>

	<!-- Personenlink 7 -->
    <div class="person-link" onmouseout="hideinfo();" onmouseover="showinfo('Egglmeier_C');" style="top:72px;left:360px;width:25px;height:29px;"></div>

	<!-- Personenlink 8 -->
    <div class="person-link" onmouseout="hideinfo();" onmouseover="showinfo('Grander');" style="top:63px;left:407px;width:25px;height:29px;"></div>


</div>

<!-- Personeninformation 1 -->
<div id="person-Huber" style="display:none;visibility:hidden;">
    <h1>Georg Huber</h1>
    Player Profile Huber
</div>

<!-- Personeninformation 2 -->
<div id="person-Daberger" style="display:none;visibility:hidden;">
    <h1>Maximilian Daberger</h1>
    Player Profile Daberger

</div>

<!-- Personeninformation 3 -->
<div id="person-Wagner" style="display:none;visibility:hidden;">
    <h1>Reinhard Wagner</h1>
    Player Profile Wagner
</div>

<!-- Personeninformation 4 -->
<div id="person-Mayer" style="display:none;visibility:hidden;">
    <h1>Thomas Mayer</h1>
    Player Profile Mayer

<!-- Personeninformation 5 -->
<div id="person-Rotherbl" style="display:none;visibility:hidden;">
    Player Profile Rotherbl

<!-- Personeninformation 6 -->
<div id="person-Lipp" style="display:none;visibility:hidden;">
    Player Profile Lipp
	
<!-- Personeninformation 7 -->
<div id="person-Egglmeier_C" style="display:none;visibility:hidden;">
    Player Profile Egglmeier C
	
<!-- Personeninformation 8 -->
<div id="person-Grander" style="display:none;visibility:hidden;">
    Player Profile Grander


</body>
</html>
 
Hi,

Code: 
<style type="text/css">
.person-link {
    cursor:pointer;
    background:url(test.gif); /* bewirkt wahre Wunder im IE6 */
    opacity: 0.3;
    filter:Alpha(opacity=100, finishopacity=0, style=3);
    border: 1px solid #cfcfcf;
    position:absolute;
}
.person-link:hover {
    background: #fff;
}
</style>


Die Grafik-Datei mit transparentem Hintergrund und 1*1px-Dimension häng ich hier besser als ZIP-File an :-)

Außerdem solltest du noch die DIVs ab Personeninfo #4 ordnungsgemäß mit dem </div>-Tag schliessen.

mfg Maik
 

Anhänge

Ouuuu man.....
Auf das hät ich ja wirklich selber kommen können :eek:
Aber Danke für die sehr rasche Antwort und die Arbeit, Thx
gruss
 
Achja, hab ich eben ganz vergessen, auch noch darauf hinzuweisen: dem DIV #info fehlt position:absolute, damit seine Positionsangaben überhaupt greifen.

Wenn's recht ist, schieb ich das Thema dann mal rüber ins CSS-Board, denn am JS-Code hat es nicht gelegen, und mit JS haben wir's auch nicht gelöst :-)

mfg Maik
 
Maik hat gesagt.:
Achja, hab ich eben ganz vergessen, auch noch darauf hinzuweisen: dem DIV #info fehlt position:absolute, damit seine Positionsangaben überhaupt greifen.
Zum Vergrößern anklicken....
Kleiner Bugreport, damit das DIV #info nicht hinter/unter dem Bild verschwindet, das derzeit in einem DIV mit einer höheren Schichtposition z-index eingebettet ist ;-)

Code: 
<div id="info" style="left:100px; top:200px; width:300px;padding:5px;display:none;visibility:hidden;position:absolute;z-index:4;"></div>


mfg Maik
 
Danke :)
funktioniert super, nur bin ich am überlegen wo ich die DIV eigtl hin positioniere, weil bein ner auflösung von 1024x768 is des gar nich so einfach hm
 
Wenn du dein gezeigtes Markup zwischen <body> ... </body> in das empfohlene "Konstrukt" einbettest, verhalten sich deine dazu genannten Positionsangaben relativ, somit wird da auch nichts überdeckt, denn innerhalb deines vorgestellten "Info-Konzepts" bleibt alles beim Alten.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück