Sita: S.O.S.-Layer, Div-Tag + Textwechsel in Netscape

SELF-Forum

S.O.S.-Layer, Div-Tag + Textwechsel in Netscape

Sita
– Informationen zu den Bewertungsregeln

Ich weiß einfach nicht mehr weiter und hoffe nun auf Eure siegesreiche Hilfe.

Ich bin noch Anfängerin was JavaScript angeht und habe folgendes Script mit ein paar Freunden zusammengebastelt.

Folgendes Problem:
Ich möchte kleine Fotos versetzt übereinanderlegen (ähnlich wie eine Collage). Beim Rollover auf ein kleines Foto soll sich dieses austauschen durch ein großes, das sich über alle anderen kleinen legt und vorher nicht sichtbar war.
Gleichzeitig (wenn das große Foto sich über alle anderen legt) soll ein Text erscheinen - immer an derselben Stelle.

Funkioniert im Internet-Explorer toll und in Netscape gibt es schon Probleme bei dem Bildwechsel.

Hoffentlich kann mir jemand von Euch hilfreich zur Seite stehen!?

Hier das Script:

<html>
<head>
<title>Seite 1</title>
<LINK HREF="../E_css/style.css" REL="STYLESHEET" TYPE="text/css">
<link href="../e_css/stylepos.css" rel="STYLESHEET" type="text/css">

<script language="javascript">  
  
  
<!--  
if (document.images){

grafik1 = new Image(); grafik1.src = "Schmuck/O_0056.jpg";
  grafik2 = new Image(); grafik2.src = "Schmuck/O_0099.jpg";
  
  
  }

function bildwechsel (Bild,Dateiname,x)

{
  if(document.all){
  window.document.images[Bild].src=Dateiname;
  }else{
  document.layers["lage"+x].document.images[Bild].src=Dateiname;}
  }
  
  
  
  var z=10;
  function nachVorn(y){
  if(document.all){
  document.all[y].style.zIndex=z;
  }else{
  document.layers[y].zIndex=z;}
  }

var a=0;
  function gifZuruck(b){
  if(document.all){
  document.all[b].style.zIndex=a;
  }else{
  document.layers[b].zIndex=a;}
  }
  
  
  
  var Schmucktext = new Array ("","<font face='arial','Futura','Helvetica' size='-2' color='000099'><br>Hier steht der erste Text</font>","<font face='arial','Futura','Helvetica' size='-2' color='000099'>Hier steht der zweite Text</font>","<font face='arial','Futura','Helvetica' size='-2' color='000099'><BR><br>Hier steht der dritte Text</font>");
  
  function textwechsel(welcher){
  if(document.all){
  document.all["text"].innerHTML=Schmucktext[welcher];
  }else{
  document.layers["textlayer"].document.write("<div id='text' style='position:absolute; left:20px; top:350px;'>" + Schmucktext[welcher] + "</div>");
  }
  }
  
  //-->
</script>

</head>

<body BACKGROUND="../H_Kacheln/Kachel.jpg" MARGINWIDTH="0" MARGINHEIGHT="0" TOPMARGIN="0" LEFTMARGIN="0" link="#0000cc" alink="#3333cc" vlink="#cc3300">

<!-- das erste Gif als Hintergrund-->
<img src="../ganzr.gif" width=616 height=440 border=0 style="left: auto; top: auto; position: absolute;" alt="">

<!-- neue Positionierung (beim Rollover) mit Blind.gif-Container-->  
  
<div class="Spositionid1" id="lage9"><a href="#" onmouseout="bildwechsel('Bild8','Intim/blind.gif','9');gifZuruck('lage9');textwechsel(0);"><img src="Intim/blind.gif" border=0 name="Bild8" alt="Kette"></a>  
</div>  
  
  
<div class="Spositionid2" id="lage10"><a href="#" onmouseout="bildwechsel('Bild9','Intim/blind.gif','10');gifZuruck('lage10');textwechsel(0);"><img src="Intim/blind.gif" border=0 name="Bild9" alt="Ring"></a>  
</div>  
  
  
  
  
<!-- Bildwechsel (beim Rollover)-->  
  
  
<div class="Sposition2" id="lage1"><a href="#" onmouseover="bildwechsel('Bild8','Schmuck/O\_0098.jpg','9');nachVorn('lage9');textwechsel(1);" onmouseout="bildwechsel('Bild0','Schmuck/O\_0098k.jpg','1')"><img src="Schmuck/O\_0098k.jpg" border=0 name="Bild0" alt="Herz-Kette"></a>  
</div>  
  
<div class="Sposition1" id="lage2"><a href="#" onmouseover="bildwechsel('Bild9','Schmuck/O\_0104.jpg','10');nachVorn('lage10');textwechsel(2);" onmouseout="bildwechsel('Bild1','Schmuck/O\_0104k.jpg','2')"><img src="Schmuck/O\_0104k.jpg" border=0 name="Bild1" alt="Zwei-Finger-Ring"></a>  
</div>  
  
  
  
  
  
<!-- Vor- und Zurück-Button-->  
<div class="nextbackbutton"><a href="Schmu\_5a.htm" target="Inhalt">go back</a>   <a href="Schmu\_6b.htm" target="Inhalt">go next</a></div>

<!-- Textwechsel (beim Rollover) mit Blind.gif-Container-->

<layer id="textlayer"><div id="text" style="position:absolute; left:30px; top:360px;"></div></layer>

</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. S.O.S.-Layer, Div-Tag + Textwechsel in Netscape

    Hartmut
    – Informationen zu den Bewertungsregeln

    Ich weiß einfach nicht mehr weiter und hoffe nun auf Eure siegesreiche Hilfe.

    Hallo Sita!

    Mit der css-Angabe
        "position:absolute; top:00; left:00; visibility:hidden;"
    kann man Elemente sowohl im IE als auch im NN positionieren.
    Wenn Du in derartig positionierten Elementen über eine Funktion
         "bildwechsel() {gif1 = new Image; gif1.src = NeuesBild}"
    , wie Du sie verwendest, die Images tauschen möchtest, dann funktioniert das nur im IE, im NN aber nicht, wie Du siehst.
    Der NN würde nur dann über obiger Bildwechsel-Funktion tauschen, wenn Du die Images über Layer
    <layer id="xx" top=00 left=00></layer> positionieren würdest.

    Mit anderen Worten, meines Erachtens solltest Du Deinen Text nochmals überarbeiten.

    Die Codes stehen alle in Selfhtml, die für Dich richtigen hier nochmals:

    IE:
    ____________________________________________________

    <script language="JavaScript">
    <!--
    n1 = new Image(); n1.src = "xy.gif";
    H1 = new Image(); H1.src = "xyNEU.gif";

    function BW(Bnr,Bobjekt) {        //Bildwechsel mit onMouseOver
             window.document.images[Bnr].src = Bobjekt.src;
    }

    function BlauAn(z) {            //Bildanzeigen mit visibility
             document.all.tags("div")[z].style.visibility = "hidden";
    }
    function BlauAus(z) {            //Bildverstecken mit hidden
             document.all.tags("div")[z].style.visibility = "visible";
    }
    //-->
    </script>

    Und im Dateikörper:

    <div style="position:absolute; left:10; top:10">
    <a href="test.htm" onMouseOver="BW(0,H1)" onMouseOut="BW(0,n1)"><img src="xy.gif" width=100 height=100 border=0></a></div>

    <div style="position:absolute; left:10; top:10; visibility:hidden">
    <a href="test.htm" OnMouseOver="BlauAn(1)" onMouseOut="BlauAus(1)"><img src="xy.gif" width=100 height=100 border=0></a></div>

    Der gleiche Effekt im NN:
    ____________________________________________________

    <script language="JavaScript">
    <!--
    n1 = new Image(); n1.src = "xy.gif";
    H1 = new Image(); H1.src = "xyNEU.gif";

    function BW(Bnr,Bobjekt) {             //Bildwechsel mit onMouseOver
             window.document.layers[Bnr].document.images[0].src = Bobjekt.src;
    }

    function BlauAn(z) {                  //Bildanzeigen mit show
             document.layers[z].visibility = "show";
    }
    function BlauAus(z) {                  //Bildverstecken mit hide
             document.layers[z].visibility = "hide";
    }
    //-->
    </script>

    Und im Dateikörper:

    <layer left=10 top=10>
    <a href="test.htm" onMouseOver="BW(0,H1)" onMouseOut="BW(0,n1)"><img src="xy.gif" width=100 height=100 border=0></a></layer>

    <layer left=10 top=10 visibility=hide>
    <a href="#" onMouseOver="BlauAn(1)" onMouseOut="BlauAus(1)"><img src="xy.gif" width=100 height=100 border=0></a></layer>

    Viele Grüsse
    Hartmut

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln