Hallo Zusammen.
Mein Problem ist die Anzeige von Grafiken in unterschiedlichen Browsern.
Es wird zunächst mit der Maus ein kleines Bild (ca. 40x30) überfahren. Dabei wird das Bild in einer anderen Position vergrößert (ca. 80x60) angezeigt. Wird jetzt der Mausclick durchgeführt, wird das Bild in der Größe ca. 200 x 150 angezeigt und bleibt in der Position stehen. Jetzt kann man wieder aus mit der Maus über die kleinen Bilder ziehen. Das große Bild bleibt solange erhalten, bis wieder ein Mausclick erfolgt.
Mit dem Internetbrowsern und firefox gibt es kein Problem. Bei google Chrome wird mit dem Mausclick das große Bild angezeigt, bleibt aber nicht stehen.
Der Programmteil sieht wie folgt aus:
-Body
<div id="bildpad">
<li><a href="javascript:Zeigen(1)"><img name="arb1" title="" alt="" /></a></li>
<li><a href="javascript:Zeigen(2)"><img name="arb2" title="" alt="" /></a></li>
<li><a href="javascript:Zeigen(3)"><img name="arb3" title="" alt="" /></a></li>
<li><a href="javascript:Zeigen(4)"><img name="arb4" title="" alt="" /></a></li>
<li><a href="javascript:Zeigen(5)"><img name="arb5" title="" alt="" /></a></li>
<li><a href="javascript:Zeigen(6)"><img name="arb6" title="" alt="" /></a></li>
</div>
-css
#bildpad { position:absolute; background: url(grafiken/click.jpg);
margin-left:2px; margin-top: 47px; padding:0; width:588px; height:441px; border: solid 4px #8C3330; }
a,
a:visited,
a:hover,
a:active,
a:focus {font-weight:normal;} /* for IE6 */
#bildpad li { list-style-type:none; width:84px; height:63px; float:left; z-index:100; }
#bildpad li.lft { float:left; clear:left; }
#bildpad li.rgt { float:right; clear:right; }
#bildpad a { position:relative; width:82px; height:62px; display:block; float:left; border: solid 1px white; z-index:100; cursor:default; }
#bildpad a img { position:relative; width:82px; height:62px; border: 0px solid red;z-index:100; }
#bildpad a:hover { position:absolute; width:320px; height:240px; margin: 0px; padding:100px 134px; left:0; top:0; z-index:20; }
#bildpad a:hover img { background:#eee; position:relative; width:316px; height:220px; border: 3px solid #ABC645; z-index:20; }
#bildpad a:active, #bildpad a:focus { position:absolute; background:transparent;
width:588px; height:350px; padding:60px 8px; left:0; top:0; border: 0px solid red; z-index:10;}
#bildpad a:active img, #bildpad a:focus img { background:#eee; position:relative;
margin-top: 5px; margin-left: 77px; width:410px; height:305px; border: 4px solid #ABC645;z-index:10; }
#bildpad li.pad { display:block; margin-top:0px; width:560px; height:0px; font-size:0; }
- Javascript
function Zeigen(Nummer) {
bildjetzt = Nummer;
document.getElementById("bildtitel").innerHTML = bilder[bildjetzt][1];
document.getElementById("bildpad").src = bilder[bildjetzt][2];
document.getElementById("textbereich").innerHTML = bilder[bildjetzt][3];
}
Was kann man tun, damit auch in firefox das Bild stehn bleibt?
Gruß hadida