• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Zusammengeschobene gifs werden im Ie nicht dargestellt

Status
Für weitere Antworten geschlossen.
W

Woodstok

Neues Mitglied
[FONT=verdana, arial]Hallo Forum,

ich habe eine difizile Frage. Und zwar habe ich auf meiner Site Homepage von Hoshy und Steph auf der linken Seite für das Menü ein paar gifs erstellt. Die Grafiken bestehen aus 2 Teilen, so dass ich den text schneller austauschen kann - falls sich "hochzeit" mal in "scheidung" ändert, oder so. :D
Dafür würde ich die Grafiken gerne zusammen schieben, sodass die Blubberblasen über die Schrift fliegen. Gegoogelt, selfhtml, etc. Funktion gefunden eingebaut. Funzt bei mir mit Mozilla Firefox super.

Nun die Probleme:
1. Warum werden die Grafiken im Mozilla einwandfrei dargestellt, im IE klappts irgendwie beim ersten Mouseover, danach nicht mehr. :?:
2. Der große Fisch ist als Gif erstellt. Im IE ist das Gif irgendwie langsamer, als im Mozilla.

Quelltext könnt Ihr über den link holen, die Funktion heißt hiLite. Das ist nur eine Testversion. Sorry für den üblen Programmierstil.

Vielen Dank Leute!!!![/FONT]
 
Hallo threadi,

irgendwie krieg ich es nicht hin. Doctype hab ich eingefügt. Vielleicht schafft es der IE nicht innerhalb eines Links ein div-Tag zu verarbeiten. (damit habe ich die gifs zusammen geschoben)

Der Quellcode ist hier:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<META NAME="author" CONTENT="Bj&ouml;rn Ho&szlig;bach">
<META NAME="copyright" CONTENT="kopieren und verlinken von Grafiken, Bildern, Inhalt sowie Quelltext nur mit schriftlicher Genehmigung">
<META NAME="keywords" CONTENT="Bj&ouml;rn Ho&szlig;bach, Stephanie Krause, Private Homepage">
<META NAME="description" CONTENT="Private Homepage von Bj&ouml;rn Ho&szlig;bach und Stephanie Krause">
<META NAME="audience" CONTENT="Alle">
<META NAME="robots" CONTENT="INDEX,FOLLOW">
<META NAME="expires" CONTENT="NEVER">


<title>Homepage von Hoshy und Steph</title>
<link rel=stylesheet type="text/css" href="text.css">

<script type="text/javascript" language="JavaScript">


i01 = new Image();
i01.src = "button/fisch_grau_35px.gif"; /* normale-Grafik */
i02 = new Image();
i02.src = "button/fisch_rot_35px.gif"; /* Highlight-Grafik */
i03 = new Image();
i03.src = "button/01_4_startseite_35px.gif"; /* normale-Grafik */
i04 = new Image();
i04.src = "button/01_startseite_35px.gif"; /* Highlight-Grafik */

i05 = new Image();
i05.src = "button/fisch_grau_35px.gif"; /* normale-Grafik */
i06 = new Image();
i06.src = "button/fisch_orange_35px.gif"; /* Highlight-Grafik */
i07 = new Image();
i07.src = "button/02_4_uberuns_35px.gif"; /* normale-Grafik */
i08 = new Image();
i08.src = "button/02_uberuns_35px.gif"; /* Highlight-Grafik */

i09 = new Image();
i09.src = "button/fisch_grau_35px.gif"; /* normale-Grafik */
i10 = new Image();
i10.src = "button/fisch_gelb_35px.gif"; /* Highlight-Grafik */
i11 = new Image();
i11.src = "button/03_4_freizeit_35px.gif"; /* normale-Grafik */
i12 = new Image();
i12.src = "button/03_freizeit_35px.gif"; /* Highlight-Grafik */

i13 = new Image();
i13.src = "button/fisch_grau_35px.gif"; /* normale-Grafik */
i14 = new Image();
i14.src = "button/fisch_gruen_35px.gif"; /* Highlight-Grafik */
i15 = new Image();
i15.src = "button/04_4_hochzeit_35px.gif"; /* normale-Grafik */
i16 = new Image();
i16.src = "button/04_hochzeit_35px.gif"; /* Highlight-Grafik */

i17 = new Image();
i17.src = "button/fisch_grau_35px.gif"; /* normale-Grafik */
i18 = new Image();
i18.src = "button/fisch_blau_35px.gif"; /* Highlight-Grafik */
i19 = new Image();
i19.src = "button/05_4_gaeste_35px.gif"; /* normale-Grafik */
i20 = new Image();
i20.src = "button/05_gaeste_35px.gif"; /* Highlight-Grafik */

i21 = new Image();
i21.src = "button/fisch_grau_35px.gif"; /* normale-Grafik */
i22 = new Image();
i22.src = "button/fisch_lila_35px.gif"; /* Highlight-Grafik */
i23 = new Image();
i23.src = "button/06_4_kontakt_35px.gif"; /* normale-Grafik */
i24 = new Image();
i24.src = "button/06_kontakt_35px.gif"; /* Highlight-Grafik */


function hiLite(imgID,imgObjName) {
// imgID - Name des auszutauschenden Bildes
// imgObjName - Name des Bildes mit dem ausgetauscht wird
document.images[imgID].src = eval(imgObjName + ".src")
}

</script>



</head>
<body>

<!-- Inhalt -->
<table width="1024" border="0" cellpadding="0" cellspacing="0" align="center">
<td>
<tr>

<td align="left" valign="middle" width="208" nowrap>
<a href="index2.html">
<div id="links">
<p>
<img name="button1" src="button/fisch_grau_35px.gif" border="0" onMouseOver="hiLite('button1', 'i02'); hiLite('text1', 'i04')">
</p>
</div>
<div id="rechts">
<p>
<img name="text1" src="button/01_4_startseite_35px.gif" border="0" onMouseOver="hiLite('button1', 'i02'); hiLite('text1', 'i04')">
</p>
</div>
</a>
</td>

</tr>

<tr>
<td align="left" valign="middle" nowrap><img src="spacer_white.gif" width="100" height="1"><br>
<a href="index2.html">
<div id="links"><img name="button2" src="button/fisch_grau_35px.gif" border="0" onMouseOver="hiLite('button2', 'i06'); hiLite('text2', 'i08')"></div><div id="rechts"><img name="text2" src="button/02_4_uberuns_35px.gif" border="0" onMouseOver="hiLite('button2', 'i06'); hiLite('text2', 'i08')"></div>
</a>
</td>
</tr>


<tr>
<td align="left" valign="middle" nowrap><img src="spacer_white.gif" width="100" height="1"><br>
<a href="index2.html">
<div id="links">
<p>
<img name="button3" src="button/fisch_grau_35px.gif" border="0" onMouseOver="hiLite('button3', 'i10'); hiLite('text3', 'i12')">
</p>
</div>
<div id="rechts">
<p>
<img name="text3" src="button/03_4_freizeit_35px.gif" border="0" onMouseOver="hiLite('button3', 'i10'); hiLite('text3', 'i12')">
</p>
</div>
</a>
</td>
</tr>

<tr>
<td align="left" valign="middle" nowrap><img src="spacer_white.gif" width="100" height="1"><br>
<a href="index2.html">
<div id="links"><img name="button4" src="button/fisch_grau_35px.gif" border="0" onMouseOver="hiLite('button4', 'i14'); hiLite('text4', 'i16')"></div><div id="rechts"><img name="text4" src="button/04_4_hochzeit_35px.gif" border="0" onMouseOver="hiLite('button4', 'i14'); hiLite('text4', 'i16')"></div>
</a>
</td>
</tr>

<tr>
<td align="left" valign="middle" nowrap><img src="spacer_white.gif" width="100" height="1"><br>
<a href="index2.html">
<div id="links"><img name="button5" src="button/fisch_grau_35px.gif" border="0" onMouseOver="hiLite('button5', 'i18'); hiLite('text5', 'i20')"></div><div id="rechts"><img name="text5" src="button/05_4_gaeste_35px.gif" border="0" onMouseOver="hiLite('button5', 'i18'); hiLite('text5', 'i20')"></div>
</a>
</td>
</tr>

<tr>
<td align="left" valign="middle" nowrap><img src="spacer_white.gif" width="100" height="1"><br>
<a href="index2.html">
<div id="links"><img name="button6" src="button/fisch_grau_35px.gif" border="0" onMouseOver="hiLite('button6', 'i22'); hiLite('text6', 'i24')"></div><div id="rechts"><img name="text6" src="button/06_4_kontakt_35px.gif" border="0" onMouseOver="hiLite('button6', 'i22'); hiLite('text6', 'i24')"></div>
</a>
</td>
</tr>
</td>
</table>


</body>

</html>
​
text.css:
#links
{
position:absolute;
width:100px;
height:35px;
z-index:0;
}

#rechts
{
position:relative;left:32px;
width:100px;
height:35px;
z-index:1;
}
​
 
Woodstok schrieb:
Vielleicht schafft es der IE nicht innerhalb eines Links ein div-Tag zu verarbeiten.
Zum Vergrößern anklicken....
Der IE macht ja viel, was keinen Sinn macht, aber ein Block-Element (wie div oder p) innerhalb eines Inline-Elements (a) ist nicht erlaubt.

Das solltest Du auf jeden Fall ändern. Wie schon anfangs gesagt, sollst Du unbedingt die Fehler mit dem Validator korrigieren. Du kannst nicht erwarten, dass alles so klappt, wie Du Dir das vorstellst, wenn Du Fehler einbaust.
 
no chance

Ich krieg es nicht hin. Habe den Code nun so weit runter, dass ich den Fehler näher lokalisieren kann.

Mein Problem: Ich möchte, dass die gif Animation in Ruhe abläuft (also nicht mit mouseout wieder die Anfangsgrafik zeigen) und beim nächsten Mouseover wieder funktioniert.
Mit Firefox kein Problem, mit dem IE wird die Animation beim Mouseover einmal abgespielt, dann nicht mehr.
Zu sehen auf Homepage

 Gibt es da nicht was wie "Wenn Animation abgelaufen, stell wieder die vorige Grafik hin" ?!

Quellcode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title> Homepage </title>
<script type="text/javascript" language="JavaScript">
pic = new Image(35,41);
pic.src = "fisch_grau_35px.gif";
pic = new Image(35,41);
pic.src = "fisch_rot_35px.gif";
</script>


</head>
<body>
<a href="index23.html">
<img src="fisch_grau_35px.gif" NAME="fischrot" border="0" onMouseover="fischrot.src='fisch_rot_35px.gif';" alt="Link 1">
</a>
</body>
</html>

​
Danke, Leute
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben