Safari und Javascript

Jaqueline · 14.08.05

Hallo,

Ich habe folgendes, mir unerklärliches Problem:
Ich habe ein javascript in einer html-Datei, das Folgendes bewirken soll: Ein gif soll ohne erneutes Laden der html-Datei durch klicken auf den "next"-button ausgetauscht werden. Beginnend mit 01.gif, dann 02.gif, dann 03.gif, und dann weiter als Schleife, wieder mit 01.gif beginnend. Oder das gleiche Prinzip umgekehrt mit dem "prvious"-button.
Also eine einfacher Durchlauf durch eine Galerie.

Funktioniert auch auf allen von mir getesteten Browsern, aber leider nicht auf Safari. Da funktioniert bei der älteren Version gerade mal ein Durchlauf (01->02->03->01), dann geht es nicht weiter, bei der aktuellen Version funktioniert gerade mal ein oder zwei Klicks, dann ist schon alles taub.

Bitte schreibt mir jetzt nicht, dass Safari sowieso doof ist und kein Mensch Safari verwendet - mein Auftraggeber verwendet Ihn.

Ich wäre sehr dankbar, wenn jemand das Problem oder besser dessen Lösung kennt, denn ich weiss nicht mehr weiter.

Folgend der link, falls jemand probieren möchte:

http://www.momproductions.de/123/123.html

Vielen Dank für die Mühen,

Per

creative7even · 14.08.05

Hallo!

habe mal den code ein wenig verändert. Änderungen sind mit CHANGED kommentiert.

Code:

...
<html>
<head>
<title>...1-2-3-1-2-3-1-2-3-1-2-3...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">
<!--
var current_index = 1;
// HIER DIE ANZAHL DER BILDER IN EINER GALLERIE AENDERN
var max_image = 3;
var displayImages = new Array();
for(var i = 1; i <= max_image; i++) {
   displayImages[i] = 0;
}	
var menuNormal = new Array();
// MENUE NORMAL
// Portfolio
menuNormal[0] = new Image();
menuNormal[0].src="pohg.gif";
// Hauptbild
menuNormal[1] = new Image();
// Leergifs
menuNormal[2] = new Image();
// Previous
menuNormal[3] = new Image();
menuNormal[3].src="prhg.gif";
// Next
menuNormal[4] = new Image();
menuNormal[4].src="nehg.gif";
// Leergifs
menuNormal[5] = new Image();
menuNormal[6] = new Image();	

// MENUE HIGHLIGHT
var menuHighlight = new Array();
// Portfolio
menuHighlight[0] = new Image();
menuHighlight[0].src="podg.gif";
// Hauptbild
menuHighlight[1] = new Image();
// Leergif
menuHighlight[2] = new Image();
// Previous
menuHighlight[3] = new Image();
menuHighlight[3].src="prdg.gif";
// Next
menuHighlight[4] = new Image();
menuHighlight[4].src="nedg.gif";
// Leergifs
menuHighlight[5] = new Image();
menuHighlight[6] = new Image();

function menuOver(index) {
  document.images[index].src = menuHighlight[index].src;
}

function menuOut(index) {
  document.images[index].src = menuNormal[index].src;
}	

function switchImage(direction) {
   // next
   if(direction == true){
      current_index++;
      if(current_index > max_image || current_index == 0) {
         current_index = 1;
      }
   }
   // previous
   else{
      current_index--;
      if(current_index < 1) {
         current_index = max_image;
      }
   }

   // index changed. swap image to given index.
   if(displayImages[current_index].src == null){		//CHANGED property "src".
      displayImages[current_index] = new Image;
      var name = "";
      if(current_index < 10){
         name = "0" + current_index + ".gif";
      }
      else{
         name = current_index + ".gif";
      }
      displayImages[current_index].src = name;
      document.swapimg.src = name;							// CHANGED displayImages[current_index].src;
   }
   else{
   	document.swapimg.src = name = "0" + current_index + ".gif";
   }
}

function linie(x) {}
{   if (document.all) x.blur(); }

function preloadImages() {
  var d=document; if(d.images){ if(!d.p) d.p=new Array();
    var i,j=d.p.length,a=preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.p[j]=new Image; d.p[j++].src=a[i];}}
}
//-->
</script>
</head>

<body bgcolor="#FFFFFF" onLoad="preloadImages('nedg.gif','prdg.gif','podg.gif')">
<table width="800" border="0" cellspacing="0" cellpadding="0" align="center" height="100%">
  <tr>
    <td>
      <table width="800" border="0" cellspacing="0" cellpadding="0" align="center" height="525">
        <tr> 
          <td valign="top" height="20">
          	<!-- portfolio -->
          	<a href="#" onClick="linie(this);" onMouseOver="menuOver(0)" onMouseOut="menuOut(0)"> 
            	<img name="po" border="0" src="podg.gif" width="75" height="20"></a>
          </td>
          <!-- image to swap -->
          <td rowspan="3"><img name="swapimg" src="01.gif" width="650" height="525"></td>
          <td valign="top"><img src="l.gif" width="75" height="20"></td>
        </tr>
        <tr> 
          <td valign="middle" height="485">
          	<!-- previous -->
          	<a href="javascript:switchImage(false)" onClick="linie(this);" onMouseOver="menuOver(3)" onMouseOut="menuOut(3)"> 
            	<img name="pr" border="0" src="prhg.gif" width="75" height="14"></a>
          </td>
          <td valign="middle">
          	<!-- next -->
          	<a href="javascript:switchImage(true)" onClick="linie(this);" onMouseOver="menuOver(4)" onMouseOut="menuOut(4)"> 
            	<img name="n1" border="0" src="nehg.gif" width="75" height="14"></a>
          </td>
        </tr>
        <tr> 
          <td valign="bottom" height="20"><img src="l.gif" width="75" height="20"></td>
          <td height="20" valign="bottom"><img src="l.gif" width="75" height="20"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

</body>
</html>

funktioniert auf Safari 1.3 (Panther 10.3.9)

creative7.

Jaqueline · 14.08.05

... ich bin beeindruckt. Danke !
Ich bin in zwei Tagen nicht dahinter gekommen.

Im Vergleich zu Deiner Problemlösung ist es vielleicht unerheblich, aber vielleicht weisst Du ja trotzdem Rat: Wenn ich die Datei nun im IE aufrufe erscheint nach dem ersten klicken penetrant der "linkrahmen", also der Rand um "previous" bzw. "next", den ich versuche mit

function linie(x) {}
{ if (document.all) x.blur(); }

zu vermeiden:

http://www.momproductions.de/123/neu.html

creative7even · 14.08.05

hier kann etwas css helfen!

zb.:

Code:

<style type="text/css">
<!--
.anchor, .anchor:hover {
  text-decoration:none;
}
-->
</style>

<a href="foo.html" class="anchor" >klick</a>

gruesse.creative7

Jaqueline · 15.08.05

Guten Morgen creative7,

erst nochmals Danke, denn Dein Vorschlag hat mir sehr geholfen und funktioniert wunderbar. Aber die css-Sache hatte nicht den erhofften Effekt:

http://www.momproductions.de/123/klick.htm

... der klick-Rand bleibt im Explorer und will gar nicht mehr weggehen, ausser ich klicke irgendwo anderes hin.
Vielleicht hast Du ja noch nen heissen Tip, wenn nicht, danke ich Dir wirklich sehr für Deine Mühen.

j.

creative7even · 15.08.05

Hi!

da habe ich offenbar was missverstanden:
das hier müsste gehen (ie for mac):

Code:

...
<a href="foo.html" onclick="this.blur();" >foo</a>
...

creative7.

stk · 15.08.05

Moin,

schade nur, das alles vollkommen vergebene Liebesmüh ist, wenn der Benutzer JS (aus gutem Grund) abschaltet :oops:

.

Wie wär's mit der Anwendung von <noscript> oder dem Versuch das in ähnlicher Form als CSS-only (als hint: "visibility: hidden") zu realisieren?

Gruß Stefan

creative7even · 15.08.05

stk schrieb:
Moin,
schade nur, das alles vollkommen vergebene Liebesmüh ist, wenn der Benutzer JS (aus gutem Grund) abschaltet .

...in diesem Falle würde er dann gar keinen Zugang zum Inhalt der Seite bekommen, und womöglich auf 90% der Seiten im www etwas benachteiligt sein.

stk schrieb:
Wie wär's mit der Anwendung von <noscript> oder dem Versuch das in ähnlicher Form als CSS-only (als hint: "visibility: hidden") zu realisieren?

Habe jetze keine Ahnung was das bringen sollte... sorry :innocent:

creative7

stk · 15.08.05

Moin,

creative7even schrieb:
...in diesem Falle würde er dann gar keinen Zugang zum Inhalt der Seite bekommen, und womöglich auf 90% der Seiten im www etwas benachteiligt sein.

<loriot>Ahhh ja</loriot>Also etwa "Zu Risiken und Nebenwirkungen fragen Sie Bill Gates oder wechseln den Browser" - oder wie? "WebDesigner" (sagen wir lieber: die Schmalspurausgaben die sich dafür halten) sind im Allgemeinen schon beschränkt, aber das ist erfreulichweise keine 90 % Mehrheit. Nebenbei: Tendenz abnehmend.

creative7even schrieb:
Habe jetze keine Ahnung was das bringen sollte... sorry

Dann empfehle ich dringlich mal die Auseinandersetzung mit Begrifflichkeiten wie "accessibility" (Zugänglichkeit), "usability" (Nutzbarkeit) und "validity" (Validität) im konkreten Fall jeweils im Kontext von Webdesign/Webanwendungen.*

Gruß Stefan

creative7even · 15.08.05

wie auch immer...

das grundlegende Problem war das Umrahmen von aktiven Links im Internetexplorer für mac. Da hilft kein valid css oder xhtml, oder auch keine barrierefreiheit.

stk · 15.08.05

Moin,

Nein, das grundlegede Problem war/ist das ein Portfolio über eine JS-Methode präsentiert werden soll. Kann man machen, muß man aber nicht. Wenn man es dennoch tut, muß man auch die Randbedingungen dazu beachten. Und da gehören die von mir genannten Begrifflichkeiten sehr wohl dazu.

Gruß Stefan

supermario · 15.08.05

stk schrieb:
Moin,

Nein, das grundlegede Problem war/ist das ein Portfolio über eine JS-Methode präsentiert werden soll. Kann man machen, muß man aber nicht. Wenn man es dennoch tut, muß man auch die Randbedingungen dazu beachten. Und da gehören die von mir genannten Begrifflichkeiten sehr wohl dazu.

Gruß Stefan

ich denke man kann js einbinden ohne das d e i n e randbedingungen darunter leiden oder glaubst du, dass annähernd 50% im www überhaupt wissen, wie man es abschaltet!? solange der ie von microsuft noch den größten marktanteil hat, sind noch ne menge ahnungslose unterwegs...

Jaqueline · 15.08.05

Hallo,
erst mal grossen Dank für die kompetente Hilfe von creative7!
Funktioniert hat letztlich Browserübergreifend (hoffentlich):

onFocus="if(this.blur) this.blur()"

Also nochmals vielen Dank für die Mühen.

Ansonsten scheint mir die Diskussion etwas zu akademisch zu werden, da kann ich ja als Schmalspurwebdesignerin nicht mehr mithalten und sollte mich lieber raushalten.
Vielleicht soviel: der css-Vorschlag hat keine Chancen auf Ns 4.x und nur teilweise beim IE 5.x. Insofern finde ich die JS-Variante durchaus legitim und derjenige der es abschaltet kann es ja anmachen. Ich muss ja auch erst mal den Monitor einschalten, bevor ich was sehe.
Aber eigentlich wollte ich mich ja raushalten...

Danke nochmals,
J.

Suche

Suche

Safari und Javascript

Jaqueline

Gast

creative7even

Jerseymac

Jaqueline

Gast

creative7even

Jerseymac

Jaqueline

Gast

creative7even

Jerseymac

stk

Grünapfel

creative7even

Jerseymac

stk

Grünapfel

creative7even

Jerseymac

stk

Grünapfel

supermario

Gast

Jaqueline

Gast

Wir schützen Ihre Privatsphäre

Informationen auf einem Gerät speichern und/oder abrufen

Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen (Optionale Cookies)

Datenübermittlung an Partner in anderen Staaten (Drittanbieter-Cookies)