Rollover in Firefox korrekt - I.Explorer nicht

Ben West

Hallo,

ich verstehe nicht weswegen in Mozilla meine Rollovermenüs korrekt angezeigt werden und im Internet Explorer nicht. Die Menüs sind mit 1,2,3 etc fortlaufend nummeriert und der button wechselt in rot. Allerdings geht der I-Explorer hin und zeigt beim rollover von Button1 plötzlich auf Button 2 die 1 an. und so weiter - immer um eins versetzt.

Hier der Link zu besagter Webseite um es sich besser anzusehen:
http://www.sam-publishing.com/start.html

Hier mein verwendeter Dreamweaver Code:

HTML

<table width="800" border="0" cellpadding="0" cellspacing="0">
    <TR>

      <TD>
        <div align="center">
          <p align="left"><img src="bilder/logo_head.gif" width="200" height="80"><a href="start.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('1','','bilder/1_rot.jpg',1)"><img src="bilder/1.jpg" name="1" width="100" height="80" border="0"></a><a href="philosophie.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('2','','bilder/2_rot.jpg',1)"><img src="bilder/2.jpg" name="2" width="100" height="80" border="0"></a><a href="leistungen.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('3','','bilder/3_rot.jpg',1)"><img src="bilder/3.jpg" name="3" width="100" height="80" border="0"></a><a href="referenzen.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('4','','bilder/4_rot.jpg',1)"><img src="bilder/4.jpg" name="4" width="100" height="80" border="0"></a><a href="kunden.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('5','','bilder/5_rot.jpg',1)"><img src="bilder/5.jpg" name="5" width="100" height="80" border="0"></a><a href="kontakt.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('6','','bilder/6_rot.jpg',1)"><img src="bilder/6.jpg" name="6" width="100" height="80" border="0"></a></p>
      </div></TD>

  </TR>

</TABLE>

Alles anzeigen

synaptic

also das script von dreamweaver sollte eigentlich fruchten...
aber ich glaub das ganze geht auch mit weit weniger code
ich kann leider erst nach 18 uhr gucken woran es liegt.. evtl findet sich ja vorher jemand..

habs mal in den javascript-bereich verschoben

Bandit

Zitat

Leistungskatalog (Auszug)

Marketing-Konzeption

Corporate Design

Logo Entwicklung

Verpackungsdesign

Videoproduktion

Web-Design & Entwicklung

Foto-Shooting

Radio Spots

Auweia, Tabellenlayout und Validator-Fehler, aber Web-Design & Entwicklung anbieten

Ich würde den Kram erst garnicht mit den DreamWeaver-JavaScript-Funktionen bauen, sondern per CSS.

Ben West

Ja sorry - ich hab nur PRINT gelernt und unser Webmensch hat die Firma verlassen und ich musste selbst die Seite in ner Nachtaktion bauen und kenne eben nur die Basics noch von der Schule die alle HTML sind, zudem veraltet und bestimmt mit tausend Fehlern - keine Frage, streitet niemand ab.
Wäre unser Webmensch noch da wäre diese Seite denke ich in CSS oder Flash aufgebaut. Ich hoffe mein Chef stellt schnellstmöglich wieder jemanden ein :-(. Solange ist es allerdings meine Aufgabe den Karren aus dem Dreck zu ziehen.

synaptic

änderungen zu vorher:
1) script funktioniert
2) anständigen doctype hinzugefügt
3) absolute URLs zum testen benutzt (die können halt wieder entfernt werden)
4) die name-attribute bei den bildern mit IDs getauscht und die ID-Benennung auch richtig vorgenommen.

funktionsweise meines scriptes:
das vorausladen der bilder passiert jetzt in ein anständiges array und die bilder werden auch als bildobjekte geladen, klar es würd auch als einfachen string funktionieren, aber da wäre es ein vorausladen von zeichenketten und nicht von bildern.
die funktion zum bildwechseln bekommt als parameter eine objekt-id (die des bildes) übergeben und einen Bild-Index(sieht man auch im array).
dann sichert die funktion die alte bildquelle in einer variablen, tauscht gemäß index die alte quelle beim bild gegen die neue aus und damit die alte bildquelle erhalten bleibt wird jetzt an der stelle wo das neue bild herkam das alte in das array geschoben und verwahrt.
beim mouseout passiert das gleiche erneut und man hat wieder das eigentlich alte bild da stehen!

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="keywords" content="Werbeagentur, Ramstein, Rheinland, Pfalz, Flash, Flash-Video, Webdesign, Internetagentur, WM 2010, Wortmann, Marketing, B2B, WM, Neue Medien, Animation, Multimedia, Design, Webdesign, CI, Agentur, Video, Werbung, Videoproduktion, 2D, Gestaltung, Film, Spot, Screendesign, Konzeptagentur, rich media, audiovisuell, Videobearbeitung, Full Service, Flyer, Poster, Geschäftsbriefe, Visitenkarten, Logo">
<meta name="description" content="Werbeagentur für klassische und neue Medien. Entwicklung von kreativen Markenwelten in den Bereichen Internet, Print und Video." >
<title>SAM-Publishing | Werbeagentur</title>


<style type="text/css">
<!--
body {
background-image:url(http://www.sam-publishing.com/bilder/Bildwiederholung.gif);
background-position:0px 0px;
background-attachment:fixed;
background-repeat:repeat;
}
.Stil8 {
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-size: 9px;
}
body,td,th {
    color: #FFFFFF;
}
a:link {
    color: #a58053;
}
a:visited {
    color: #BFA482;
}
.Stil11 {font-family: Arial, Helvetica, sans-serif; color: #A58053; font-size: 9px; }
.Stil12 {
    color: #FFFFFF;
    font-size: 9px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}
.NEWS {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #ac0014;
    font-weight: bold;
}
.Stil16 {font-family: Geneva, Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #000000}
.EVENTS {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #005996;
    font-weight: bold;
}
.Stil23 {color: #FFFF00; font-size: 24px; }
.Stil24 {color: #FFFFFF}
.Stil25 {font-size: 16px; font-weight: bold; font-style: italic; font-family: Geneva, Arial, Helvetica, sans-serif;}
.Stil27 {color: #FFFF00; font-size: 36px; }
.Stil29 {font-size: 16px; font-family: Geneva, Arial, Helvetica, sans-serif;}
h1 {
    font-size: 16px;
    color: #F00;
}
-->
</style>
<script type="text/javascript">
/* <![CDATA[ */
var Bilder = new Array();


function preload(){    
    Bilder[0] = new Image();
    Bilder[0].src = 'http://www.sam-publishing.com/bilder/brazil_sw.jpg';
    Bilder[1] = new Image();
    Bilder[1].src = 'http://www.sam-publishing.com/bilder/1_rot.jpg';
    Bilder[2] = new Image();
    Bilder[2].src = 'http://www.sam-publishing.com/bilder/2_rot.jpg';
    Bilder[3] = new Image();
    Bilder[3].src = 'http://www.sam-publishing.com/bilder/3_rot.jpg';
    Bilder[4] = new Image();
    Bilder[4].src = 'http://www.sam-publishing.com/bilder/4_rot.jpg';
    Bilder[5] = new Image();
    Bilder[5].src = 'http://www.sam-publishing.com/bilder/5_rot.jpg';
    Bilder[6] = new Image();
    Bilder[6].src = 'http://www.sam-publishing.com/bilder/6_rot.jpg';
}
function swapImage(object, index){
    var target = document.getElementById(object);
    var oldPic = target.src;
    target.src = Bilder[index].src;
    Bilder[index].src = oldPic;
}
window.onload= preload;
/* ]]> */ 




</script>
</head>


<body>


<div align="center">
  <table width="800" border="0" cellpadding="0" cellspacing="0">
    <TR>

      <TD>
        <div align="center">
          <p align="left"><img src="http://www.sam-publishing.com/bilder/logo_head.gif" width="200" height="80"><a href="start.html" onMouseOut="swapImage('img1', 1);" onMouseOver="swapImage('img1', 1);"><img src="http://www.sam-publishing.com/bilder/1.jpg" id="img1" width="100" height="80" border="0"></a><a href="philosophie.html" onMouseOut="swapImage('img2', 2);" onMouseOver="swapImage('img2', 2);"><img src="http://www.sam-publishing.com/bilder/2.jpg" id="img2" width="100" height="80" border="0"></a><a href="leistungen.html" onMouseOut="swapImage('img3', 3);" onMouseOver="swapImage('img3', 3);"><img src="http://www.sam-publishing.com/bilder/3.jpg" id="img3" width="100" height="80" border="0"></a><a href="referenzen.html" onMouseOut="swapImage('img4', 4);" onMouseOver="swapImage('img4', 4);"><img src="http://www.sam-publishing.com/bilder/4.jpg" id="img4" width="100" height="80" border="0"></a><a href="kunden.html" onMouseOut="swapImage('img5', 5);" onMouseOver="swapImage('img5', 5);"><img src="http://www.sam-publishing.com/bilder/5.jpg" id="img5" width="100" height="80" border="0"></a><a href="kontakt.html" onMouseOut="swapImage('img6', 6);" onMouseOver="swapImage('img6', 6);"><img src="http://www.sam-publishing.com/bilder/6.jpg" id="img6" width="100" height="80" border="0"></a></p>
        </div>
      </TD>

  </TR>

</TABLE> 
  <table width="800" border="0" cellpadding="0" cellspacing="0">


<tr>
      <td colspan="3"><div align="left"><br>
      </div></td>
    </tr>
    <tr>
      <td width="712" valign="top" bgcolor="#FFFFFF"><blockquote>
        <p>&nbsp;</p>
        <p><img src="http://www.sam-publishing.com/bilder/pub.jpg" align="left" width="239" height="136" alt="Pub"><span class="NEWS">Logo Entwicklung Oscar's Irish Pub</span></p>
<p class="Stil16">F&uuml;r Oscar's Irish Pub in Landstuhl  realisierte SAM die Entwicklung des Logos sowie diverse Printprodukte.</p>


<p class="Stil16">&nbsp;</p>
<p class="Stil16">&nbsp;</p>
<p><img src="http://www.sam-publishing.com/bilder/america.jpg" align="left" width="239" height="136" alt="Pub"><span class="NEWS">Webseite Hotel America</span></p>
<p class="Stil16">F&uuml;r das Hotel America in Ramstein realisierte SAM eine neue zeitlose Homepage.</p>
<p class="Stil16">&nbsp;</p>
<p class="Stil16">&nbsp;</p>
      </blockquote></td>
      <td width="88" valign="top" bgcolor="#FFFFFF"><blockquote>
        <p class="NEWS">&nbsp;</p>
      </blockquote>


      </bp>
<p class="Stil16"></tr>
    <tr>
      <td height="16" colspan="3" bgcolor="#ac0014" class="Stil12"><CENTER>
        &copy; 2010 SAM-Publishing
      // v. 1.0
      </CENTER></td>
    </tr>
  </table>
  <br />


  <br />
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-8238986-1");
pageTracker._trackPageview();
} catch(err) {}</script></body>
</html>

Alles anzeigen

Ben West

Hey super Danke - dass man sich den code so zu Herzen nimmt hätte ich jetzt garnicht mit gerechnet. Super Forum. Tausend Dank!

Ich werde ihn schnellstmöglich einbauen.

synaptic

jau kein ding.. nur vergiss nich.. dein gesamter quellcode ist arg verbesserungswürdig...!

Rollover in Firefox korrekt - I.Explorer nicht

Tags

Benutzer online in diesem Thema